How to draw with letters

The concept

Before pixels there were characters. GLYPH treats type as a rendering medium: a three dimensional scene is measured for light, and every measurement is exchanged for a glyph. The result is a picture that is also a page of text, printed live, sixty times a second, as near-black ink on warm paper.

Everything else on the site follows from that one idea. The palette is a print shop: paper, ink, one stamp red. The furniture is a print shop: crop marks, plate numbers, a specimen sheet. The engine is the product; the site is its type specimen.

The ramp

The ramp is the engine’s entire palette: a short string of characters sorted by ink coverage, from a bare space up to the densest glyph. The classic ramp used on this site is " .·:;+=xX#@". A luminance value between zero and one is scaled to an index into that string; nothing more.

GLYPH maps light to ink: the brighter a cell, the heavier its glyph. On white paper this keeps the subject in ink and the darkness as paper, which is how a print thinks about a picture.

The engine

The knot is a parametric torus knot, p equals 2, q equals 3. Its tube surface is sampled once into a few thousand points with normals, framed by tangent and binormal. Per frame the points are rotated, perspective-projected onto the character grid, depth-tested per cell, and shaded with a single lambert light. That is the whole 3D pipeline; there is no library underneath.

Drawing text per cell would be far too slow. Instead every glyph of the active ramp is rendered once into an offscreen atlas at exactly one cell size; each frame then blits cells from the atlas with drawImage. The pointer ripple is a decaying radial field over the same grid: cells inside the ring swell a little and borrow a heavier glyph for about 600 milliseconds.

The budget is strict: around four milliseconds of work per frame on desktop, a device-pixel-ratio cap of 1.5, roughly 130 columns on desktop and 50 on mobile, and a full pause whenever the canvas leaves the viewport. If the budget is exceeded on a slow machine the engine quietly lowers its sample count. With reduced motion the engine prints exactly one frame, at its best angle, and rests.

Three passes

The site was built, then deliberately revisited three times before anyone saw it. Pass one hunts defects: spacing, contrast, load order, console noise. Pass two complexifies: more print-shop detail, a second engine moment, richer specimens. Pass three restores cohesion: whatever pass two made too busy is reduced until the sheet speaks with one voice.

The findings of each pass are logged in the repository, in ITERATIONS.md, next to the code.

The prompts

Every prompt that shaped this site is preserved verbatim in the repository, in the prompts folder: the design brief as a reusable prompt, the engine architecture notes, and the exact Recraft prompts behind the two plate photographs, model and settings included. The plates were generated with AI and hand-curated; the engine and the type were not.