Interaction · 2026
Cormorant Garamond loaded as a variable font. Horizontal cursor position maps linearly to font-weight from 200 to 700 — with a lerp at 12% per frame so nothing snaps.
Try it
No libraries. Just requestAnimationFrame and font-variation-settings.
What it is
Typography is something I care about deeply, and variable fonts opened up a dimension I hadn't explored — weight as a live, continuous property. Cormorant Garamond exposes a weight axis from 200 to 700 — moving the cursor left to right drives it across that full range. Rather than snapping directly to the target weight, a lerp at 12% per frame makes the transition feel physical. When idle, the weight breathes slowly via a sine oscillation centred on 300.
How I built it
The font weight is set each frame via font-variation-settings: 'wght' N. The target is calculated from the cursor's X position relative to the demo area, then lerped toward it at 12%. The idle breathing uses sin(t × 0.012) × 60 centred on 300. Five words — Form, Design, Space, Rhythm, Gesture — cycle every 2800ms with a CSS opacity transition. No libraries.
Built with