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

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

Import


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

Preview


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

Custom Intensity & Range


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

Action Areas

Control which element triggers the magnetic effect.


{
  /* 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.