Accordion Text
Characters expand vertically on hover with rotation and scale effects.
Main Features of Accordion Text
How to Use Accordion Text in Next.js
Installation Guide for Accordion Text
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | EXPANSION | Text to display |
backgroundColor | string | bg-zinc-950 | Background color of the component |
textColor | string | text-zinc-300 | Color of the text |
hoverColor | string | #fff | Color on hover |
textSize | string | text-8xl md:text-9xl | Size of the text |
containerHeight | string | h-[120px] | Height of the container |
scaleY | number | 1.2 | Vertical scale on hover |
margin | string | 0 10px | Margin on hover |
rotation | number | 5 | Rotation angle in degrees |
springStiffness | number | 300 | Spring animation stiffness |
springDamping | number | 15 | Spring animation damping |
className | string | Additional CSS classes |
Related Components
When to Use
Ideal for creative studios, tech portfolios, and high-energy SaaS landing pages. This customizable UI component is great for adding a playful, elastic interaction to your main navigation or section titles.
Best Practices
Maintain consistent spacing within your design system by ensuring the `containerHeight` accounts for the character expansion. Follow React best practices by using high-contrast colors for the `hoverColor`. Optimize for performance in large-scale applications by keeping the `springStiffness` at a natural level.
Why This Component Matters in Modern UI Development
Elastic and accordion-like animations add a sense of personality to an interface. This animated UI component helps you build a more memorable brand experience by adding subtle micro-interactions to your real-world application architecture.
Frequently Asked Questions
QCan the characters expand downwards?
The current implementation scales from the center, but the `transform-origin` can be adjusted to scale from the top or bottom.
QHow do I change the rotation intensity?
The `rotation` prop allows you to define how much each character tilts when fanning out for the accordion effect.
QIs it responsive?
Yes, it uses flexible character spacing and supports responsive Tailwind text size classes.