Char Reveal
Characters blur-in with stagger tied to ScrollTrigger scroll position.
Component Showcase
Char Reveal
Characters blur-in with stagger tied to ScrollTrigger scroll position.
GSAPScrollTrigger
Interactive Playground
Adjust sliders and values to preview changes in real-time
text
The text content to animate character-by-character.
stagger
Delay interval between starting animation for successive letters.
duration
Duration of single letter fade, translate, and un-blur transition.
blur
Initial pixel radius of the CSS blur filter on letters.
API Reference (Props)
Component properties and type specifications
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Every great UI starts as a seed." | The text content to animate character-by-character. |
| stagger | number | 0.045 | Delay interval between starting animation for successive letters. |
| duration | number | 0.65 | Duration of single letter fade, translate, and un-blur transition. |
| blur | number | 6 | Initial pixel radius of the CSS blur filter on letters. |