The word on the cams

Hover, Text, SVGGSAPAdvancedCompressed weight: Demo 9.8 KBGSAP 28 KBFreeDownload the zip

In the minimal style: one word, and under every letter a thin tappet, a rod with a head, resting on its own egg-shaped cam drawn in a hairline. The cams sit on one belt, each turned a step further on: running the pointer along the word turns them and the letters rise one after another like a scale, take weight at the top and drop back onto the cam with a small knock. Hold the pointer still and the letter stays up and lights up red.

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>Tappet</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>
  <!-- one word on a row of tappets, each pushed up by its own cam: the pointer turns the cams -->
  <main class="stage" data-stage>
    <h1 class="sr" data-name>Tappet</h1>
    <svg class="machine" data-machine aria-hidden="true">
      <g data-belt-group>
        <path class="belt" data-belt d="" pathLength="1" />
        <path class="teeth" data-teeth d="" />
      </g>
      <path class="rail" data-rail d="" />
      <g data-bushes></g>
      <g data-cams></g>
      <g data-tappets></g>
    </svg>
    <p class="hint" data-hint>Run the pointer along the word.</p>
    <p class="read" data-readout><span class="read__label">Shaft</span> <b class="read__value" data-read>0°</b></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.

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 cams” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a warm white background sits the word Tappet, in a thin typeface, with the letters well spaced. Under every letter is a tappet drawn in a hairline: a flat head, a rod going down through a small bushing on a guide rail, and at the bottom the cam, an egg shape made of a circle, a round nose and two straight lines. The cams sit on a thin toothed belt, and each one is turned a step further on than its neighbour. At the opening the belt and the rail draw themselves, the cams open on their hubs one after another with an extra half turn, the letters drop onto their cams and bounce a little; then the cams make one slow turn and the word rises and falls like a scale. From there the viewer drives it: the position of the pointer along the word is the angle of the cams (from one margin to the other they make exactly one turn), so running from left to right brings the nose of each cam under its letter and pushes it up. The cams follow the pointer on a spring, and the teeth of the belt slide along. A letter at the top turns heavy and a little narrow, on the variable typeface; falling back it hits the cam, squashes for an instant and bounces. A fast pass throws them higher than the cam: they fly, stop against the guide if they overdo it, and drop back. Holding the pointer still on a letter, after half a second the letter gives a small hop and lights up vermilion, with its rod; the reading at the bottom right, the angle of the belt in degrees, lights up too. If nobody touches the word, an invisible hand runs along it: up to the middle letter, a wait until it lights, then on to the end.

How it works

Everything in letter heights

The stage is an SVG whose viewBox is as big as the window, so one unit is one pixel. Every letter is measured with getBBox twice, at the lightest and at the heaviest weight: the widest sets the pitch between the letters, which must also let the cams turn without touching. Then everything is counted in letter heights: the head of the tappet below the letters' descent, the guide rail, the top of the cam at rest, the hub. The type size is chosen so the word and the cams fit the window, across and down.

A real cam

The cam is a base circle and a small circle for the nose, joined by two straight tangents: the egg shape of real cams, always convex. The tangents leave the base circle at an angle that can be worked out (the arc cosine of the difference of the radii over the distance between the centres): outside it the cam lifts nothing. The tappet touches it at the top, so the lift is how far the outline reaches up above the base circle: it is read once from the drawing into a table of 1440 angles, so the rod always touches the line you see.

The pointer is an angle

Every letter has an angle at which the nose of its cam is at the top, one step after another; before the first and after the last there is a rest as wide as a flank of the cam, so at rest no cam touches its tappet and from one margin to the other the cams make exactly one turn. The x of the pointer becomes the angle to reach, and the belt chases it on a spring (SPIN and SETTLE) with a top speed. Coming in, the pointer takes the turn the cams are on, so they never spin a whole turn to catch up.

The tappets

Every tappet is a real body, on a fixed step of 1/240 of a second: a spring pushes it down and the cam can only push it up. If the cam falls away faster than the tappet can drop, the tappet stays in the air and lands on it later: the knock makes it bounce (BOUNCE) and squashes it for an instant on a damped spring. If it flies too high, the collar under the head stops against the guide. The weight and the width of the letter follow the lift along a soft curve, between THIN and HEAVY.

Holding still, the invisible hand and the opening

If the pointer stays on a letter, the cam has stopped with its nose under the rod and the tappet is resting on it, a clock runs: after HOLD seconds the letter lights up, with a small push upwards, like a key catching. The colour comes in quickly and leaves slowly. With no pointer, after IDLE seconds a GSAP timeline moves a fake pointer along the word, with a stop on the middle letter. The opening is one timeline too: the belt and the rail draw themselves with stroke-dashoffset, the cams open with back.out, the letters are dropped one at a time and the cams make their first turn.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'Tappet'`	The word on the tappets: up to ten letters, spaces are dropped. Every letter gets its own cam.
`LIFT`	script.js	`0.25`	How high the cams lift a letter, in letter heights: more lift means bigger cams and letters further apart.
`SPIN`	script.js	`2.6`	How quickly the cams follow the pointer, in hertz: 1 is lazy, 6 is tight.
`SETTLE`	script.js	`0.62`	How the cams come to rest: 0.3 swings past and back, 1 stops dead.
`BOUNCE`	script.js	`0.32`	How much a letter bounces when it lands back on its cam (0 = it just lands).
`HOLD`	script.js	`0.5`	The seconds the pointer has to rest on a letter before it lights up.
`THIN`	script.js	`230`	The weight of a letter at rest (100 to 900).
`HEAVY`	script.js	`780`	The weight of a letter at the top of its lift (100 to 900).
`IDLE`	script.js	`2.4`	The seconds without a pointer before an invisible hand runs along the word (0 = never).

Try them in the Playground

When to use it

For a name you play by running over it: the opening of a portfolio or an industrial design studio, the wordmark of a workshop, a watchmaker or an instrument maker, the page of an engineering project, the 404. It works with any short word.

On phones

The same machine with the sizes adapted: the word and the cams take almost the whole width and everything is measured in letter heights, so the proportions stay the same. You slide a finger along the word; holding it still on a letter, the letter lights up. The hint becomes «Drag a finger along the word.».

With reduced motion

Nothing moves: the belt, the cams and the word fade in and stay still at rest. The letter under the pointer takes weight and turns red with a fade, without rising, and thins out again when the pointer leaves.

Pitfalls

The first cam was a small circle with a lobe made of a cosine wave: it came out as a peanut with a narrow waist, which no real cam has. Now it is a base circle and a nose joined by two tangents, and the lift is read from the drawing, so the rod always touches the outline.
With a lobe wider than a step between two letters, at rest some cams still touched their tappets and the word was never in line: the rest sits in a gap as wide as a flank of the cam on both sides, and the steps between the letters shrink to fit the turn.
Holding the pointer still, the letter lit up and gave its little hop: the hop took it off the cam, the clock started again from zero and the letter kept switching off and on. A letter that is already lit stays lit in the air too.
A fast pass threw the tappets so high that the rod came out of its bushing: now the collar under the head stops against the guide and the tappet falls back.
The box of an SVG text (getBBox) is the line's, not the letter's: the descent is the typeface's even for a T. The head of the tappet goes below the letters only if the word really has letters with tails.
The pointer coming back in from the other side wanted the cams on a different turn and made them spin a whole turn to catch up: coming in, the pointer takes the turn the cams are already on.

Libraries

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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