§ Case 04 — Typography · Motion
Kinetica2025
A kinetic typography study turned product. Variable fonts mapped to scroll, audio amplitude, and reactive cursor velocity — the type behaves like a living organism.
Year
2025
Role
Concept
Stack
Variable Fonts · GSAP
Case 04 · 2025
Typography · Motion
01 · Brief
Kinetica — brief
A self-initiated experiment: what would a typography study look like if every variable font axis were genuinely interactive — not just decorative? The constraint was a single page, two typefaces, and no images.
02 · Approach
Approach
Three input channels feed the type: scroll velocity drives weight, microphone amplitude drives width, cursor velocity drives slant. Each channel is smoothed with a one-pole low-pass so the text sways instead of jitters.
03 · Solution
Solution
All animation runs on the compositor — `font-variation-settings` is updated once per rAF, never inside React state. The microphone channel asks for permission only when the user opts in via a small icon at the corner of the page; everything works without it.
◊ Gallery
Selected frames
Click any image to enter the lightbox. Use ←/→ to step through, Esc to close.
◊ Numbers
3
Input channels
4 ms
Frame budget
38 kB
JS bundle
0.6 s
Time to interactive
◊ Deliverables
- 01Variable-font runtime (3-channel input mixer)
- 02Scroll · cursor · microphone smoothing pipeline
- 03Calmer-motion fallback that reduces all axes to defaults
- 04Single-page editorial layout with display-weight controls
- 05Public-domain demo source on GitHub
04 · Outcome
Outcome
Featured by Typewolf, Site Inspire, and the Variable Fonts community newsletter. The interaction model has been cited in three subsequent variable-font experiments by other studios.
◊ Stack
Variable Fonts
GSAP
WebGL