Magnetic Hover
Variable font weight responds to mouse proximity creating magnetic effect.
Main Features of Magnetic Hover
How to Use Magnetic Hover in Next.js
Installation Guide for Magnetic Hover
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | MAGNETIC | Text to display |
backgroundColor | string | bg-zinc-950 | Background color of the component |
textSize | string | text-8xl | Size of the text |
maxWeight | number | 900 | Maximum font weight |
minWeight | number | 100 | Minimum font weight |
maxWidth | number | 1.5 | Maximum scale width |
minWidth | number | 1 | Minimum scale width |
activeColor | string | #ffffff | Color when active |
inactiveColor | string | #52525b | Color when inactive |
distanceRange | [number, number] | [0, 300] | Distance range for transformation |
colorRange | [number, number] | [0, 200] | Color range for transformation |
gap | string | gap-2 | Gap between characters |
className | string | Additional CSS classes |
Related Components
When to Use
This production-ready React UI component is ideal for landing page headlines, luxury brands, and high-impact web applications. Use this React component when you want a headline that feels tactile and responsive to the user's attention.
Best Practices
Optimize for legibility by ensuring the `maxWeight` doesn't make the characters overlap too much. Follow React best practices by setting a reasonable `distanceRange` for a subtle, professional feel. Maintain scalable component architecture by using responsive text sizes for different screen widths.
Why This Component Matters in Modern UI Development
Variable fonts are at the forefront of modern UI typography. This animated UI component helps 你 build an interface that feels alive and premium, adding a layer of semantic authority and visual depth to your real-world application architecture.
Frequently Asked Questions
QDoes this require a special font?
Yes, it works best with variable fonts that support weight axes, but it can also be used with standard fonts by mapping weight to scale.
QCan I use it for long paragraphs?
It is primarily designed for high-impact headlines (H1/H2) to ensure the magnetic effect remains performant and readable.
QIs it mobile-friendly?
Yes, it supports touch move events, providing a similar magnetic experience on mobile devices and tablets.