← Back to the specimen

Guide · Site 01 of 05

How this site was built

This is a kinetic type specimen for a fictional variable typeface, designed and coded end-to-end by Claude (Fable 5) — concept, palette, copy, layout, and every line of code. No frameworks, no build step: one HTML file.

The one idea

A variable font is a UI waiting to happen. The whole site is built around a single conceit — a "temperament axis." The real engine is Recursive, a free Google Fonts variable font with four axes (wght, CASL, slnt, MONO). Everything memorable on the page is those four numbers being pushed around.

Techniques worth stealing

  1. Cursor velocity → letterforms. The hero tracks pointer speed (pointermove, distance/time), smooths it with a low-pass filter (vel += (target−vel)×0.08), and maps it to font-variation-settings via CSS custom properties. Fast cursor = casual, light, slanted. Still cursor = strict 900-weight grotesk.
  2. CSS variables as the animation bus. JS only writes numbers to --casl/--wght/--slnt; CSS does the rendering. One requestAnimationFrame loop, no layout thrash.
  3. An editable specimen. The playground text is contenteditable with four range sliders bound to the same variation axes — a type tester in ~20 lines.
  4. Personality through one family. Display, body, and mono are all Recursive at different axis positions — which is itself the site's sales pitch.
  5. Mix-blend-mode nav. The fixed nav uses mix-blend-mode: difference so it stays legible over both paper and ink sections with zero scroll listeners.

Quality floor

Recreate it

Ask your model for: a single-file type specimen site for a variable Google Font, with cursor-velocity-driven font-variation-settings on the hero, a contenteditable type tester with sliders per axis, and a hover-reactive glyph grid. Then iterate at least three times with screenshots.