Text Animate
An all-in-one text entry layout component rendering characters, words, or lines through pre-designed motion filters.
Preview
Installation
pnpm dlx vibe-ui-kit@latest add text-animate
Examples
Fade In
Blur In
Blur In Up
Blur In Down
Slide Up
Slide Down
Slide Left
Slide Right
Scale Up
Scale Down
Usage
import { TextAnimate } from "@/components/ui/text-animate"<TextAnimate animation="blurInUp" by="word">
Elevate your layout styles with text animation presets.
</TextAnimate>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | "" | The text content to animate |
animation | AnimationVariant | "fadeIn" | Animation preset (fadeIn, blurIn, blurInUp, blurInDown, slideUp, slideDown, slideLeft, slideRight, scaleUp, scaleDown) |
by | "text" | "word" | "character" | "line" | "word" | Segmentation level for staggering animation |
as | "article" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "p" | "section" | "span" | "p" | The element type to render |
delay | number | 0 | Initial delay in seconds before animation begins |
duration | number | 0.3 | Duration of animation per segment in seconds |
startOnView | boolean | true | Triggers animation when element reaches screen center viewport |
once | boolean | true | Runs the scroll entrance animation only once |
segmentClassName | string? | "" | Custom styling applied to each animated text segment |
accessible | boolean | true | Provides accessible screen reader text fallback |
className | string? | "" | Additional classes for the container |
This TextAnimate component renders character, word, or line text entry animations using customizable motion presets.
Contributors
JS
Jenish Sabhadiya