The Newton's cradle of letters

Physics, TextGSAPAdvancedCompressed weight: Demo 10 KBGSAP 28 KBFreeDownload the zip

In the minimal style: the five letters of FORCE each hung on two parallel hair-thin threads, like the balls of a Newton’s cradle, with real physics. Pull the first letter out with the mouse or a finger and let go: the knock runs through the three still ones and sends the last one out, back and forth until it dies down; at every knock the letters squash a hair on the width axis.

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>Force</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>
  <!-- the whole room is the button that lifts the first letter; every letter can also be pulled by hand -->
  <main class="stage" data-stage data-autoclic tabindex="0" role="button" aria-label="A word hung as a Newton's cradle. Press to lift the first letter and let it go.">
    <svg class="cradle" data-svg aria-hidden="true">
      <path class="bar" data-bar d="" />
      <g data-ends></g>
      <g data-gauge opacity="0">
        <path class="gauge__plumb" data-plumb d="" />
        <path class="gauge__arc" data-arc d="" />
        <text class="gauge__deg" data-deg x="0" y="0">0°</text>
      </g>
      <g data-bobs></g>
      <g data-clamps></g>
    </svg>
    <p class="hint" data-hint>Pull a letter out and let go, or click.</p>
    <p class="read" data-readout><span class="read__label">Knocks</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.

17 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 Newton's cradle of letters” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A warm white room with one thin line at the top, the bar of the cradle, which draws itself from the middle outwards; small clamps snap on in pairs and from each pair a letter of FORCE is let down on two parallel threads as thin as a hair, like a swing: the letter runs along its arc and always stays upright. The letters come down one after another, the threads catch each one a pixel too far and pull it back, and the letter takes on weight for an instant. Hanging, they sit a hair apart, like the steel balls of a cradle. A click lifts the first letter along its arc (every second click lifts two): a dashed plumb line appears with an arc and the degrees of the lift, the letter stops a hair higher and then is let go. It falls, hits the second letter and stops dead; the three in the middle barely shiver and the last one flies out on the other side, comes back, hits, and the first one goes out again. The threads of the letter carrying the knock light up in vermilion and slowly cool down. At every knock the two letters that touch get narrower for an instant on the width axis of the typeface and a little heavier, then come back on a small spring: you can see the knock run through the word. With air drag and a whisper of friction at the knots the swinging dies down in about ten seconds, some energy leaks into the middle letters too, as in a real cradle, and in the end they all come to rest in their places. Every letter can also be grabbed and pulled with the mouse or a finger, even one in the middle, which pushes its neighbours; let go, it swings. Bottom right, a counter says how many times the knock has sent a letter out on the other side.

How it works

The ink of every letter

Each letter is drawn once on a hidden canvas, centred the way the SVG will draw it (text-anchor middle), in the same typeface and weight. From the filled pixels come the tight box of the ink and the two points at the top where the threads tie on: a quarter of the ink in from each side, on the nearest column with ink close to the top line. The pivots on the bar are placed so that the inks sit a hair apart (1.4 per cent of the type size), and the type size is chosen so that the word fills a share of the width and the capitals never pass a fifth of the height.

Five pendulums and their knocks

Each letter is a pendulum with its own angle and speed, hung on two parallel threads: it moves along the arc without turning, so it is drawn with a single translate, moved in fixed steps of a twelve-hundredth of a second inside gsap.ticker, with the law of a real pendulum (the sine of the angle, not the angle) and a period chosen in seconds, so it swings at the same pace on every screen. When the inks of two neighbours touch and are closing in, an impulse between equal masses with a coefficient of restitution swaps their speeds: at 0.99 the first one almost stops dead and the second one leaves. Because the letters hang a hair apart, the knock crosses the row as a chain of very fast collisions, and that is why only the last one flies out.

Friction, safety and sleep

The air takes a little speed away at every step and a whisper of friction at the knots ends the last small swings, instead of letting them tremble forever. No letter may carry more energy than the highest lift, so none leaves the room even when thrown hard; the largest angle is worked out at every size, so that the outer corner of the end letter stays on the screen. When everything is nearly still the letters glide invisibly to their exact places and the loop falls asleep; while it is awake there is always a gsap.delayedCall scheduled, so whoever is recording waits for the cradle to stop.

