The word spaced by the caliper

TextGSAPMediumCompressed weight: Demo 8.4 KBGSAP 28 KBFreeDownload the zip

A minimal-style text animation: a word arrives badly spaced and a hairline caliper, two vermilion lines with the reading in figures, measures one space at a time. Where a space is wrong the letters slide on a spring until the number is right, one pixel too far and back; in the end the caliper reads the same number everywhere and the word takes weight.

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.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The word spaced by the caliper</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/standard.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage data-autoclic role="button" tabindex="0" aria-label="Uniform. Click to loosen the spacing and measure it again.">
    <!-- the letters and the calipers: one SVG, drawn by the script -->
    <svg class="scene" data-scene aria-hidden="true">
      <g data-calipers></g>
      <g data-letters></g>
    </svg>

    <h1 class="sr-only" data-word>UNIFORM</h1>

    <p class="hint" aria-hidden="true"><span class="hint__line" data-hint>Click to loosen</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.

12 values to change

Open the Playground

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 spaced by the caliper” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A warm white page, empty. The letters of the word ‘UNIFORM’ rise one after another, thin and light, but badly spaced: the N and the I almost touch, between the O and the R there is a hole. Above the first pair a caliper opens: a thin horizontal line that grows from the middle, two vermilion verticals that drop to the foot of the letters and touch the ink, two slanted ticks like the dimensions of a technical drawing and above them the number, the size of the space in thousandths of an em (300). Then the U and the N slide towards each other, each with its half of the word, and the number drops with them: 250, 180, 130, down to 116, one pixel past the mark, and back to 120 with a small spring. The moment the space is right the figure turns vermilion and the dimension line gives a one pixel knock. The caliper moves on to the next space like an inchworm, the front jaw first and then the back one, its number dimming on the way and lighting up again when both touch ink. Spaces that are too tight open up, the ones too wide close, and one that is already right only gets the nod. As they slide the letters lean a hair against the motion and straighten up when they stop. At the end a caliper appears in every space, one after another from the left, all with the same number, which turns vermilion in a wave; the word takes weight letter by letter, with a bounce in the stroke, and the spaces stay equal while the letters grow wider. Then the calipers lift away and the word is left, black and full. ‘Click to loosen’ appears at the bottom: a click (or a tap, or Enter) makes it light again, spaces the letters at random and the caliper starts over. With the pointer over the finished word the caliper comes back to measure the nearest space.

How it works

Measuring the ink

Every letter is a text element in an SVG as big as the window. On a canvas in the same face (variable Archivo) measureText gives, for every letter and for eleven weights between the lightest and the heaviest, where the ink starts and ends from the starting point (actualBoundingBoxLeft and Right). For any weight both values are read between the two nearest samples: so the space is measured from ink to ink even while the word changes weight.

A word made of numbers

The state of the word is only numbers: one space for every pair of letters, in thousandths of an em, and the weight of every letter. On every frame the word is put together again from the left, ink plus space, and it is always centred. Changing one space therefore moves the two halves of the word by half the difference each, towards each other, and the middle of the space stays still: the caliper can stay there while the letters arrive.

The caliper that reads

The caliper is a path (two jaws, the dimension line, two slanted ticks) and a text for the number. The jaws sit on the edges of the ink of the space they read, and the number is not written anywhere: it is the distance between the two jaws divided by the font size, rounded. To move to the next space, two tweens carry each jaw from where it was to the new edge, the front one a little before the other.

One pixel too far

A wrong space goes with power3.inOut to one pixel past the right value (the pixel is turned into thousandths of an em with the font size) and comes back with elastic.out: the number passes 116 and settles on 120. At the same moment the figure turns vermilion and the dimension line rises a pixel and a half and drops back. While the letters run, their speed gives a small lean (skewX, two and a half degrees at most) that dies away when they stop.

The direction and the click

One timeline builds everything on load: the entrance, one space at a time, the calipers in every space, the wave of weight and the calipers lifting away. A click stops it where it is and makes a new one: light weights, new random spaces with the same sum (one right by chance, for the nod) and the measuring again. Readings that would touch, over a narrow letter like the I, step up one row as in the dimensions of a drawing. With reduced motion the two shapes of the word take turns with a fade.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'UNIFORM'`	The word to space (2 to 10 letters; spaces are dropped).
`SPACE`	script.js	`120`	The even space the caliper sets between the letters, in thousandths of an em: it is the number you read at the end.
`PACE`	script.js	`1`	How fast the caliper works: 2 is twice as fast, 0.6 slower.
`OVERSHOOT`	script.js	`1`	How many pixels the letters slide past the mark before they spring back (0 stops them dead).
`LIGHT`	script.js	`160`	The weight of the word while the spacing is wrong (100 to 900).
`HEAVY`	script.js	`680`	The weight the word takes once every space is equal (100 to 900).

Try them in the Playground

When to use it

For the opening of anyone who works with letters precisely: a type foundry, a graphic or brand identity studio, a typography portfolio, a black and white launch page, the loading screen of a one-word brand. It also works as an animated explanation of spacing in an article or a course.

On phones

The same animation with the sizes adapted: the font size is chosen so the word fits the width of the screen both badly spaced and set, the caliper’s figures and ticks get smaller and nearby readings step up one row so they never touch. A tap makes the word light again and has it measured again.

With reduced motion

Nothing moves: the word fades in already set and heavy, with a caliper in every space reading the same number; then the calipers fade away. A click fades in the badly spaced word with its wrong readings and then the right one again.

Pitfalls

text-anchor and the advance width don’t say where the ink is: an I has more air around it than an M, and two letters with the same distance between their starting points look spaced differently. The space is measured between the actualBoundingBoxRight of one letter and the actualBoundingBoxLeft of the next, taken from measureText on the canvas at the right weight.
The weight changes the width of the ink: with the measurements taken at one weight only, the jaws came off the letters during the wave of weight. The ink is measured at eleven weights and read between the two nearest samples.
With both jaws starting together the caliper seemed to slide in one block and the number barely moved; with the front one going first it opens and closes like an inchworm, but on the way it showed large meaningless figures (up to 500): while it travels the number almost goes out.
On a phone the readings of the two spaces around the I overlapped (‘120120’): on every frame the readings are sorted from the left and the one that would touch the one before steps up one row, with a soft move.
A killTweensOf on the caliper at the start of the measuring also wiped the timeline’s tweens that had yet to start, and the caliper never appeared again: the pointer’s tweens are stopped only on the click, before the new timeline is built.
The lean taken from the speed, up to five degrees at first, made the word look italic while it loosened: now it stops at two and a half degrees.

Libraries

GSAP 3.15.0, Archivo (font variabile) 5.3.0, JetBrains Mono (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 8.4 KB; the libraries: GSAP 28 KB.

Testing

Tested on 16 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.