Text Animations
Scroll Reveal Text
v1.0.0
A smooth scroll-based text animation component.
Preview
Description
ScrollRevealText is a smooth scroll-based text animation component. It progressively reveals text as the user scrolls, with support for three animation modes: entire paragraph fade-in, word-by-word reveal, and character-by-character reveal.
The component uses scroll progress tracking to animate opacity dynamically, creating an immersive reading experience ideal for landing pages, hero sections, storytelling interfaces, portfolios, and modern UI designs.
Installation
npx dcntui add scroll-reveal-textProps Table
| Prop | Type | Default | Description |
|---|---|---|---|
| content* | string | — | Text content to animate |
| variant | paragraph | word | character | character | Controls how the text reveal animation behaves |
* Required prop