The squash on the wdth axis

The strongest knock of each pair, in a frame, drives the effect: the two letters get narrower on the width axis (font-stretch, up to 13 per cent less) and heavier, then come back on a small spring. The rebound must never make them more than a pixel wider: with a full elastic.out the letters grew by 8 per cent and ran into their neighbours, which hang a hair away. The threads of a moving letter are coloured with gsap.utils.interpolate between grey and vermilion, quickly as it warms up and slowly as it cools down.

The hand: the click and the drag

The click is a GSAP timeline: the first letter (every second click the first two) becomes driven and rises along its arc with power2.inOut to a hair past the mark, stops, and is let go with zero speed. When dragging, the letter that was taken follows the pointer sideways, and the angle is the one that brings the grabbed point under the finger; while driven it has infinite mass and pushes its neighbours. Let go, it keeps the speed it had, cut down if it is more than the highest lift allows. A dashed plumb line and an arc with the degrees go with the hand. With reduced motion the same story is told in fades.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'FORCE'`	The word of the cradle: one pendulum per letter, from 3 to 7 letters. It works best with capitals that have ink at the top in the middle (O, C, E, F, T, A, S).
`PERIOD`	script.js	`1.5`	How many seconds one full swing of a small pendulum takes: more is slower and dreamier, less is a desk toy.
`THREAD`	script.js	`0.36`	How long the threads are, as a share of the room’s height.
`LIFT`	script.js	`34`	How many degrees a click lifts the first letter (less on a narrow screen, so the last one never leaves the room).
`ELASTIC`	script.js	`0.99`	How much of each knock passes on: 1 is perfect steel, 0.6 is putty and soon they all swing together.
`AIR`	script.js	`0.3`	How soon the swinging dies down: 0.05 goes on for a long time, 1.5 stops almost at once.
`SQUASH`	script.js	`1`	How much the letters squash on the width axis at every knock (0 = not at all).
`--accent`	style.css	`#e5432a`	The colour of the threads carrying the knock.
`--weight`	style.css	`760`	The weight of the letters’ typeface, from 100 to 900.

Try them in the Playground

When to use it

For a heading you can touch that says one thing: the opening of a portfolio, the 404 page, the cover of a physics or type project, a playful moment in a landing page, the about page of a studio that works with motion. It works with any short word, a brand name too.

On phones

The same physics with the sizes adapted: the word takes a bigger share of the width, the threads are shorter, and the lift angle gets smaller so the last letter never leaves the screen. You pull a letter with a finger, and a tap lifts the first one.

With reduced motion

Nothing moves: the bar, the threads and the letters fade in. A click fades the letters out and back in with the last one (or the last two) already out on the other side, the counter goes up by one, and a little later they all hang still again.

Pitfalls

With a single thread the letters turned with it, like a hanging sign: two letters lifted together turned around different pivots and their corners ran into the neighbour by twenty pixels or so. With two parallel threads the letter stays upright and the distance between neighbours stays horizontal, as the collision physics assumes.
With too much air (0.7) half the energy was gone between the lift and the first knock, and the last letter rose to 24 degrees instead of 34: it looked like a bug, not like drag. Now the air is light, and the last small swings are ended by a whisper of friction at the knots, which hardly touches the big ones.
With a restitution of 0.97 the cradle lost its trick at the very first knock: the first letter kept swinging by ten degrees while the last one flew out, and the two went on together in opposite directions. At 0.99 the clean knock, one in and one out, lasts almost to the end.
The friction at the knots held the middle letters still at three tenths of a degree, right on the threshold of sleep, and the cradle risked never falling asleep: the threshold is at six tenths, and the final glide puts them back to zero.
The squash came back on a full elastic.out and on the rebound the letters grew 8 per cent wider, running into their neighbours a hair away: the return now peaks at one pixel and then settles narrow.
The test click lands in the middle of the word, on a letter: pressing on a letter only takes it after five pixels of movement, otherwise it is a click and lifts the first one.
The card's video stops when the picture stays the same for a second with no GSAP animation scheduled: while the cradle is awake a gsap.delayedCall is always waiting, and the last glide to the exact place is a tween.

Libraries

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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