Theme 018 · Typography & graphic systems

Typographic Window Reveal

Giant numerals and words fill the square edge to edge and work as windows: the product UI plays inside the letterforms while the counters stay dark. Every scene change is a dive through a glyph; the facts live in small mono captions around the type.

readability ●●●trust ●●○effort low

DASHBOARDS OPEN RIGHT NOW · 3 CHECKED

How many did you check today?

1 · HOOK0:00–0:08

The "38" mask scales down 1.4 → 1 from the frame edges while the tile mosaic drifts up at 0.3× inside it. Tiles keep flickering to new charts on each 8th note; the question lands under the glyph on beat 1 of bar 3.

Acme

AN AI AGENT THAT WATCHES YOUR METRICS · EVERY MINUTE

2 · REVEAL0:08 (drop)

We dive through the counter of the "0" from the hook (mask scale 1 → 40, power4.in) and land on the drop inside "Pulse". The white pulse line inside the letters sweeps left → right in one beat; "Acme" and the mark clip-wipe in on the next snare.

● CHECKOUT CONVERSION · SINCE 09:42

AFTER DEPLOY #2231 · P95 212 MS · ERROR RATE 0.4 %

Pulse caught it. Your call.

Roll back

Acknowledge

RESOLVED IN 6 MIN · 13 OTHER METRICS NORMAL

3 · PROOF MOMENT0:12–0:32

The chart scrolls right → left inside "−18%" at 0.3× parallax until the drop reaches the "8". On the downbeat the line turns coral inside the glyphs and the coral echo outline snaps behind them; captions type in, then the Roll back button lands on the next bar.

CUSTOMERS WHO NOTICED

Caught before customers noticed.

Acme Pulse

Start free

4 · CTA0:36–0:45

We pull back out of the product until it sits inside a giant "0" (scale 8 → 1, expo.out). The headline clip-wipes in on the right one line per beat; the lockup and "Start free" land together on the final hit.

COMPONENT KIT

Mask glyph — Manrope 800 at 340–900 px used as an SVG clipPath; the letterform is the window.
Inner scene — live product UI (dashboard tiles, the metric chart) playing inside the glyph.
Counter portal — the hole of a "0", "8" or "%" used as the tunnel for scene-to-scene dives.
Stroke echo — a 3 px outline of the same glyph offset behind it, teal normally and coral for the anomaly.
Corner caption — small mono lines carrying every fact the glyph can't (metric name, time, deploy).
Numeral lockup — the ending "0" (customers who noticed) holding the product, beside the tagline and CTA.

MOTION · MUSIC

Zoom-through — mask scale 1 → 40 into a counter (power4.in, 700 ms), cutting on the drop or a downbeat at 120 BPM.
Parallax interior — the inner scene drifts at 0.3× the opposite way to the glyph, linear, so type and content never feel glued.
Glyph swap — one numeral clip-wipes to the next (1 → 0, 38 → 0) in 250 ms on the downbeat.

WHY / RISK · ADAPT IT

The number is the message and the product is literally inside it, so the frame reads at a glance and still shows real UI. It is cheap to build with a single clip mask per scene. Risk: content inside the letters is not readable as UI, so every fact must also appear in a caption.

Adapt to your product: pick the three numbers that tell your story (a pain count, your key metric, a zero) and put screen recordings or UI mock-ups inside them; keep the captions for the actual data.

References: Codrops — stagger reveal animations for text