WebGL border experiment 04

Typewriter letter drift

The border that types itself around every card on the Learn index, pulled out on its own. Letters from a typewriter face are rasterized once into a texture atlas, then scattered as quads around the card’s perimeter — swaying along the edge, bobbing on a virtual z-axis (near = dark, sharp ink; far = sepia haze), and now and then morphing into a new letter with a faint offset double-strike ghost, like an old Underwood hitting the ribbon twice.

Specimen

A filing card, re-typed nightly

The border knows nothing about what it wraps — only this card’s rectangle and how far past each edge the canvas may reach.

Two draw passes share the canvas: a faint sepia aura hugging the card’s edge (a rounded-box signed-distance field, mottled by value noise), then one quad per letter, every position, wobble, size, rock and re-strike derived in the vertex shader from a single per-glyph seed. Nothing is stored between frames; the whole drift is a pure function of time.

Two passes · one 64-glyph atlas · no state

This demo requires WebGL.