Elastic Hovers
Physics-based vertical stretch on character hover with spring animation.
Main Features of Elastic Hovers
How to Use Elastic Hovers in Next.js
Installation Guide for Elastic Hovers
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | Elastic Physics | Text to display |
backgroundColor | string | bg-zinc-950 | Background color of the component |
textSize | string | text-8xl | Size of the text |
fontWeight | string | font-thin | Font weight of the text |
defaultColor | string | #e4e4e7 | Default color of the text |
hoverColor | string | #fff | Color on hover |
defaultScale | number | 1 | Default vertical scale |
hoverScale | number | 1.5 | Vertical scale on hover |
springStiffness | number | 200 | Spring animation stiffness |
springDamping | number | 10 | Spring animation damping |
springMass | number | 0.5 | Spring animation mass |
hoverShadow | string | 0 0 20px rgba(255,255,255,0.5) | Text shadow on hover |
className | string | Additional CSS classes |
Related Components
When to Use
Excellent for playful brand identities, toy/game websites, and modern Next.js landing pages. Use this React component for headers that need a tactile, 'squishy' feel as the user moves their cursor over individual characters.
Best Practices
Follow React best practices by pairing the elastic stretch with a subtle color shift. Maintain scalable component architecture by using the `springStiffness` and `springDamping` to create a natural, bouncy physics. Optimize for performance by using clean transforms for the character scaling.
Why This Component Matters in Modern UI Development
Elastic physics add a delightful sense of responsiveness and physical presence to digital text. This customizable UI component gives you a production-ready implementation of complex spring-based motion, adding semantic authority and personality to your real-world application architecture.
Frequently Asked Questions
QCan I adjust the 'bounciness'?
Yes, the `springStiffness` and `springDamping` props allow you to fine-tune the physics, from a stiff snap to a loose, jelly-like wobble.
QIs the vertical stretch too extreme for reading?
The `hoverScale` prop lets you control exactly how much each character stretches, allowing you to keep it subtle for professional designs.
QDoes it work with multi-line text?
While optimized for single lines, it can be used for multiple lines by wrapping each word or line in an Elastic Hovers instance.