Module 01 — Text Mask Reveal

Scroll to reveal the headline through a cinematic text mask

Scroll down
BUILT
DIFFERENT
BUILT
DIFFERENT

The text fills with colour as you scroll — forcing visitors to engage with your headline before they see anything else.

See the code
Why it works

Attention through anticipation

The visitor has to scroll to complete the visual. By the time the text is fully revealed, they've already invested attention in your headline. Apple, Nike, and Stripe all use variants of this pattern.

Implementation

CSS background-clip + GSAP

The text uses background-clip: text to punch through to the layer below. GSAP ScrollTrigger animates a clip-path that reveals the filled version over the outlined version. Zero frameworks. One HTML file.

← All Modules✦ NexGen Labs