weight axis

A variable font's weight axis as a micro-interaction: "Weight" in Geist at 232 px on warm paper with a soft light and fine grain, "Geist Variable" and a live "wght 100" readout above it, and a 100–900 slider with ticks, a white knob and a dark tooltip below. A 10-second loop plays by itself, driven by a demo cursor. It grabs the knob and drags it to 900: the letters thicken on springs, each a little behind the one before, while the tooltip steps through the nine named weights from Thin to Black and the readout counts up. Then the cursor moves onto the word as a lens: orange dashed guides for cap height, x-height and baseline fade in with a lens line, the tooltip dims to "Lens 160–900", and as the cursor sweeps from W to t only the letter under it turns heavy and lifts slightly, its neighbours falling off smoothly on a bell curve. Back on the slider, the cursor eases the knob down to Regular 400, the letters follow and settle, the cursor leaves, and the stage fades out and back in to start again. Weight goes out as font-variation-settings, every letter on its own spring and measured from the real layout each frame, so the centred word breathes as it changes. HTML, CSS and inline SVG, no libraries; the word, the font, the timing and the colours are a few constants. The square stage scales to fit any window and its paper runs on past it; reduced motion shows the lens frame still.