A smooth magnetic hover effect that subtly pulls elements toward the cursor.
pnpm dlx shadcn@latest add https://atlasui.dev/r/magnetic-hover.json
import { MagneticHover } from "@/components/magnetic-hover";
<MagneticHover> {/* Pass any children here, and the magnetic effect will be applied to it.*/} </MagneticHover>
children
React.ReactNode
strength
number
1
On This Page
Contribute