The letters threaded on a string

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

In the minimal style: the letters of a word threaded like beads on a hair-thin string between two small pegs, hanging as a true catenary. The pointer pulls the string down and the letters slide towards the lowest point; a click lets it go slack and the letters bunch up in the middle, the next one pulls it tight in one go, the string rings and the letters fly back into line.

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>Strand</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- one thread between two pegs, the letters of one word threaded on it like beads; the whole room is the button -->
  <main class="stage" data-stage data-autoclic tabindex="0" role="button" aria-label="The letters of a word threaded on a thread. Press to let the thread go slack or pull it tight.">
    <svg class="lines" data-lines aria-hidden="true">
      <path class="chord" data-chord d="" />
      <path class="ext" data-ext d="" />
      <path class="dim" data-dim d="" />
      <path class="thread" data-thread d="" />
      <g class="letters" data-letters></g>
      <g class="peg" data-peg-a><circle r="4.5" /><path class="peg__slot" d="M-2.8 0H2.8" /></g>
      <g class="peg" data-peg-b><circle r="4.5" /><path class="peg__slot" data-slot d="M-2.8 0H2.8" /></g>
    </svg>
    <p class="hint" data-hint>Pull the thread down. Click to let it go slack, again to pull it tight.</p>
    <p class="read" data-readout><span class="read__label">Sag</span> <b class="read__value" data-read>0 px</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 letters threaded on a string” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A paper-coloured sheet with two small black pegs at the sides, a third of the way down. A dotted guide draws itself in the middle, the pegs pop in with a little bounce and a thin black string runs straight from one to the other; as soon as it is tight it is let go and drops into its curve, a true catenary, with a swing that dies away. Then the letters of STRAND are threaded on from the left peg, the last one first: each runs along the string narrowed on the width axis, slows down, reaches its place widening out and gives a small nod of weight, and the string trembles just a little under it. At rest the word is spaced out along the whole string and every letter is turned like the curve where it sits. On the right, outside the string, a thin vermilion dimension measures how much it sags, and bottom right the same number in pixels. With a mouse, coming down onto the string catches it and pulls it down: the string becomes a V of two catenaries meeting under the pointer, the letters slide to the bottom, knock into each other and squash for a moment, and their neighbours feel the blow. Pulled too far the string slips off the pointer and rings; moving back above it lets it go. With a finger you grab it and drag it. A click turns the right peg, which lets the string out: it hangs much lower and the letters, which can no longer hold there, slide to the middle and bunch up into a tight word. The next click turns the peg back and pulls the string tight in one go: it snaps straight and rings, the letters all fly to their places together and land from the middle outwards with a small squash, then the string slowly goes back to its resting curve.

How it works

A worked-out catenary, not a drawn one

The curve of the string is the true one of a hanging chain, y = a·cosh(x/a): from the distance between the pegs and the length of the string the parameter a comes out of a bisection (the length is 2a·sinh(D/2a)), and the rest follows. SAG says how much it hangs at rest, and the length is worked out from that; the click that lets the string out only makes it longer, and the curve is rebuilt every frame. Writing the difference of two cosh as a product of two sinh keeps the sum exact even when the string is almost straight.

The pointer makes two catenaries

When the pointer presses on the string, the string becomes two pieces of catenary, from the peg to the pointer and from the pointer to the other peg. The pointer only pushes down and the string slides over it, so the horizontal pull is the same on both sides: one parameter a for both pieces, found by a bisection until the two lengths add up to the string. If the two straight pieces are already longer than the string, it is taut and stretches; beyond STRETCH it slips off.

The string that rings

On top of its resting curve the string can vibrate in its natural shapes, twelve sines between the pegs, each a damped spring with its own frequency (TWANG for the first, twice that for the second and so on). When the resting curve jumps (the string slips off the pointer, the click pulls it tight) the difference between the old and the new one is broken down into those sines: the string starts from where it was and swings towards its new shape. A letter landing or two letters knocking give a small blow at their point.

