Bring your typography to life with a smooth, scroll-triggered text reveal. This component uses a dynamic gradient mask to gradually fade text in or out as the user scrolls, creating a polished, cinematic reading experience.
Directional presets — choose from Bottom → Top, Top → Bottom, Left → Right, or Right → Left reveals.
Customizable fade edges — control how soft or sharp the reveal transition looks.
Scroll-synced animation — perfectly timed with the user’s scrolling position.
Responsive by default — fits your text height automatically, no manual sizing required.
Easy styling — adjust font, size, color, tracking, and alignment right in the panel.
Blur - Adds a simple, cinematic blur on the text. The blur starts at your chosen intensity and smoothly fades to zero as the scroll reveal completes.
Color Morph - Interpolates the text color between two values across a configurable progress window.
Scramble → True - Characters randomize while hidden and resolve to the real text as the reveal advances.
Typewriter - Quantizes progress to per-character steps and optionally shows a blinking caret.
Kerning Tighten - Animates letter-spacing from a looser starting value down to the final kerning.
Chromatic Aberration - Subtle RGB ghost layers shift toward the edges and converge to the main text by the end of the reveal.
Perfect for hero sections, storytelling layouts, and landing pages where you want text to feel interactive and engaging.
Updates:
26.08.2025 - Added toggle "Repeat on Scroll"
6.10.2025 - Added diagonal directions
14.10.2025 - Added Offset From
23.10.2025 - Added Effects
Sabo Sugi
