Colophon · showcase
How Cadence reads you back
Cadence is one idea taken all the way: the tempo you read at becomes visible in the type itself.
One variable typeface, every role
The whole site is set in a single variable font (Recursive), self-hosted with its full axis set: weight, slant, casual and a monospace axis. Labels are the same font with the mono axis on; the manifesto is the same font with the weight and slant axes moving live. No second family, no images.
Scroll velocity drives the axes
A small requestAnimationFrame loop samples how fast you are scrolling, smooths it, and writes three CSS custom properties (--wght, --slnt, --casl). Read slowly and the letters sit heavy and upright; race the page and they thin, lean and turn casual. Setting custom properties through the CSSOM keeps it clean under a strict hash-based Content-Security-Policy.
The hero word is a shader
The word "SLOWER" is drawn to an offscreen canvas and uploaded to a WebGL2 fragment shader that displaces it and splits it into red and blue fringes in proportion to your scroll speed. Fast scrolling literally smears the word that asks you to slow down. The real, crisp <h1> stays in the page underneath as the accessible fallback, shown whenever WebGL is unavailable or motion is reduced.
Accessible and light
Contrast is AAA (warm bone on deep ink). With prefers-reduced-motion the axes pin to a settled upright weight and the shader is skipped, so the page is fully readable and still. The three tenets rise in with native CSS scroll-driven animation, no scroll library.
Tools
- Astro + Tailwind, deployed on Cloudflare Pages.
- Recursive variable font (self-hosted, full axes).
- Hand-written WebGL2 GLSL for the word; a rAF velocity engine for the axes.