Move your cursor near the elements below. The content gently follows with smooth spring physics. Motion is disabled when prefers-reduced-motion is set.
With Button
Text link
Icon button
Strength can be tuned per instance via the strength prop.
1import Link from "next/link";2import { Magnetic } from "@/components/Magnetic";3import { Button } from "@/components/ui/button";4 5<Magnetic>6 <Button size="lg">Hover me</Button>7</Magnetic>8 9<Magnetic strength={0.35}>10 <Link11 href="/components"12 className="text-lg font-medium text-foreground hover:text-primary"13 >14 Explore the collection15 </Link>16</Magnetic>17 18<Magnetic strength={0.4}>19 <Button variant="outline" size="icon" className="size-12">20 <Icon />21 </Button>22</Magnetic>