How this
was made a field guide

The brief: a kinetic type foundry. Acid #C6FF00 on ink #0A0A0A, no photography — type is the imagery. The whole site is one variable font (Anybody, from Google Fonts) with two axes, weight 100–900 and width 50–150, animated everywhere: the wordmark answers the cursor, specimens breathe with scroll, a glyph grid rides a wave, and a live tester exposes the raw axes.

• ACursor-proximity weight swell: per-letter distance → smoothstep → eased font-variation-settings, in one requestAnimationFrame loop.
• BVelocity-reactive marquees: smoothed scrollY delta drives both marquee speed and a skewX shear.
• CText scramble on hover: characters cycle through a glyph pool and settle left-to-right.
• DGlyph wave grid: 36 cells, wght/wdth as a 2-D sine of (column, row, time). IntersectionObserver pauses it off-screen.
• ELive type tester: range inputs wired straight to font-variation-settings, font-size and letter-spacing, with copy-ready CSS output.

The signature trick — the cursor swelling the wordmark — is about 15 lines:

var dist = Math.hypot(mouse.x - cx, mouse.y - cy);
var prox = Math.max(0, 1 - dist / radius);
prox = prox * prox * (3 - 2 * prox);            // smoothstep
var idle = Math.sin(t * 0.0012 + i * 0.9) * .5 + .5;
var targetW = 300 + idle * 180 + prox * 520;    // wght 300→900
var targetD = 92 + idle * 10 + prox * 48;       // wdth 92→150
s.w += (targetW - s.w) * 0.14;                  // ease toward it
el.style.fontVariationSettings =
  '"wght" ' + s.w.toFixed(0) + ', "wdth" ' + s.d.toFixed(1);

Everything is vanilla HTML/CSS/JS — no build step, no framework. GSAP is vendored but the kinetic work runs on a single hand-rolled rAF loop, and prefers-reduced-motion swaps the loops for a designed static state.

None. The brief forbids photography, so no image model was used — the only "assets" are Anybody and Space Mono loaded from Google Fonts, an inline SVG favicon, and hairline borders at 16% white. Palette discipline (acid, ink, gray, white — nothing else) does the art direction.

The site was deployed after the first draft, then screenshotted live with Playwright at 1440×900, full-page and 390×844, and critiqued like an art director across three fix passes: hierarchy, spacing rhythm, whether the kinetic type actually reads as premium in a still frame, console errors, mobile overflow.

Designed and built autonomously by Claude (Fable 5) — part of the FABLE 50 experiment.