The word on the reel

Text, 3DGSAP, CSS onlyAdvancedCompressed weight: Demo 7.3 KBGSAP 28 KBFreeDownload the zip

A single line, in the minimal style: «We make» and a last word on a reel that turns in 3D like the drum of a mechanical counter, with a click. Every word has its own width: the window of the reel widens or narrows on a spring, the word fills it on the width axis of the typeface and the rest of the sentence moves over to make room, letter after letter.

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 on the reel</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <!-- one line: the first words stay, the last one sits on a reel that turns on its horizontal axis. The script
         builds the letters and the faces of the reel, and moves the whole line to make room for every new word -->
    <h1 class="line" data-line>
      <span class="sr" data-sr>We make brands.</span>
      <span class="prefix" data-prefix aria-hidden="true"></span>
      <span class="reel" data-reel aria-hidden="true"></span>
      <span class="dot" data-dot aria-hidden="true"><span class="dot__ink">.</span></span>
    </h1>
  </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.

18 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 on the reel” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On warm white paper the letters of «We make» rise one at a time from under the baseline. Next to them a slot opens: inside, a reel of blue words spins fast, slows down, passes the stop by a whisker, comes back and stops on «brands», while the window widens with a bounce and pushes the sentence to the left, with the full stop closing the line. Then, at regular intervals, the reel clicks like a counter: a small pull back, a snap forward, the stop passed by a few degrees and the return. The new word arrives from below at the width of the old one, squeezed or stretched on the axis of the typeface, and relaxes to its own measure together with the window; the rest of the sentence moves so that everything stays centred, and the letters of «We make» follow one after the other, like the cars of a little train, the nearest first. At every click the full stop gives a little nod. While the reel turns the words above and below show, tilted; at rest they stay a shadow. After the last word the reel rolls it away as the window closes, «We make» goes back to the centre alone and sinks, and it all starts again.

How it works

A real reel, made of a few faces

The reel is a cylinder with a word every 36 degrees: the radius is the one that makes every face exactly one line tall (half a line divided by the sine of 18 degrees). A number p says where the reel is, in words: 2.5 is halfway between the third and the fourth. On every frame seven elements take the positions within a quarter turn of the front, with translateZ(-r) rotateX(-θ) translateZ(r): the face turns around the axis of the cylinder, not around itself. The perspective sits on the container, centred on the window, and a gradient mask fades the faces towards the top and the bottom.

The counter's click

Every click is a tween of p from one word to the next with a hand-written ease: for the first fifth the reel pulls back by 6% (a squared sine, which starts and ends at zero speed), then a damped spring takes it forward and past the stop by 14%, and brings it back exactly on 1. The damping is worked out from the wanted overshoot, so the spring always settles in time. The fast spin at the opening uses the same spring with an overshoot of a tenth of a word divided by the number of words it runs through, to stop with the same knock.

The window on a spring

For every word the width at rest is measured, and a table of 22 widths along Archivo's wdth axis, from 62 to 125. The window wants the width of the word in front, blended with a smoothstep halfway through the click; a real spring (integrated in steps of 1/240 of a second, BOUNCE sets the damping) chases it and passes it a little. Every face fills the window: the table gives the value of the axis that makes it as long as the window, and if the axis is not enough scaleX does the rest. So the full stop, placed at the end of the window, always touches the last letter.

The little train of «We make»

The line is centred: when the window grows by 40 pixels, the sentence moves left by 20. Every letter of «We make», measured with a Range to keep the kerning, chases its place on its own spring, stiffer for the letter next to the reel and softer going left. Like the buffers of a train, a letter cannot stray from its place more than a hair (1.2% of the type size) beyond the letter on its right: the sentence squeezes and stretches just a little, without ever sticking together.

The words around and the full stop

The faces away from the front have the opacity of GHOST, but the speed of the reel (how much p changes on each frame) lights them up more while it turns and lets them fade a moment later, like a trail. The full stop is an element of its own: it appears with the window and at every click drops by a twentieth of a line and squashes, then comes back with an elastic.out. The whole direction is one GSAP timeline that repeats; SPEED changes its timeScale and the step of the springs too.

Values to change

Name	File	Default	What it changes
`PREFIX`	script.js	`'We make'`	The words that stay, before the reel.
`WORDS`	script.js	`['brands', 'type', 'motion', 'websites', 'objects', 'noise']`	The words on the reel, one per click. The more their lengths differ, the more the sentence moves.
`WEIGHT`	script.js	`720`	The weight of the word on the reel, from 100 (a hairline) to 900 (black).
`HOLD`	script.js	`1.3`	How many seconds every word stays before the reel clicks.
`BOUNCE`	script.js	`0.45`	How far the window and the sentence go past their place before they settle: 0 not at all, 1 a lot.
`GHOST`	script.js	`0.05`	How much the words above and below show while the reel rests: 0 only the word in the window.
`SPEED`	script.js	`1`	The speed of the whole animation: 2 is twice as fast, 0.5 half as fast.
`LOOP`	script.js	`true`	Whether at the end the reel rolls the word away and it all starts again. With false it stays on the last word.

Try them in the Playground

When to use it

For the opening headline of a studio, an agency or a portfolio that does several things and wants to say them in a single line («We make brands, type, motion…»); also for a landing page listing who a product is for, or the cities of an event. It works with a short sentence and words of different lengths, which make the line move.

On phones

The same animation on one line: the type is sized so that the sentence with the longest word fits in nine tenths of the screen, and the reel, the springs and the little train stay the same, in proportion.

With reduced motion

Nothing turns and nothing moves: the sentence fades in already set, and for every new word it fades out and back in with the new word at the right measure. At the end it fades out and starts again.

Pitfalls

The full stop nodding at every click dropped by 7% of a line, and for that moment it looked detached from the word: at 5% it reads as a nod and stays attached.
The letters of «We make», chasing their place on a spring, fell behind when the word grew fast, and the sentence read «Wemake» or «makemotion»: without a limit, the lag of a spring depends on the speed. The limit between one letter and the next (like the buffers of a train) keeps the movement but never lets a space disappear.
Filling the window with the faraway faces too stretched «type» past the axis of the typeface with scaleX, and the ghost words became stretched slabs: only the word in front stretches past the axis, the others at most squeeze.
The words above and below, always visible, made the line crowded at rest: now their opacity follows the speed of the reel, which lights them up in the click and fades them a moment later.
After the last word an empty pause of a second looked like the end of the animation: cut to a third of a second, «We make» rises again almost at once. The jump of p at the start of the round does not show because the window is closed at that moment.

Libraries

GSAP 3.15.0, Archivo (font variabile, assi wdth e wght) 5.3.0.

Compressed with gzip, the three demo files weigh 7.3 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.