Magnetic

Pulls its child toward the cursor with a spring when it gets close. Subtle by default, playful if you want.

Motion

Playground

Tweak the props, the preview and the code follow.

Props

strength0.35

range80

disabled

import { Magnetic } from "@/components/ui/magnetic"

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

npx @plumsydev/plum-ui add magnetic

import { Magnetic } from "@/components/ui/magnetic"

<Magnetic strength={0.35} range={80}>
  <Button>Start building</Button>
</Magnetic>

Nest two magnets so the icon travels further than its button — instant depth.

Visualize the field of influence and tune it live.

0.40

Strength0.40

Range100px

Extends motion.div.

Prop	Type	Default
`strength` How far the child follows the cursor, from 0 to 1.	`number`	`0.35`
`range` Distance in px around the element where the pull applies.	`number`	`80`
`disabled` Turn the effect off.	`boolean`	`false`