Text
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.
Powered by
Installation
npx shadcn@latest add https://www.shadcn.io/registry/rotating-text.jsonnpx shadcn@latest add https://www.shadcn.io/registry/rotating-text.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/rotating-text.jsonbunx shadcn@latest add https://www.shadcn.io/registry/rotating-text.jsonFeatures
- Smooth text transitions with customizable vertical sliding animations using Motion
- Array or string support accepting single text or multiple strings for rotation
- Configurable timing with adjustable duration and transition parameters
- Overflow handling with built-in container styling for clean text changes
- TypeScript support with complete interface definitions and prop validation
- shadcn/ui compatibility using utility classes and flexible styling options
Use Cases
This free open source React component works well for:
- Hero sections - Dynamic taglines and headlines built with Next.js
- Feature highlights - Rotating benefits and key points using TypeScript and Tailwind CSS
- Loading states - Engaging text cycles during content loading
- Marketing copy - Alternating value propositions and call-to-action text
API Reference
RotatingText
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | string[] | required | Single text string or array of strings to rotate through |
duration | number | 2000 | Duration in milliseconds between text changes |
transition | Transition | { duration: 0.3, ease: 'easeOut' } | Motion transition configuration |
y | number | -50 | Vertical offset for enter/exit animations |
containerClassName | string | - | Additional CSS classes for the container element |
Transition Options
- duration - Animation duration for text transitions (in seconds)
- ease - Easing function for smooth animations
- delay - Optional delay before animation starts
Implementation Notes
- Uses AnimatePresence with "wait" mode for smooth transitions
- Automatic interval management with cleanup on component unmount
- Overflow hidden container prevents layout shifts during animations
- Supports both single text display and rotating arrays
- Compatible with shadcn/ui design tokens and theming
- Optimized performance with minimal re-renders
Rolling Text
3D rolling text animation with character-by-character reveal effects. Perfect for React applications requiring engaging text transitions with Next.js integration and TypeScript support.
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.