❉Recipe

Typewriter Reveal

HyperFrames snippet

Reveal text character-by-character via an animated clip-path with steps() timing — pure CSS/GSAP, GPU-composited, no per-char DOM. The announcement-card text-in effect.

3 units use it

What it is

## What it is A monospace typewriter reveal that wipes the text in left-to-right using `clip-path: inset(...)` animated with a `steps(N)` ease, where N = the character count. Because it animates one property with a stepped ease, it looks like discrete keystrokes without splitting the text into per-character spans, and it stays seek-deterministic in HyperFrames (validated in the Vercel-Ship-style composition, MEMORY: project_ship_style_template). ## When to use it - Announcement / ship-note / terminal cards where each line should type in. - Any place a per-char SplitText reveal would be overkill and you want a single cheap animated property. ## Knobs - `steps(N)` where N = number of characters in the line (each step = one glyph). - `duration` = total type time (≈ N * 0.04s reads as fast typing). - A trailing caret is an optional `::after` block that blinks.

How to use it standalone

HyperFrames snippet

/* CSS: monospace line clipped from the right, revealed left-to-right. */
.tw { font-family: 'Courier New', monospace; white-space: nowrap; overflow: hidden; clip-path: inset(0 100% 0 0); }

// GSAP: step the clip from fully-hidden to fully-shown over N characters.
// chars = line.textContent.length
const chars = el.textContent.length;
tl.to(el, { clipPath: "inset(0 0% 0 0)", duration: chars * 0.04, ease: `steps(${chars})` }, startSec);