Magnetic

A magnetic wrapper component that attracts its children towards the mouse cursor. Inspired by Motion Primitives’ Magnetic. Supports self, parent, and global action areas.

Installation

npm

npx shadcn@latest add https://joaocarmassi.com/components/magnetic.json

pnpm

pnpm dlx shadcn@latest add https://joaocarmassi.com/components/magnetic.json

yarn

npx shadcn@latest add https://joaocarmassi.com/components/magnetic.json

bun

bunx --bun shadcn@latest add https://joaocarmassi.com/components/magnetic.json

Import

import { Magnetic } from '@/components/ui/magnetic';

---

Preview

Hover me

<Magnetic>
  <Button>Hover me</Button>
</Magnetic>

---

Custom Intensity & Range

Stronger pull

<Magnetic intensity={0.8} range={200}>
  <Button variant='outline'>Stronger pull</Button>
</Magnetic>

---

Action Areas

Control which element triggers the magnetic effect.

Self

Parent

{
  /* Default: self */
}
<Magnetic actionArea='self'>
  <Button>Self</Button>
</Magnetic>;

{
  /* Parent triggers the effect */
}
<Magnetic actionArea='parent'>
  <Button>Parent</Button>
</Magnetic>;

{
  /* Global mouse tracking */
}
<Magnetic actionArea='global' range={300}>
  <Button>Global</Button>
</Magnetic>;

---

Props

Prop	Type	Default	Description
children	React.ReactNode	—	Content to apply the effect to.
className	string	—	Additional CSS classes.
intensity	number	0.6	Strength of the magnetic pull.
range	number	100	Effective range in pixels.
actionArea	'self' | 'parent' | 'global'	'self'	Trigger area.
springOptions	SpringOptions	{ stiffness: 26.7, damping: 4.1, mass: 0.2 }	Spring config.