TextReveal
Word-by-word reveal animation on scroll.
When to Use
- Create engaging hero headings or testimonial quotes that animate as the user scrolls into view.
- Draw attention to a key value proposition in a long-form landing page.
- Control the reveal pace with
Stagger(ms between words) andThreshold(scroll visibility fraction).
Build beautiful Blazor UIs faster than ever before.
Every word fades in at lightning speed with Stagger set to 40ms.
Each word takes its time revealing the message one by one.
The Blazor component library designed for modern applications.
API Reference
TextReveal
| Property | Type | Default | Description |
|---|---|---|---|
| Text | string | "" | The text to animate. Split on whitespace into individual word spans. |
| Stagger | int | 80 | Delay in milliseconds between each word's reveal animation. |
| Threshold | double | 0.3 | Intersection Observer threshold (0.0–1.0). The animation starts when this fraction of the element is visible in the viewport. |
| Class | string? | null | Additional CSS classes for font size, weight, or color of the text container. |
Related Components
- BlurFade — Blur and fade-in animation triggered on mount or scroll.
- NumberTicker — Animated count-up from zero to a target number.
- Marquee — Infinitely scrolling horizontal band of children.