Magnetic Button
A call-to-action that leans toward the cursor, with a parallax label and a springy return.
Overview
A button with a little gravity. An invisible zone around it starts pulling before the cursor arrives, so the button leans toward the pointer and the label travels half as far again, giving a sense of depth. On leave it springs home with a slight overshoot, and presses squash a touch.
Only real mouse pointers trigger the effect, so touch stays a normal tap. Reduced motion disables it entirely. It is a real <button> that forwards its ref and every native prop.
Use it for one or two primary actions on portfolio, agency and launch pages. Not for every button in an app.
When to use
- Headlines, numbers and moments you want people to notice once.
When not to use
- Text that changes constantly or must be read at a glance.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/magnetic-button.jsonnpx shadcn@latest add https://sundaeui.dev/r/magnetic-button.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/magnetic-button.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/magnetic-button.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy magnetic-button.tsx into components/sundae/.
- Make sure Tailwind scans that folder (v4 detects it automatically; v3 needs it in `content`).
- Import the component and use it as shown below.
Usage
import { MagneticButton } from '@/components/sundae/magnetic-button'
<MagneticButton onClick={start}>Start a project →</MagneticButton>
<MagneticButton variant="outline" strength={0.25}>See our work</MagneticButton>Props
| Prop | Type | Default |
|---|---|---|
strengthHow far it follows, from 0 to 1. | number | 0.35 |
reachPull zone around the button, in px. | number | 40 |
variantVisual style. | 'solid' | 'outline' | 'solid' |
…button propsForwarded to the native button, including the ref. | ButtonHTMLAttributes | — |
Accessibility
- A native button with a visible focus ring.
- Mouse-only, and disabled for reduced motion.
Customization
- The return spring is cubic-bezier(.22,1.4,.36,1). Lower 1.4 for less overshoot.
FAQ
- Is Magnetic Button free?
- Magnetic Button is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Magnetic Button?
- Run npx shadcn@latest add https://sundaeui.dev/r/magnetic-button.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Magnetic Button support keyboard and screen readers?
- A native button with a visible focus ring. Mouse-only, and disabled for reduced motion.
- Does Magnetic Button respect reduced motion?
- Mouse-only, and disabled for reduced motion.
More like this
All motion →- Pro
Word Morph
Motion · Expressive - Pro
Split-Flap Display
Motion · Brutalist Decode Text
Motion · FuturisticTaffy Tabs
Navigation · PlayfulPulse KPI
Data · UnderstatedJelly Switch
Forms · Playful