THE GUIDE
PROOF Nº 04/15, ANNOTATED — WHAT FAULTLINE TYPE IS, HOW THE GROUND MOVES, AND WHY NOTHING HERE THRASHES YOUR LAYOUT. DESIGNED & BUILT AUTONOMOUSLY BY CLAUDE FABLE 5 (ANTHROPIC).
00 — CONCEPT & DIRECTION
Faultline Type is a fictional experimental type foundry where the specimen IS the interface. The premise: type engineered for unstable ground. Every moving letter on the site is driven by one seismic metaphor, carried all the way through the copy — licenses are priced "per family, per fault," the masthead literally shears like a strike-slip fault as you scroll, and your cursor is recorded by a live seismograph.
Art direction is brutalist print-shop: bone paper, hard ink rules, one violent red. Motion grammar is the ANTI-luxury position — no easing curves that flatter, only hard cuts and steps() snaps, 0.15–0.3s. The site's single typographic voice is Anybody, a variable font with honest width (50–150) and weight (100–900) axes; Space Mono does all the labeling like a lab instrument.
Per the brief, this site ships ZERO generated imagery. No photography, no illustration, no 3D. The design proves its range with typography alone.
01 — PALETTE & TYPE
BONE — #EDE8DF — THE PAPER
INK — #111111 — THE PRESS
SIGNAL RED — #FF2B06 — THE ALARM
ANYBODY — WDTH 50 · WGHT 900 (COMPRESSION)
EMERGENCY BROADCAST
ANYBODY — WDTH 100 · WGHT 500 (DORMANT)
Resting state, deceptive
ANYBODY — WDTH 150 · WGHT 100 (TENSION)
stretched to fail
SPACE MONO — 400/700 — INSTRUMENT LABELS
GROUND MOTION — LIVE RECORD · M 7.4 — 16:32:07
Anybody is by Tyler Finck (Etcetera Type Company); Space Mono by Colophon Foundry. Both self-hosted as variable/static woff2 — six files, ~161 KB total. Anybody carries no slant axis, so the specimen player's TILT fader is a synthetic shear (skewX) and is labeled as such in the UI. Honesty is part of the brutalism.
02 — SIGNATURE TECHNIQUE
THE PROBLEM
Animating font-variation-settings per letter is usually a performance crime: width changes alter every advance width, so each frame reflows the whole paragraph — and reading letter positions on pointermove forces synchronous layout. Typical result: 20fps and a seasick page.
THE ENGINE
Every animated block is a "seismic field." Each letter sits in a fixed-width inline cell (contain: layout), so a quaking glyph reflows nothing outside its own cell. Cell widths are measured off-DOM: a Canvas2D context resolves its font against the canvas element's computed style, which means setting canvas.style.fontVariationSettings lets us measure any point on the wdth/wght axes without ever touching document layout. Letter positions are read once per layout pass and cached in page coordinates; the pointer never triggers a DOM read.
No tweens are created on pointermove either. The cursor only injects ENERGY into nearby glyphs; each glyph's oscillation is a pure function of (time, seed, energy), and energy decays exponentially — so letters near the mouse quake harder and everything settles by itself. The SEISMIC button spawns an expanding ring: glyphs are excited as the wavefront passes their cached position, which produces true propagation for the price of one distance check.
// measure off-DOM — canvas resolves font against the element's style
canvas.style.fontVariationSettings = `'wdth' ${w1}, 'wght' ${w2}`
ctx.font = `${w2} 100px Anybody`
cellWidth = (ctx.measureText(ch).width / 100) * fontSize
// pointer injects energy — no tweens, no layout reads
const fall = 1 - d / prox
g.e = Math.min(maxE, g.e + speed * fall * fall * 0.55)
// ring events: excited when the wavefront passes the cached position
const r = (t - ev.t0) * ev.speed
const off = Math.abs(d - r)
if (off < ev.band) g.e += ev.mag * (1 - off / ev.band) * 0.35
// oscillation = f(time, seed, energy); write only when it changed
wdth = base.wdth + Math.sin(t * (8 + s % 5) + s) * e * 9
wght = base.wght + Math.sin(t * (11 + s % 7) + s * 2) * e * 70
g.el.style.fontVariationSettings = `'wdth' ${wdth}, 'wght' ${wght}`
g.e *= 0.93 // the ground settlesDiscipline: one shared gsap.ticker for all fields; style writes are skipped unless the rounded value changed; idle glyphs cost zero writes and inherit the container's base axes; fields off-screen are skipped via IntersectionObserver; transforms (translate/rotate/skew) carry the cheap part of the motion. Under prefers-reduced-motion the loop never starts — faders and presets still work as hard cuts.
SPHINX
LIVE — SAME ENGINE AS THE SPECIMEN. MOVE YOUR CURSOR THROUGH IT.
03 — ASSET PIPELINE
This is the only site of the fifteen with a forbidden-images clause, so the pipeline is refreshingly short:
- Fonts — Google Fonts CSS API → self-hosted woff2 via the repo's getfont tool. Anybody requested with its full axis space (ital, wdth 50–150, wght 100–900).
- Grain — inline SVG feTurbulence data-URI, multiplied at 5.5% opacity. No image file.
- Favicon — hand-drawn SVG: an F sheared across a red fault line.
- OG image — a 1200×630 crop of the site's own masthead, exported from the QA harness screenshot with sharp. The specimen renders itself.
- AI images — none. Zero credits spent.
04 — ITERATION DIARY
PASS 1 — STRUCTURE
First full render at 375/768/1440 surfaced a 210px hidden overflow on mobile with two culprits: a footnote written as one non-breaking-space chain, and the manifesto lede's giant glyph run overflowing its block invisibly — element rects looked fine while the document scrollWidth lied. Also caught: a mis-cased &nbsP; entity rendering literally, the crosshair readout parked at "X -10000" before any pointer existed, and the guide's own type specimens being crushed to body size by a specificity fight. All fixed; report came back clean.
PASS 2 — CRAFT
Scripted a real-input Playwright pass against the built site: cursor sweeps deform glyphs and settle; the SEISMIC ring visibly reaches near letters before far ones; presets snap with synced faders; reduced-motion serves a fully static, fully functional console; 120fps during a full event with zero console noise. Then the fixes taste demanded: family descriptions moved beside their previews (the right half of every row was dead space), marquees quadrupled so the loop can't gap on wide screens, sticky bars now measure the topbar instead of guessing, and SEISMIC gained a keyboard shortcut — S, labeled on the button.
PASS 3 — THE HOSTILE CRITIC
Ellipsis was amputating "stretched to failure" in this very guide (now it fails on purpose). THE BIG ONE license row learned to quake when your pointer approaches $1,906. Canonical URLs, favicon legibility at 16px, OG re-export from the final masthead, and a last clean run at all three widths on both routes. Remaining honest imperfection: the TILT fader is synthetic shear, not a real slnt axis — Anybody doesn't carry one, and the UI says so.
05 — COLOPHON
Designed & built autonomously by Claude Fable 5 (Anthropic) as site 04 of a fifteen-site showcase. Stack: Vite, GSAP + ScrollTrigger, vanilla JS, two variable-font files, and an unreasonable belief in the em square as a tectonic plate.
THE FIFTEEN — EXHIBITION HUB →
FAULTLINE TYPE — LIVE SITE →
BACK TO THE SPECIMEN →