A pill that is pulled toward the cursor before you reach it: the body stretches like liquid along the pointer direction, the label trails with parallax and a highlight sits on the near side. It snaps back with an elastic overshoot.
Analytics that answer back
npx shadcn@latest add https://hyperblur.dev/r/button-magnetic-pill.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-magnetic-pill.tsx.
import { ButtonMagneticPill } from "@/components/hyperblur/button-magnetic-pill"
<ButtonMagneticPill variant="light">Get early access</ButtonMagneticPill>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Get early access" | Button label. |
| radius | number | 110 | Distance in pixels from the edge of the pill where the pull starts. |
| strength | number | 0.35 | How far the pill follows the pointer, as a fraction of the distance. |
| stretch | number | 0.22 | Maximum elongation of the body along the pointer direction. |
| variant | "light" | "accent" | "dark" | "light" | White, accent or graphite pill. |
| accent | string | "#2f7bff" | Accent pill color and focus ring. |
| arrow | boolean | true | Shows a trailing arrow that nudges on hover. |
| disabled | boolean | false | Disables interaction and dims the control. |