Magnetize
Variable-font text where each glyph swells in weight and gains a faint white glow as the cursor nears, under a steep gaussian falloff. Static mid-weight on touch and under reduced motion.
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/magnetizeManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | The text. Server-renders as plain text; the effect attaches after hydration. | |
| radius | number | 140 | Proximity radius in px within which glyphs respond to the cursor. |
| falloff | number | 2 | Steepness of the gaussian falloff. Higher = tighter, more physical field. |
| fromFontVariationSettings | string | "'wght' 400" | Resting font-variation-settings, e.g. "'wght' 400" or "'wght' 400, 'wdth' 100". The axes named here (unioned with toFontVariationSettings) are the axes driven. |
| toFontVariationSettings | string | "'wght' 900" | Font-variation-settings a glyph reaches at zero cursor distance. |
| glow | boolean | true | Faint emissive text-shadow on near glyphs as the cursor approaches. |
| glowColor | string | soft white | Glow color. |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"span">, "children"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.