Marquee that speeds up with scroll
Scroll, Text, Hover
Free
Back to the library
The word on the axis plane
In the minimal style: one word on a plane drawn like a chart, width across and weight up. The pointer picks a point and the word becomes that version of the typeface, letter by letter on springs, while two vermilion hairlines mark the point and carry its values along the axes.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The word on the axis plane</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<header class="top">
<span class="top__mask"><span class="top__item">Specimen</span></span>
<span class="top__mask"><span class="top__item top__item--grey">Anybody, width and weight</span></span>
</header>
<!-- the plane: width runs left to right, weight bottom to top. The pointer picks a point on it and the word becomes
that instance of the typeface, every letter on a spring of its own; two vermilion guides mark where it is -->
<div class="plane" tabindex="0" role="group" aria-label="The word on the axis plane: arrow keys change width and weight" data-plane>
<div class="field" data-field>
<i class="axis axis--x" data-axis-x></i>
<i class="axis axis--y" data-axis-y></i>
<div class="ticks ticks--x" data-ticks-x></div>
<div class="ticks ticks--y" data-ticks-y></div>
<i class="corner" data-corner></i>
<i class="guide guide--v" data-guide-v></i>
<i class="guide guide--h" data-guide-h></i>
<svg class="base" data-base aria-hidden="true"><path data-base-path></path></svg>
<p class="word" data-word>Gamut</p>
<span class="label label--x" data-label-x="0">50</span>
<span class="label label--x" data-label-x="0.5">100</span>
<span class="label label--x" data-label-x="1">150</span>
<span class="label label--y" data-label-y="0">100</span>
<span class="label label--y" data-label-y="0.5">500</span>
<span class="label label--y" data-label-y="1">900</span>
<span class="name name--x" data-name>wdth</span>
<span class="name name--y" data-name>wght</span>
<span class="read read--x" aria-hidden="true" data-read-x>100</span>
<span class="read read--y" aria-hidden="true" data-read-y>500</span>
</div>
</div>
<p class="hint" data-hint><span class="hint__mouse">Move across the plane</span><span class="hint__touch">Drag across the plane</span></p>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
28 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The word on the axis plane” from Animorio and fit it into my siteWhat it does
On warm white paper there is a plane drawn like a chart: the width axis at the bottom, from 50 to 150, and the weight axis on the left, from 100 to 900, with their ticks and a printer’s corner mark at the top right. In the middle, one word, Gamut, in the variable typeface Anybody. When the page opens the axes draw themselves out of the corner, the ticks pop out one after another with a small bounce, and the word arrives hairline-thin and squeezed, from the middle outwards; then it runs once to the widest and blackest corner and comes back to rest in the middle. Every point of the plane is a version of the typeface: wherever the pointer goes, the word becomes that one. The letters get there each on a spring of its own, the ones near the pointer first and the far ones after, so the change runs through the word like a wave and stops a pixel too far and comes back. Two vermilion hairlines, one upright and one across, mark the point: at the end of each, its value rides along the axis, the ticks under the line rise and the fixed numbers step aside to make room. The baseline under the word gives a few pixels under the blackest weights and wobbles a little when the weight changes fast. If the pointer leaves, the word goes back to its resting version; if nobody touches it for a moment, the point wanders over the plane by itself. With the arrow keys the point moves a tenth of an axis at a time.
How it works
A typeface with two axes
Anybody has a width axis from 50 to 150 and a weight axis from 100 to 900, both in Fontsource’s «wdth» file. Every letter of the word is an inline-block span with its own font-variation-settings, written on each frame only when it changes. The text is taken from the HTML, so the word changes without touching the script.
The plane and the size
The plane is a box with two one-pixel lines for the axes and the ticks outside them, every 5 of width and every 50 of weight. The type size is chosen by measuring the word at 100 px in its widest and blackest version: it has to fill SIZE of the plane without being taller than half of it. It is done again when the typeface has loaded and on every resize.
The point and the springs
The pointer’s place on the plane gives two numbers from 0 to 1, width and weight. Every letter chases them on a damped spring worked out by hand (steps of 1/120 of a second on GSAP’s ticker); the stiffness drops with the distance between the letter and the point (LAG), while the damping stays in proportion: the near letters arrive first, the far ones later, and all of them pass the mark by a whisker and come back. The guides have a stiffer spring and lead the way.
The guides and the numbers
The two vermilion guides are one-pixel divs moved with translate3d; at the end of each a number gives the value and slides along the axis. The ticks near a guide grow and darken along a Gaussian bell, and the fixed labels (50, 100, 150…) fade when the vermilion number reaches them, so they never overlap.
The opening and the rest
The opening is a GSAP timeline that moves numbers, not elements: how far the axes, the ticks and the guides are drawn, and the point running from one corner to the other; the ticker writes everything. The baseline is an SVG path with a quadratic curve that gives under the letters’ average weight on a soft spring. With nobody pointing, after 2.6 seconds the point wanders along two slow sines, easing in from where it was.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
REST | script.js | [100, 560] | The width (50 to 150) and the weight (100 to 900) the word goes back to when nobody points. |
SPRING | script.js | [170, 15] | The letters’ springs: how stiff they are and how much they are held back (less, and they wobble more). |
LAG | script.js | 0.5 | How late the letters far from the pointer follow: 0 all together, 0.8 a long wave. |
SAG | script.js | 3 | How many pixels the baseline gives under the blackest weight. |
SIZE | script.js | 0.84 | How much of the plane’s width the word fills in its widest and blackest version. |
WANDER | script.js | true | Whether the point wanders by itself when nobody points. |
--accent | style.css | #ff3d17 | The colour of the two guides and their numbers, the only accent on the page. |
When to use it
For the page of a typeface, a type foundry or a design studio, for the header of a portfolio or a magazine that wants people to play with the letters, or to show every version of a variable typeface at once. It works with a short word, four to eight letters.
On phones
The same animation: the plane is tall and narrow and the word is measured again to fit. Dragging a finger over the plane, the word follows as with the mouse; lifting it, the word stays where it was, and after a moment the point starts wandering again.
With reduced motion
No springs and no wave: the page fades in already drawn and the word becomes the version the pointer picks straight away, with the guides already in place. The point does not wander by itself and the baseline stays straight.
Pitfalls
- The type size has to be measured once the typeface has arrived: measured with the fallback, the word went past the plane in its widest version. The opening waits for document.fonts.load (a second and a half at most) and the size is measured again right before it starts.
- Measuring the word in its widest version left the letters wide and black for a frame: after the measurement every letter takes back its own values straight away.
- The labels have translateX(-50%) in the CSS: animating them with GSAP would have fixed it in pixels. The opening moves only numbers (how far the axes, ticks, guides and labels are drawn) and the ticker writes the transforms and the opacity.
- With the same spring for every letter the word changed in one block, with no wave; with different stiffness and the same damping the letters part only while they move and are all alike again at rest.
- The previews’ pilot sends pointerleave from every element it leaves: the word went back to rest at every step. Rest comes only with a pointerout that has nowhere to go and is outside the window.
Libraries
GSAP 3.15.0, Anybody (font variabile, assi wdth e wght) 5.3.0.
Compressed with gzip, the three demo files weigh 8.1 KB; the libraries: GSAP 28 KB.
Testing
Tested on 14 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
