Text Reveal
A text animation component that reveals words or letters with blur, offset, and staggered motion effects.
Examples
Title Reveal
Title animation revealing each letter with blur and vertical motion.
Hello Berlix UI!
Hello Berlix UI!
Text Reveal with Custom Props
Reveals each word with custom blur, timing, and reveal direction.
Iamthedanger.Iamtheonewhoknocks.
I am the danger. I am the one who knocks.
Installation
npx shadcn@latest add "https://ui.rechesoares.com/registry/text-reveal.json"
Component Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| children | string | - | Yes | Text to be revealed |
| className | string | - | No | Optional class names for styling the text. |
| blur | number | 10 | No | Initial blur amount in pixels before the animation starts |
| delay | number | 0.1 | No | Delay in seconds between revealing each word or letter |
| duration | number | 1 | No | Animation duration in seconds for each word or letter |
| from | 'top' | 'bottom' | 'bottom' | No | Animation Direction from which each word or letter enters |
| split | 'word' | 'letter' | 'word' | No | Whether to animate the text by words or individual letters |