Magnetic Button
A pill button that moves toward a nearby pointer and springs back when the pointer leaves.
- Dependencies
- gsap
- Size
- 190 lines
- Controls
- 5 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/magnetic-button.json1 · Dependencies
npm install gsap2 · Copy the source
components/onycx/magnetic-button.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the magnetic-button.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Get in touch" | Visible text. children override it. |
| href | string | — | Renders an anchor when provided. |
| strength | number | 0.4 | Share of the pointer offset the pill follows (0–1); the label and disc follow 45% further. |
| radius | number | 90 | px beyond the button edges where the pull begins. |
| variant | "light" | "dark" | "accent" | "light" | Paper pill with ink disc, ink pill with paper disc, or an accent pill that turns paper on hover. |
| accent | string | "#ff4d27" | Hover fill, accent surface and focus ring. |
| onClick / type / disabled / target | — | — | Forwarded to the element. |