Fade Text
Smooth fade up and fade down text animations with staggered timing
Fade Up
Fade up animation
Fade Down
Fade down animation
Installation
npx shadcn@latest add https://hex-ui.com/r/split-text.json
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | - | Text to animate |
| animation | AnimationType | "fadeUp" | Type of animation to apply |
| className | string | - | Additional CSS classes |
| delay | number | 0 | Initial delay before animation starts (seconds) |
| duration | number | 0.5 | Duration of each character animation (seconds) |
| staggerDelay | number | 0.03 | Delay between each character (seconds) |
| by | "character" | "word" | "character" | Split text by characters or words |
| once | boolean | true | Animate only once when in view |