The wrecking-ball logo
Intro, Physics, SVG, Text
NewFree
Back to the library
The word on a thread
In the minimal style: a single word hanging from a hair-thin thread, a real pendulum with its own centre of mass. The pointer pushes it, a grab throws it, a click cuts the thread: it falls, bounces with a squash in the width of the typeface and lies down, then a new thread comes down and lifts it back, swinging.
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>Plumb</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 cuts the thread; the word inside it can be pushed, grabbed and thrown -->
<main class="stage" data-stage data-autoclic tabindex="0" role="button" aria-label="A word hanging from a thread. Press to cut the thread.">
<svg class="lines" data-lines aria-hidden="true">
<path class="ceiling" data-ceiling d="" />
<path class="floor" data-floor d="" />
<path class="thread" data-upper d="" />
<path class="thread" data-lower d="" />
<path class="thread" data-thread d="" />
<g data-mount><rect class="clamp" data-clamp x="-9" y="-1" width="18" height="4" rx="1" /></g>
<g data-snip-at><g data-snip opacity="0"><path class="snip" d="M-9 0H9" /></g></g>
</svg>
<div class="word" data-word aria-hidden="true"><span class="word__ink" data-ink></span></div>
<p class="hint" data-hint>Push it, throw it, click to cut the thread.</p>
<p class="read" data-readout><span class="read__label">Thread</span> <b class="read__value" data-read>+0.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
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 a thread” from Animorio and fit it into my siteWhat it does
A black room with two thin lines, the ceiling and the floor. The ceiling draws itself from the middle outwards, a small clamp appears and from it comes down an orange thread, as thin as a hair. The letters of Plumb rise one after another with a bounce, held a little high and askew, with the slack thread sagging; then the word is let go: it drops, the thread goes taut at once, gives just a little like a real thread, the ceiling bends a hair under the jerk and the word swings like a pendulum until it comes to rest upright. Brushing over it with the pointer pushes it, and it swings as much as it was pushed, turning on itself too; grabbed with the mouse or a finger it goes wherever you take it, the thread slackens and curves, and let go it flies off on its own, hits the walls and the ceiling and goes back to swinging. A click cuts the thread at the height of the click, with a small cut mark: the top piece springs up towards the ceiling, falls back and draws into the clamp, the bottom piece stays tied to the word. The word leaves turning, hits the floor on a corner, squashes (the letters get wider and heavier for a moment, on the width and weight axes of the typeface), the floor bends under the blow and springs back with a quiver, and the word bounces and lies down. After a moment the clamp runs along the ceiling a little to one side, a new thread comes down on a slant and ties onto the word, pulls it up at an angle off the floor, and the clamp goes back to the middle while the word swings until it stops where it was. Bottom right, a small instrument gives the angle of the thread in degrees, or says that the thread is cut or on its way.
How it works
The true weight of the letters
The word is drawn once on a hidden canvas, letter by letter where the page put it (offsetLeft), in the same typeface and weight. From the filled pixels come the tight box of the ink, the centre of mass and the moment of inertia (the mean of the squared distances), so a word with heavy letters on one side really hangs the way it would. The thread ties to the top of the ink column nearest the centre of mass, and the centre of mass moves onto that column, as anyone hanging a sign would do: the word hangs level.
A rigid body and a soft thread
The word is a single body with a position, an angle, a velocity and a spin, moved in fixed steps of a two-hundred-and-fortieth of a second inside gsap.ticker. The thread is a constraint that pulls and never pushes: when the distance between the clamp and the knot is longer than the thread, an impulse at the knot brings it back. It is a soft constraint (a frequency and a damping, as in Box2D), so it never blows up and it gives a little: the jerk when it goes taut is elastic, and the force it measures bends the ceiling, in the drawing only, so that no energy leaks into the pendulum.
Walls, floor and the blow
The four corners of the ink are checked against the floor, the ceiling and the two walls; the contacts of a step are solved together, six rounds of impulses with running totals (they push and never pull, friction stays inside its cone), and the bounce only applies to a real hit: so on the floor the word stops without trembling. The strongest hit of the step drives the effect: the floor bends at that point and springs back with elastic.out, and the letters squash from the side that touched, with scaleX and scaleY and with the variables behind font-stretch and font-weight, then come back on a spring.
Threads that draw themselves
Every thread you see is a chain of points (Verlet) with its ends tied to the clamp and the knot, drawn as a smooth curve. The links between the points pull and never push, so a slack thread goes limp and sags; when it is taut the chain is pulled straight, because on its own it would take too many steps. When it is cut the chain splits at the point nearest the height of the click: the top piece gets a velocity towards the clamp and springs up, the bottom one leaves with the word.
Directing the new thread
When the word has lain still on the floor for a moment it falls asleep, and a gsap.delayedCall starts a timeline: the clamp runs along the ceiling a little to one side, the new thread comes down on a slant to the knot, ties on (the word gives a small nod on the width axis), the length of the thread shortens with power2.inOut and lifts it, and the clamp goes back to the middle. Hanging and still, the word falls asleep again and glides invisibly to its exact spot, so it always comes back the same. With reduced motion the same story is told in fades.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
WORD | script.js | 'Plumb' | The word on the thread (up to 24 letters: a long one gets smaller to fit). |
THREAD | script.js | 0.4 | How long the thread is, as a share of the room between the ceiling and the floor: a longer one swings more slowly. |
GRAVITY | script.js | 2600 | How hard everything falls, in pixels per second squared: little gives a slow, dreamy pendulum, a lot a lump of lead. |
BOUNCE | script.js | 0.36 | How much the word bounces off the floor and the walls: 0 not at all, 0.8 like a ball. |
AIR | script.js | 1.7 | How soon a swing dies down: 0.3 swings for a long time, 4 stops almost at once. |
SPRING | script.js | 9 | How elastic the thread is, in hertz: 4 is a bouncy rubber band, 18 a steel wire. |
PUSH | script.js | 1 | How hard the pointer pushes the word when it brushes past (0 = it does not touch it). |
REHANG | script.js | 0.7 | How many seconds the word lies on the floor before the new thread comes down. |
--weight | style.css | 680 | The weight of the word's typeface, from 100 to 900: the heavier it is, the more the blow fattens it. |
When to use it
For a heading you can touch: the opening of a portfolio, the 404 page or the empty page of an app, the cover of a type or physics project, a playful moment in a landing page. It works with any short word, a brand name too.
On phones
The same physics with the sizes adapted: the word is bigger relative to the screen, and the thread is the same share of the room. You push and drag it with a finger, and a tap cuts the thread.
With reduced motion
Nothing moves: the room, the thread and the word fade in and the word hangs still. A click fades out the thread and the word and the word fades back in lying on the floor; a little later it fades away and comes back hanging from a new thread.
Pitfalls
- Hanging from the top of the u, a few pixels to the side of the centre of mass and only a little above it, the word hung seven degrees askew: correct physics, but it looked like a bug. The centre of mass moves onto the knot's column.
- At first the bend of the ceiling really moved the clamp: the tension bent the ceiling, the ceiling pulled the thread, and the pendulum never stopped, the word trembling by a pixel forever. Now the bend is only drawn.
- With contacts solved one corner at a time, the word kept hopping a few pixels per second on the floor and never fell asleep, so the new thread never came: the contacts of a step are solved together, with running totals and half a pixel of slack.
- Chain links that push as well as pull kept the cut piece stiff as a stick, and its spring back to the ceiling did not show: a real thread goes limp, so the links only work in tension.
- A taut thread drawn as a chain bent into an S in fast swings, because the chain only reaches a straight line after many steps: when the distance reaches the length of the thread, the points are pulled onto the straight line.
- The card's video stops when the picture stays the same for a second with no GSAP animation scheduled: the wait on the floor before the new thread is a gsap.delayedCall, not a timer, and the hanging word glides to its exact spot, so the video ends when it is back as it was.
Libraries
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 12 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.
