Animated Text

A modern React component that animates the appearance of each word for dynamic, attractive text transitions. Perfect for headlines, hero sections, or anywhere dynamic, eye-catching text is needed.
Inspired by popular animated heading techniques found in top-tier UIs.

Live Preview

Installation

You can install the AnimatedText component with the following CLI command, or copy the implementation manually:

typescript-icon
1npx shadcn@latest add http://localhost:3000/r/animated-text.json

Import

To use the AnimatedText component, import it in your code:

typescript-icon
1import AnimatedText from '@/components/AnimatedText';

Props

The AnimatedText component accepts the following props:

PropTypeDefaultDescriptionRequired
childrenstring-The text to animate, one word at a time.Yes
classNamestring-Utility classes for controlling text style/size/weight.No
typescript-icon
1type AnimatedTextProps = {
2  children: string;
3  className?: string;
4};

Example usage

Basic usage

typescript-icon
1<AnimatedText>This is an animated text.</AnimatedText>

With custom font size and color

typescript-icon
1<AnimatedText className="text-3xl text-blue-700">Big & Blue</AnimatedText>

Uppercase with spacing

typescript-icon
1<AnimatedText className="uppercase tracking-widest">Fancy Style Reveal</AnimatedText>

Features

  • Staggered animation: Words appear in sequence for a modern animation effect
  • Customizable: Style with any className, including font size, color, and more
  • Type-safe: TypeScript definitions for strict props
  • Easy integration: Plug-and-play for Next.js, React, or any modern React stack

Customization

  • Animation speed: Adjust the delay interval or duration in the motion.span logic
  • Text style: Pass className for custom size, color, weight, etc.
  • Layout: By default text is wrapped and centered; change container flex classes for layout variants
  • Advanced: Swap the animation for your own framer-motion or motion library variants

Troubleshooting

  • Ensure the children prop is a string (not JSX/element), or the effect will not render as intended.
  • If animation does not appear, check that the motion library you use is properly installed and imported.
  • For custom fonts or styles, ensure your Tailwind or global CSS config is loaded.