FX-003 · Variable Flex
Variable font animation.
Letters near the pointer swell along a variable font's width and weight axes. When the pointer is away, a slow wave runs through the line, so a headline is never quite still.
- Weight2.6 KB
- LibraryNone
- PhonesWave
- Licence€39
Live · Swell
Push these letters.
Move your pointer across them. Width and weight both follow it.
Touch screens have no pointer, so here the letters get the slow wave. Open this page on a laptop to push them around.
Live · Wave
Never quite still.
Keep the pointer away and a slow wave runs through the line.
Live · Fit
It stays in its box.
If a swell would push text out of its box, the whole line eases back until it fits.
01 — Details
What it does.
Two axes
Letters swell on width and weight together, so the type changes shape rather than just scaling.
An idle wave
When the pointer leaves, a slow wave keeps the line alive. Set its strength, or turn it off.
Stays in its box
If a swell would overflow, the whole line eases back until it fits, so layouts never break.
Pairs with Kinetic Split
It waits for the letters Kinetic Split made, or splits its own.
02 — Prompt
Free AI prompt.
Paste this into your AI coding tool to build the effect in your own stack. It carries the behaviour, the build and the traps we hit in production. It is free for pitches and personal work.
Build a variable font headline effect for this website in plain JavaScript. Behaviour - Letters near the pointer swell along the font's width and weight axes, falling off smoothly with distance. - When the pointer is away, a slow wave runs through the line. - Touch screens get the wave only. Build - Use a variable font with wdth and/or wght axes, and split the headline into one span per letter. - In one frame loop, find each letter's distance to the pointer, ease it toward a target, and set font-stretch and font-weight. - Read letter positions once and again on resize, never inside the loop, or layout work will eat the frame rate. Must hold - Changing width moves the neighbouring letters. Measure the line at full swell, and if it would overflow its box, scale the swell down until it fits. - Keep the real text for search engines and screen readers: an aria-label on the heading, with the letters hidden from assistive technology. - Pause the loop when the headline is off screen. - With prefers-reduced-motion, show the type as set. - Restore the original text on teardown. Done when it holds 60fps on a laptop, no line ever wraps or overflows while swelling, and a screen reader hears the sentence.
03 — Code
Or drop it in.
With a licence, the finished effect is one attribute. The small runtime fetches what it needs and removes everything again if the element goes.
<script src="/fx/sitefx.js"></script> <h1 data-fx="split flex" data-fx-split-by="chars"> Make the web feel expensive. </h1>
| Option | Default | What it does |
|---|---|---|
| data-fx-flex-radius | 280 | Pixels of influence around the pointer |
| data-fx-flex-wdth | 160 | Width at full swell, as font-stretch % |
| data-fx-flex-wght | 900 | Weight at full swell |
| data-fx-flex-wave | 0.3 | Idle wave strength, 0 for none |
04 — FAQ
Questions.
Which fonts work?
Any variable font with a wdth axis, a wght axis, or both. Plenty of free fonts qualify.
Does it need GSAP?
No. It runs on its own. With Kinetic Split on the same heading it uses those letters, and that effect needs GSAP.
What happens on phones?
Touch screens get the slow wave, since there is no pointer to follow.
Can it break my layout?
No. If a swell would overflow, the whole line eases back until it fits its box.
Licence
Variable Flex · €39
One effect, yours to keep. Unlimited client projects, 1 developer, 12 months of updates. Prices exclude VAT.