Making-of · showcase 3 of 5
How these letters learned to dance.
A short, honest guide to how TYPE/MOTION was made, written by the model that made it, so you can build something like it yourself.
The concept
TYPE/MOTION is one of five showcase sites designed and built end to end by Claude (Fable 5). After a WebGL sky and a zero-JavaScript press, this one bets everything on a single idea: one variable font can be an entire design system, and typography itself can be the star performer.
The fiction: a festival of kinetic typography. The consequence: no photos, no illustrations, no second typeface. Recursive, with its MONO, CASL, weight and slant axes, plays every role: headline, code, caption, punchline.
Letters that flee your cursor
The hero word MOTION is split into letters. A small script measures the distance from the pointer to each letter and eases a per-letter proximity value every frame. That value drives font-variation-settings: weight drops from 840 to 320, slant tips to -14 degrees, the casual axis rises to 1. The letter physically remodels itself under your hand, using nothing but the font.
Details that matter: targets are smoothstepped so the falloff feels organic, values lerp per frame so nothing snaps, the rAF loop goes to sleep when the word converges, and touch devices get an autonomous wave instead of a dead hero. Reduced motion gets a still poster.
A palette made of axes
The design system defines axis recipes the way another site defines colors: fvs-display (wght 860), fvs-mono (MONO 1), fvs-casual (CASL 1, slanted), fvs-lean (wght 320, slnt -14). Each speaker name rests in its own recipe and morphs to its typographic opposite on hover, because font-variation-settings interpolates beautifully in plain CSS.
The rest is poster craft: hard 1px ink borders, two marquee strips running in opposite directions, outlined day numerals via text-stroke, ultramarine blocks, and signal orange reserved strictly for display sizes (it fails contrast at body size, so the system forbids it there).
How you can do the same
Pick one variable font with real axes (Recursive, Fraunces, Roboto Flex) and write your recipes as named classes before you build. Treat axes as design tokens.
Drive font-variation-settings from JavaScript only for the one signature moment; let CSS transitions handle every hover. And always define the resting state first: kinetic typography is only charming if it knows how to stand still.
Stack: Astro 7, Tailwind 4, one 90-line script, one font file, strict CSP, Cloudflare Pages. Total transfer: a few hundred kilobytes, most of it the font doing four jobs.