§02.04 — Lab Playground
VariableFontScroll
Scroll velocity → variable font axes (wght, wdth, slnt) for living, kinetic display headlines.
Tech
Variable Fonts · 2025
Status
Live
Renderer
WebGL2 / fallback
Updated
MMXXVII
MOTION
Drag the mouse — type reacts to velocity
Live · move the cursor
Variable Fonts · 202560 fps target
◊ Brief
Scroll velocity drives the wght / wdth / slnt axes of a variable display face. The body of the page becomes the type animator.
- wght range300 → 800
- slnt range0 → -12°
- smoothing180ms
- axis lockauto
§README
- §01The CSS uses font-variation-settings on the html element, so all type inherits the change.
- §02Scrolling fast = bold + slanted. Stopping = back to a calm regular.