Typography / text · 4.5

Variable-font axis animation

Type breathing, or flexing.

Type morphing continuously along a font axis: thin to black, condensed to extended.

JavaScript is off, so the controls are hidden and the stage below shows a static field instead of the running effect. Every word on this page is still here. Nothing is hidden behind the script.

4 knobs

How it actually works

The rare one. Every other text effect in this category buys its motion by fragmenting the text into spans and handing the screen reader a mess. This one animates the font itself. The text stays real, unsplit, and completely untouched in the accessibility tree. It is the only text effect here with that property.

CSS font-variation-settings on registered axes (wght, wdth, slnt, opsz, ital), or preferably the high-level font-weight and font-stretch. JavaScript only drives the value. The control-surface form of this is a glyph grid with one slider per axis, which is precisely what the stage below is.

The knobs, named

The axes are the knobs: wght, wdth, slnt, opsz. That is unusually literal, and it is why this is the obvious first typography page.

Knob	Source	What it teaches
wght (weight)	sourced	The registered weight axis. This font ships 100 to 800 as one continuous range, not nine files.
wdth (width)	sourced	The registered width axis. Condensed to normal. Watch the line length change without a single reflow of anything else.
Driven by	sourced	What moves the axis. Proximity is the one that feels alive: the letters nearest the pointer get heavy.
Driver spread	ours	For cursor proximity: how far the influence reaches. Small is a spotlight, large is a tide.

sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.

Evidence

VERIFIED (author) for the mechanism; site attribution UNVERIFIED

Mechanism fully confirmed from web.dev. The index is explicit that the site attribution failed: awwwards.md found no specific award site (Codrops /tag/variable-fonts/ 404s), and craft-web.md confirmed vercel.com/font (Geist) exists via search but did not render it. Not upgraded.

Seen on: web.dev (mechanism). vercel.com/font (existence only; the index records this as a gap: not rendered).
Dependencies: vanilla CSS + a variable font file
Difficulty: moderate (the gotchas are the difficulty)
Performance: Not a compositor-only animation: it re-rasterizes text every frame. File size wins 88% against 48 static weights, but there is no gain if you ship one weight.
Accessibility and the floor: The rare accessibility win: text stays real and unsplit, so there is no screen-reader impact at all. Under reduced motion the axes stay dialable and simply do not self-animate, because a slider is not motion.

Where our build departs from the source: The font here is Ubuntu Sans Variable, served locally from this directory (no CDN). It carries wght and wdth only, so slnt and opsz are not exposed: the index names four registered axes, this font has two, and inventing the other two sliders would be a lie. That is the honest limit of the demo, not of the technique.

Notes

Composability. The only text feature here that composes with anything without an accessibility cost, because there is nothing to fragment.

Three sourced gotchas, all real, all bit us. font-variation-settings resets every axis you do not restate, so you use one CSS custom property per axis. Animating via CSS variables does not work, by design: you animate font-variation-settings directly. And it re-rasterizes text every frame, so it is not a compositor-only animation: throttle the input and pause off-viewport, which the shared loop already does.

Text scramble and decode

Scroll-linked per-word illumination