MagneticButton

Button with cursor-proximity magnetic pull for subtle attention in primary CTAs.

stable input #motion#button#interactive

Loading preview…

Usage

- Use for primary CTAs where subtle motion draws the eye without shouting. - **Not** for forms, modal buttons, or anywhere users expect clicks at pixel-precise positions. - Do not stack multiple MagneticButtons in close proximity — they'll compete for cursor attention.

Do / Don't

- **Do** pair with `color.accent` for focal CTAs. - **Do** respect reduced-motion preferences. - **Don't** use for destructive actions — motion suggests playfulness. - **Don't** nest inside scrolling containers — pull calculation gets weird.

Tokens

color.accent — #E8462C
motion.ease-out-quart — cubic-bezier(0.165, 0.84, 0.44, 1)
motion.duration-base — 300ms
space.4 — 1rem

A11y

Respects prefers-reduced-motion — pull effect disables. Focus ring uses outline (no transform). Keyboard-activatable via Space/Enter.

Source

src/components/MagneticButton.tsx

Live playground