Anvil
A magnetic button with the heft of forged iron — it leans toward the cursor with damped spring lag, snaps back elastically on exit, and presses like an anvil strike: sharp compression, slow spring recovery, hairline white flash at the base edge.
motionpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/anvilManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| strength | number | 0.8 | How hard the iron leans toward the cursor. |
| maxDistance | number | 100 | Radius in px around the button's center within which the pull engages. |
| spring | AnvilSpringConfig | Magnetic spring. Deliberately heavy defaults — a slab of iron, not a balloon. | |
| flashColor | string | white | Color of the hairline flash at the base edge on strike. |
| children | React.ReactNode | Button label / content. | |
Also accepts all props of Omit<HTMLMotionProps<"button">, "children"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.