Letters that slide like beads

Every letter is a bead: it only has a position along the string and a speed, moved in steps of a two-hundred-and-fortieth of a second. The slope of the string where it sits gives the pull of gravity and the force pressing on the string gives the friction: while the slope stays under FRICTION the letter holds, then it slides with a slightly lower friction. Letters never pass each other: contacts are solved in pairs, with a small bounce only for hard knocks, and the distance grows when two neighbours are turned differently, so their feet never touch. Each letter is drawn turned like the string, and narrows on the wdth axis when it runs.

Directing the two clicks

The first click is a GSAP timeline that lengthens the string (the peg turns by as much string as it lets go) and hands the letters over to physics. The second shortens the string at once, hands the jump to the vibration, and takes every letter home with one expo.out tween, the same for all, so none overtakes another; then the nods from the middle outwards and the string going back to its curve with power2.inOut. In the end everything is exactly as before. With reduced motion the two scenes swap with a fade.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'STRAND'`	The word threaded on the string (up to 12 letters; capitals look best, since the string runs through the middle of their height).
`SAG`	script.js	`0.05`	How much the string sags at rest, as a share of the span between the pegs: 0 is pulled straight.
`SLACK`	script.js	`0.2`	How deep it hangs when a click lets it out: the deeper, the faster the letters slide to the middle.
`SPREAD`	script.js	`0.78`	How much of the string the word covers at rest: the higher, the more spaced out the letters and the further they slide.
`GRAVITY`	script.js	`2400`	How hard the letters slide down, in pixels per second squared.
`FRICTION`	script.js	`0.16`	How much the letters grip the string: 0.04 they slide at once, 0.5 they hardly move even on a steep string.
`STRETCH`	script.js	`0.1`	How far the string stretches under the pointer before it slips off and rings (0.1 = a tenth).
`TWANG`	script.js	`3`	The pitch of the vibration, in swings per second: low is a soft rubber band, high a guitar string.
`--weight`	style.css	`640`	The weight of the letters, from 200 to 800.

Try them in the Playground

When to use it

For a heading or a brand name you can touch: the opening of a portfolio or a design studio, the cover of a collection (jewellery, yarn, beads), an empty state or the 404 of an app, a playful moment in a landing page. It works with any short word.

On phones

The same physics with the sizes adapted: the letters cover a bigger share of the string and the pegs sit a few pixels from the edges. You grab and drag the string with a finger, a tap lets it go slack and the next tap pulls it tight.

With reduced motion

Nothing moves: the string, the pegs and the word fade in, and the pointer does not pull the string. A click fades out the string and the letters and brings them back with the string hanging low and the letters bunched in the middle; the next click brings back, again with a fade, the spaced-out word on the resting string.

Pitfalls

With the letters set tight as in a heading, a slack string changed almost nothing: they were all near the bottom already. At rest the word is spaced out along the string (SPREAD), so it travels as it slides and bunched up it becomes a tight word.
With a finger the string let go at once: you touch a little above it, and the check that releases the string when the pointer goes back above the curve fired on the first frame. A finger keeps hold and at most lets it rise back to its curve; the check only applies to a mouse passing over it.
Going home with staggered starts, the letters overtook each other, passing through one another. They all leave together with the same tween: between two positions with no overlaps, the same timing curve never creates one; the stagger stays in the nods on arrival.
Two neighbours turned differently (at the bottom of the V) touched with their feet even when their centres were far enough apart: the least distance grows with the sine of the angle between them.
Handing the whole jump of the string to the vibration, when the click pulls it tight, flung it above the pegs like a rubber band: only part of it goes over, enough to feel the snap.
The card's video stops when the picture stays the same for a second: vibrations under a thirtieth of a pixel are switched off altogether, and after the second click the string, the peg and the letters are exactly as before, so the video ends there.

Libraries

GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.

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