Getting Started
Templates
Components
Special Animations
Text Animations
Backgrounds
import { FadeText } from "@/components/eldoraui/fade-text"<FadeText text="Welcome to the future" direction="in" />{
/* Fade in word by word */
}
;<FadeText text="Welcome to the future" direction="in" />
{
/* Fade up from below */
}
;<FadeText text="Rising to new heights" direction="up" />
{
/* Fade down from above */
}
;<FadeText text="Gracefully descending" direction="down" /><FadeText
text="Custom timing animation"
direction="up"
staggerDelay={0.3}
wordDelay={0.2}
/>| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "" | The text content to animate |
className | string | "" | Additional CSS classes |
direction | "in" | "up" | "down" | "in" | Animation direction |
staggerDelay | number | 0.15 | Delay between staggered animations (up/down) |
wordDelay | number | 0.1 | Delay between word animations (in direction) |
"in": Animates each word individually with a fade-in effect"up": Animates the entire text sliding up from below with a spring transition"down": Animates the entire text sliding down from above with a spring transition