ScrollReveal
scroll-revealReveals words progressively as their text block enters and moves through the viewport.
Usage
Basic usage
As the container scrolls across the viewport, the entire paragraph is first slightly rotated back to the straight line, and then parsed from blurry to clear word by word (scroll down in the box to observe).
When you scroll this block the words resolve from blur to focus one by one.
<ScrollReveal className="text-xl font-semibold">
When you scroll this block the words resolve from blur to focus one by one.
</ScrollReveal>No blur · Large rotation angle
enableBlur={false} only does transparency and rotation, baseRotation increases the initial rotation angle to enhance depth.
Pure transparency and rotation, suitable for title paragraphs that pursue restrained texture
<ScrollReveal
enableBlur={false}
baseRotation={6}
className="text-xl font-semibold"
>
Pure transparency and rotation, suitable for title paragraphs that pursue restrained texture
</ScrollReveal>Strong contrast analysis
baseOpacity Turn it down to make the rest darker, blurStrength turn it up to make the blur heavier and create stronger entrance contrast.
Scroll this text and each word will be gradually resolved from deep fuzzy to clear.
<ScrollReveal
baseOpacity={0.05}
blurStrength={8}
className="text-xl font-semibold"
>
Scroll this text and each word will be gradually resolved from deep fuzzy to clear.
</ScrollReveal>When to use
Use ScrollReveal to resolve a long passage from dim and blurred to clear, word by word as the page scrolls. Use SplitText for a one-time staggered entrance not tied to scroll progress, BlurText for a one-time blur reveal, or Prose for static paragraphs.
Import
import { ScrollReveal } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| baseOpacity | number | 0.12 | Opacity of unrevealed words from 0–1; lower values create stronger contrast. |
| baseRotation | number | 3 | Initial paragraph rotation in degrees, returning to 0 with progress; set to 0 to disable. |
| enableBlur | boolean | true | Blurs unrevealed words and clears them with progress. |
| blurStrength | number | 4 | When enableBlur is true, the starting blur radius (px) of the word will decrease to 0 as the progress progresses. |
The remaining <p> native attributes are transparently transmitted; onDrag/onDragStart/onDragEnd/onAnimationStart is eliminated due to conflict with the motion signature.
Slots
| Slot | Type | Description |
|---|---|---|
| children * | string | Entire text to be rendered word by word as scrolling, string only (words broken internally by whitespace and delimiters preserved) |
Example
<ScrollReveal className="text-xl font-semibold">
When you scroll this block the words resolve from blur to focus one by one.
</ScrollReveal>
<ScrollReveal enableBlur={false} baseRotation={6} className="text-xl font-semibold">
Opacity and rotation alone create a restrained heading treatment.
</ScrollReveal>Usage guidelines
- The effect depends on scroll progress. Leave scrollable space above and below the component to see the full word sequence; in a non-scrolling container it remains at rest.
childrenaccepts plain strings only, not JSX.- Under
prefers-reduced-motion, all text renders fully opaque and unblurred.
Related
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
Scroll this text and each word will gradually resolve from blur to clear focus.
<ScrollReveal baseOpacity={0.12} baseRotation={3} enableBlur={true} blurStrength={4}>
Scroll to develop paragraphs word by word
</ScrollReveal>