Animated Text cycles through eight preset reveal styles on a single React component: blink, rise, expand, glide, cascade, flicker, elastic, and float. Each variant uses Framer Motion under the hood with controls for delay, duration, and stagger. Drop it into a hero heading, page title, or price callout where you want typography to carry the entrance.
Installation
Usage
import { AnimateText } from "@/components/ui/animated-text";<AnimateText
text="Modern UI Components"
type="cascade"
className="text-2xl font-bold"
delay={0}
duration={0.5}
custom={1}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | Required | The text content to be animated. |
type | "blink" | "rise" | "expand" | "glide" | "cascade" | "flicker" | "elastic" | "float" | "elastic" | Animation style to apply to the text. |
className | string | "" | Additional CSS classes to apply to the component. |
delay | number | undefined | Delay before animation starts. |
duration | number | undefined | Duration of the animation. |
custom | number | 1 | Custom parameter passed to animation variants (used for stagger/delay scaling). |