Behind
the Scene
GRAF is a fictional brutalist type foundry. The whole site is one HTML file, zero images — the typography is the imagery. Here's the anatomy.
01 — Variable fonts are the engine
The site uses Archivo, a Google variable font with two axes: width (62–125) and weight (100–900). Everything expressive on the page is a manipulation of those two numbers:
- Hero letters — each letter of GRAF/TYPE is wrapped in a span; on hover, its
font-variation-settings transitions from condensed-black to expanded-thin. Because the axis interpolates, the letter physically morphs.
- Live specimen — pointer X maps to the width axis, pointer Y to the weight axis, smoothed with a 0.09 lerp in requestAnimationFrame. The visitor *is* the type designer.
- Weight ladder — five rows, each pinned to a different point on both axes, so the ladder reads as one typeface stretching through its own design space.
spec.style.fontVariationSettings =
`'wdth' ${x}, 'wght' ${y}`; // the entire trick
02 — Brutalist system rules
- Exactly three colors: off-black, bone white, and two alarm accents (red #FF2E00, acid #D9FF00) used only at full strength.
- Every border on the page is 2px solid. No radius anywhere. No shadows anywhere.
- Cursor is
crosshair site-wide — a small cue that the page is a drafting table, not a brochure.
- Hover states are hard swaps (no fade) or violent skews — brutalism doesn't ease in and out politely.
03 — The moving parts
- Double marquee — two full-bleed strips scrolling in opposite directions; pure CSS animation on a duplicated span (translateX −50% loop).
- Header ticker — an old-school JS string rotation every 140ms, deliberately steppy like a split-flap board.
- Poster wall — six aspect-ratio boxes, each a one-idea type study: a rotated AA, a blinking condensed stack, a spinning Ø, a split-color CUT THE KERN, a scaleY-stretched Rr, and a JSON joke set in mono.
04 — Reproduce it
Load one variable font with two axes. Pick two alarm colors. Set a single border width as law. Then let JavaScript map input (pointer, scroll, time) onto font-variation-settings — motion through the type itself always beats motion around it.