Words that melt into each other
Text, Scroll, SVG
NewFree
Back to the library
The rope title
A wooden spool drops and spins, and a twisted rope runs off it and writes the title in joined-up script, all in one line; wherever the rope crosses itself a knot forms and snaps tight, and the frayed end swings. Then someone pulls the end: the rope runs out through its own letters and it all starts again. A click pulls the end.
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>The rope title</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="scena" data-scene>
<!-- the title, for screen readers: the rope only draws it -->
<h1 class="leggibile" data-reader>Bowline. Ropes, sails and rigging</h1>
<!-- the stage: the script sizes it to the window and draws the spool, the rope, the knots and their shadows -->
<svg class="palco" data-stage aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%" data-blur>
<feGaussianBlur stdDeviation="4" data-blur-amount />
</filter>
<radialGradient id="brass" cx="38%" cy="34%" r="70%">
<stop offset="0" class="t-brass-light" />
<stop offset="0.55" class="t-brass" />
<stop offset="1" class="t-brass-dark" />
</radialGradient>
<radialGradient id="wood" cx="42%" cy="38%" r="68%">
<stop offset="0" class="t-wood-light" />
<stop offset="0.7" class="t-wood" />
<stop offset="1" class="t-wood-dark" />
</radialGradient>
</defs>
<!-- the shadows of everything, blurred once -->
<g class="ombre" filter="url(#soft-shadow)" data-shadows>
<circle data-spool-shadow />
<path class="ombra-corda" data-rope-shadow />
<g data-knot-shadows></g>
</g>
<!-- the spool, seen face on: the wooden flange, the coils of rope still on it and the brass hub -->
<g data-spool>
<g data-spool-body>
<g data-spool-turn>
<circle class="flangia" data-flange />
<g class="venature" data-grain></g>
<g data-holes></g>
</g>
<g data-coils>
<path class="corda-fondo" data-coil-base />
<path class="corda-trefoli" data-coil-strands />
<path class="corda-luce" data-coil-light />
</g>
<g data-hub-turn>
<circle class="mozzo" data-hub />
<path class="mozzo-taglio" data-hub-slot />
</g>
</g>
</g>
<!-- the rope: a dark core, the twisted strands, the light on every strand, the frayed tip and the whipped end -->
<g data-rope>
<path class="corda-fondo" data-rope-base />
<path class="corda-trefoli" data-rope-strands />
<path class="corda-luce" data-rope-light />
<path class="sfilacci" data-fray />
<path class="legatura" data-whip />
</g>
<!-- the knots where the rope crosses itself, and the dots of the i and the j -->
<g data-knots></g>
</svg>
<p class="sotto" data-sub>Ropes, sails & rigging since 1962</p>
<p class="nota" data-hint>Click to pull the end</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.
25 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 rope title” from Animorio and fit it into my siteWhat it does
On a dark harbour-blue background a wooden spool seen face on drops from above, with its grain, its holes and its brass hub with a cross: it bounces, squashes for a moment and rocks before it settles. It holds four turns of hemp rope. The spool starts to turn and the rope runs off the top: the twisted strands slide along the rope as it moves, the frayed end goes first with its fibres fanned out, and the rope writes, in joined-up script and all in one line, the name of a made-up chandlery, «bowline». It makes the loops of the b and the l, goes round the o and the e, and every time it passes over a stretch it has already written a knot is tied there: it appears loose, turns on itself and snaps tight with a bounce and a puff of fibres. The dot of the i is a small knot that drops from above and bounces into place. Meanwhile the turns on the spool run down and the holes in the wood show through. The last stretch of rope is flung out, then falls and swings like a pendulum that dies down; under the title the letters of the line «Ropes, sails & rigging since 1962» rise one after another, widening as they come. At rest the end still swings a little. Then someone pulls the end: the hanging stretch is yanked straight to the right, the knots loosen and vanish, the dot of the i falls, the line underneath slides away, and the rope runs out through its own letters faster and faster while the spool spins wildly. When the spool is empty the other end, whipped with three turns of twine, comes free and follows the rest; the spool hops and rolls away to the left, and it all starts again. A click pulls the end at once (if the rope is still writing, it finishes quickly and is then pulled).
How it works
A script to write with rope
The letters do not come from a typeface: they are a joined-up script drawn for the demo, a to z, each an SVG path made only of curves (M and C) 100 units tall at the x-height. Every letter starts where the rope comes in and ends where it leaves; between letters the script adds a curve that sets off in the direction of the exit and arrives in the direction of the entry, so the word is a single line. The curves are flattened into evenly spaced points, and the places where the line crosses itself become the knots.
The twisted rope
The rope is drawn from scratch on every frame on three paths: the dark core (the line of points with a thick stroke), the strands and the light on the strands. Every strand is a slanted lens: four corners taken on the two edges of the rope, shifted along the line, with two curves bulging forwards and backwards; on top there is a thinner, lighter lens. The strands sit at a fixed pitch counted from the tip, so when the rope moves they slide with it. Underneath, the same line with a blur filter makes the shadow.
The spool
The rope still on the spool is drawn with the same function, but along circles: as many full turns as are left and a last partial turn that ends at the top, where the rope leaves. The spool turns by the rope paid out divided by the radius, and the rope's first curve starts from the outermost turn: as the spool empties, the start drops towards the hub and the holes in the wood show through. The state is one object (rope paid out, swing of the end, position of the spool) that the GSAP timeline moves and one function draws.
The knots and the swinging end
For every crossing the timeline works out when the tip passes over it, by inverting the ease of the run, and adds the knot there: a ring of rope, again drawn with the same function, that appears loose, turns and snaps tight with back.out, while a puff of fibres spreads around it. The last stretch, the hanging end, is kept as a list of directions: the swing bends them more towards the tip, so its length stays right. It is flung out while it is written and falls back with elastic.out.
Pulling the end
Pulling means straightening the end towards the right and then letting the rope run: after the end the line carries on straight off the screen, and the rope paid out grows with power2.in. The other end stays on the spool while there is rope, then follows at a fixed distance; from then on the first curve keeps its shape, so the spool can roll away without dragging the rope. A click while writing speeds the timeline up and, once it reaches the rest, takes it straight to the pull. With reduced motion the finished title fades in and out.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
TITLE | script.js | 'bowline' | The word the rope writes: letters a to z and spaces (capitals become lower case, other signs are skipped). |
SUBTITLE | script.js | 'Ropes, sails & rigging since 1962' | The line under the title, which rises letter by letter (empty = no line). |
SPEED | script.js | 1 | How fast the rope runs, while writing and while being pulled: 2 twice as fast, 0.5 half. |
ROPE | script.js | 1 | How thick the rope (and the spool) is: 1.4 a fat mooring line, 0.7 a thin cord. |
KNOTS | script.js | true | Ties a knot where the rope crosses itself (off: the rope just passes over itself). |
REST | script.js | 2.6 | How many seconds the finished title stays before someone pulls the end. |
When to use it
To open the site of a chandlery, a sailmaker, a mountain hut or a climbing shop, a brand of bags or outdoor clothing, a harbour bar; for a handmade title that shows up and leaves again, on a holding page or in a post.
On phones
The same animation with the sizes adapted: the word takes the whole width, the spool sits below on the left and the rope climbs from there to the first letter, with the line under the spool. Rope, knots and fibres shrink with the screen. A tap pulls the end.
With reduced motion
Nothing moves: the rope title fades in already written, with its knots tight, the spool and the line underneath, stays for a few seconds and fades out; then it starts again. A click makes it fade at once.
Pitfalls
- Letters with sharp points (the foot of the n, the bottom of the b, the middle of the w) sent the rope back over the same line: the strands crumpled and a dark smudge was left. Every point became a U-turn as wide as the rope, or a small loop.
- The tip measured from the start of the path moved when the spool dropped or emptied, because the first curve changed length: bits of rope appeared from nowhere. The state keeps the rope paid out, and the tip is the start of the curve plus that length.
- When the spool rolls away, the first curve followed it and dragged the rope: as soon as the spool is empty the curve keeps its shape.
- A click while the rope is writing cannot jump to the pull (it would complete the writing and the knots at once): the timeline speeds up and, at the rest, jumps to the pull.
- The hanging stretch, turned as a whole round its joint, stretched and broke: it is kept as a list of directions, and the swing grows towards the tip.
- Knots timed to the writing: with a non-linear ease the right moment is found by inverting the curve with a halving search, not with a proportion.
Libraries
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 13 KB; the libraries: GSAP 28 KB.
Testing
Tested on 10 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.
