animations

MagneticHover

Makes child elements subtly follow the cursor within bounds, creating a magnetic pull effect on hover.

v1.0.0react >=18next >=14tailwind >=4motion >=12

hovercursormagneticinteractivemicro-interaction

Preview

Loading preview...

Props

Prop	Type	Default	Description
`children*`	`ReactNode`	`—`	Content to apply the magnetic effect to
`strength`	`number`	`0.3`	Pull strength toward cursor (0-1)
`radius`	`number`	`200`	Activation radius in pixels
`disabled`	`boolean`	`false`	Disable the magnetic effect
`className`	`string`	`—`	Additional Tailwind classes
`id`	`string`	`—`	HTML id attribute

Slots

Slot	Type	Required	Description
`children`	`ReactNode`	Yes	The element that will magnetically follow the cursor on hover

Layout

Display: inline-block

Responsive: No

Wraps children in an inline-block animated div. The element moves within its bounding box without affecting document flow.

Examples

Basic magnetic button

<MagneticHover>
  <button className="rounded-lg bg-white px-6 py-3 text-black font-semibold">
    Get Started
  </button>
</MagneticHover>

Strong pull on an icon

<MagneticHover strength={0.6}>
  <div className="flex h-16 w-16 items-center justify-center rounded-full bg-neutral-800">
    <ArrowIcon />
  </div>
</MagneticHover>

Subtle nav link

<MagneticHover strength={0.15}>
  <a href="/docs" className="text-neutral-400 hover:text-white transition-colors">
    Documentation
  </a>
</MagneticHover>

Disabled state

<MagneticHover disabled>
  <button className="rounded-lg bg-neutral-700 px-6 py-3 text-neutral-400 cursor-not-allowed">
    Unavailable
  </button>
</MagneticHover>

AI Usage Hint

Use MagneticHover to make buttons, icons, or cards subtly follow the cursor. Great for CTAs and interactive elements. Set strength (0-1) to control pull intensity.

Works Well With

ShimmerButtonGlowCard