Magnetic Button
A magnetic button that is pulled towards the cursor as it approaches, with a parallax on the inner text and a spring back once the cursor leaves.
npx shadcn@latest add https://webberui.com/r/magnetic-button.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<MagneticButton />
Installation
npx shadcn@latest add https://webberui.com/r/magnetic-button.jsonInstalling also writes the --wb-duration-fast CSS variable into your global stylesheet.
Usage
import { MagneticButton } from "@/components/ui/magnetic-button";
<MagneticButton onClick={() => console.log("clicked")}>
Get started
</MagneticButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
strength | number | 0.35 | Magnet strength: the button's offset = the cursor's distance from center × strength; 0 means it does not move at all |
springConfig | SpringOptions | { stiffness: 260, damping: 18, mass: 0.7 } | Spring parameters for the return after the cursor leaves |
className | string | — | Overrides the default styles (a solid button by default, changeable to an outline or other variant) |
children | ReactNode | — | Button content |
All other <button> attributes (onClick, disabled, aria-*, and so on) are forwarded directly.
How it works
- Parallax depth: as the button shifts towards the cursor, the inner text shifts half as far in the opposite direction, producing a two-layer sense of depth
- Spring back: driven by
useMotionValue+useSpring, so it springs back to its original position with momentum once the cursor leaves - Disabled on touch devices automatically: it only responds to mouse pointer events (
pointerType === "mouse"), so on touch it is just an ordinary button - When the user has "reduce motion" enabled at the system level, the magnetism is disabled: the button stays put and functionality is unaffected
- The magnetism is also disabled while
disabled
Quantity Stepper (React)
A React ± quantity stepper for ecommerce: press-and-hold acceleration, min/max with an at-limit shake, direct typing, a trash icon at zero, and rolling digits, in compact and pill variants.
Theme Toggle
A light/dark theme toggle button: View Transitions expand a circle out from the click point, and the Sun/Moon icons rotate through the transition.