Back to Dictionary
Scroll & Navigation
●●○Customize
Text Reveal Pipeline
Large typographic paragraphs where the text color or opacity transitions from faded to solid exactly mapped to the user's scroll position.
Live Demo
What It Is
Large typographic paragraphs where the text color or opacity transitions from faded to solid exactly mapped to the user's scroll position.
✓When to Use
- Making a bold, philosophical statement on a landing page
- Pacing the reader through a key value proposition
✕When NOT to Use
- Body paragraphs or functional reading
Configuration Tips
- 01Map scrollYProgress to an array of word indices to turn them solid one by one as the user scrolls
You've Seen It In
LinearChronicleApple
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Make this paragraph of text fade in word-by-word tied to the user's scroll position.
Code Example (Tailwind CSS)
export function TextRevealPipelineDemo() {}