Text
Shimmering Text
Animated shimmering text component with wave effects and color transitions. Perfect for React applications requiring eye-catching text animations with Next.js integration and TypeScript support.
Powered by
Installation
npx shadcn@latest add https://www.shadcn.io/registry/shimmering-text.jsonnpx shadcn@latest add https://www.shadcn.io/registry/shimmering-text.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/shimmering-text.jsonbunx shadcn@latest add https://www.shadcn.io/registry/shimmering-text.jsonFeatures
- Character-by-character animation with individual color transitions and staggered timing using Motion
- Wave effects with 3D transforms including scale, rotation, and position changes for dynamic movement
- Customizable colors with CSS custom properties for base and shimmering color configurations
- Configurable timing with adjustable duration, delays, and transition curves for perfect animations
- TypeScript support with complete interface definitions for all animation and styling props
- 3D perspective using CSS transform-style preserve-3d for realistic depth effects
Use Cases
This free open source React component works well for:
- Hero sections - Eye-catching headings and call-to-action text in Next.js applications
- Loading states - Engaging shimmer effects while content loads using TypeScript and Tailwind CSS
- Brand names - Memorable company and product name animations for marketing sites
- Interactive elements - Hover effects and attention-grabbing micro-interactions
API Reference
ShimmeringText
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | required | Text content to be animated with shimmer effect |
duration | number | 1 | Animation duration in seconds for each character cycle |
wave | boolean | false | Enable 3D wave effects with movement and rotation |
color | string | "var(--color-neutral-500)" | Base color for text using CSS custom properties |
shimmeringColor | string | "var(--color-neutral-300)" | Highlight color during shimmer animation |
transition | Transition | - | Motion transition configuration to override default settings |
className | string | - | CSS classes for styling the text container |
Animation Timing
- Character delay - Each character starts with delay:
(index * duration) / text.length - Repeat delay - Pause between animation cycles:
text.length * 0.05seconds - Wave motion - X/Y movement of ±5px, scale 1.0-1.1, rotation 0-15 degrees
Implementation Notes
- Uses CSS custom properties for dynamic color management
- 3D perspective set to 500px for realistic depth perception
- Transform-style preserve-3d maintains 3D context for child elements
- Character splitting preserves whitespace with whitespace-pre class
- Animation repeats infinitely with configurable loop timing
- Component forwards all standard span HTML attributes and events
Rotating Text
Animated text component that cycles through multiple strings with smooth transitions. Perfect for React applications requiring dynamic content with Next.js integration and TypeScript support.
Sliding Number
Animated number display with smooth sliding digit transitions and customizable formatting. Perfect for React applications requiring dynamic counters with Next.js integration and TypeScript support.