Magnetic Hover
Variable font weight responds to mouse proximity creating magnetic effect.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| text | string | MAGNETIC | Text to display |
| color | string | #ffffff | Active character color when near cursor |
When to Use
Ideal for landing page headlines, luxury brands, and high-impact web applications where a tactile, responsive header is needed.
Best Practices
Use with a variable font that supports weight axes for the smoothest effect. Keep text to a single short word or phrase for maximum impact.
Why This Component Matters
Variable fonts are at the forefront of modern UI typography. This component makes your interface feel alive and premium.
FAQ
QDoes this require a special font?
Yes, it works best with variable fonts that support weight axes.
QIs it mobile-friendly?
Yes, it supports touch move events for a similar experience on mobile.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.