Magnetic Button
A CTA that leans toward your cursor like a magnet, with a pointer-following light and click ripple.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
The body and the label travel different distances (parallax), a soft light tracks the pointer across the surface, and a click sends a ripple from the exact point you pressed. All native button props pass through.
Installation
$ npx shadcn@latest add https://guetix.com/r/magnetic-button.json
Uses the shadcn CLI. It creates components/guetix/magnetic-button.tsx and installs nothing else.
Usage
example.tsx
import { MagneticButton } from "@/components/guetix/magnetic-button";
export default function Example() {
return <MagneticButton />;
}
Hero CTAPricing buttonsNewsletter submit
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01Magnet math runs in a padded wrapper, so the pull starts before you touch the button.
- 02Label moves ~45% of the body: cheap parallax that reads as depth.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| strength | number | 14 | Max travel toward the cursor (px). |
| accent | string | "#4ade80" | Glow / ripple color. |
| ...button props | ButtonHTMLAttributes | — | onClick, disabled, type… |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- A real <button>; focus ring; motion off with reduced motion.