Reveal Text Scroll

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.

Features:

• 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.

Effects:

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