Polish & Effects · Small finishing touches
Variable font proximity可变字重跟随
- type breathing
- layout never shifts
- pushed up
As the pointer sweeps a line, the characters nearest it get heavier and wider, as if pushed up by it; move away and they thin out again. Position, size and line-height never change.
When to use it
Use it on large headings, wordmarks, and navigation. Avoid body copy and tables — shifting weight makes the whole block visually flicker and is tiring to read.
Parameters
weight 300 → 1000 · width axis 20 → 450 · radius ≈ 220px, linear falloff · per character, every frame · no layout change
Recipe
Variable font proximity → weight 300 → 1000 @ linearVariable font proximity → axis 20 → 450
One sentence for your AI
Make every character in this heading respond to the pointer: measure its distance to the pointer, fall off linearly within about 220px, and map that onto the variable font axes wght (300→1000) and wdth (20→450). Change the axes only — never font-size or line-height, or the line will jitter.