Falling tools
Physics, Hover
NewFree
Back to the library
The band round the words
In the minimal style, on black: the topics of a journal scattered on the page and one thin vermilion rubber band round all of them. Near the pointer the band lets go and snaps round the words within reach: it stretches to catch a new one, snaps in when one is left out, overshoots by a hair and trembles to a stop, and the more it is stretched the thinner it gets. The words caught light up and take weight; underneath, their names and the sum of their notes.
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 band round the words</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<header class="top">
<span class="top__name">Marl</span>
<span class="top__note">A journal of making, by topic</span>
</header>
<!-- the topics of a journal scattered on the page, and one thin rubber band round them. The band lets go and snaps
round the topics near the pointer, stretching out to catch a new one and snapping in when one is left behind -->
<section class="field" aria-label="Topics" data-field>
<svg class="band" aria-hidden="true" data-band><path class="band__fill" data-fill></path><path class="band__line" data-line></path></svg>
<ul class="tags" data-tags></ul>
</section>
<div class="read" aria-live="polite">
<span class="read__win"><span class="read__names" data-names>All topics</span></span>
<span class="read__hint" data-hint>Move over the words</span>
<span class="read__win"><span class="read__count" data-count>0 notes</span></span>
</div>
</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.
54 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 band round the words” from Animorio and fit it into my siteWhat it does
On a nearly black ground there are eighteen scattered words, the topics of a crafts journal (Clay, Glaze, Paper, Ink, Wood, Glass…), each with a small number at the top saying how many notes it has, in a muted grey. When the page opens the words appear at random, rising a little, and from the middle a thin vermilion rubber band opens out of a knot and snaps round all of them, with rounded corners and the inside barely tinted. When the pointer comes near, the band lets go of the far words and closes round those within reach: it snaps in like a band let go, overshoots by a hair and trembles before it stops; moving, it stretches towards a new word coming in and snaps back when one is left out. The more the band is stretched, the thinner its line gets. The words caught turn white, take weight and width, and get a small knock as the band catches them; the others stay grey. Underneath, on the left, the names of the words caught roll in (Clay, Glaze, Kilns) and on the right the sum of their notes (50 notes); at rest All 18 topics and 266 notes. When the pointer goes away, the band goes back round everything.
How it works
Scattered words, always in the same places
The words sit on a loose grid: as many columns as fit with the widest word, and every word, in a shuffled order, is shaken inside its cell by a random amount. The randomness is a generator with a seed (SEED), so the words always fall in the same places. The sizes are measured at the weight of a caught word, so they do not touch when they grow; if the rows do not fit, the type size comes down.
The shape of the band
Round every caught word the points of a rounded rectangle are placed (PAD pixels of margin), and the convex hull of all the points is worked out with the monotone chain algorithm: it is the shape a real rubber band takes stretched round some nails. From the centre of the hull 96 rays are cast and for each one the place where it crosses the edge is found: that distance is its point’s target.
A ring of springs
The band is a ring of 96 points round a centre: every point has its own spring on its distance from the centre (SPRING, stiffness and damping) and the centre moves at its own pace too, so when the shape changes every part arrives a little earlier or later, like rubber. The springs run in fixed steps of 1/240 of a second in GSAP’s ticker; the curve goes through the points with a closed Catmull-Rom made of cubics.
The more stretched, the thinner
Every frame the length of the band is measured: the thickness goes from WIDTH[0] to WIDTH[1] with the square root of how long it is against the edge of the page, like rubber thinning as it is pulled. The caught words get a knock on a stiff spring (a little squash) as they come in.
Who gets in
The words whose rectangle is within REACH of the pointer get in (a share of the short side of the field); if there are none, the band goes back round all of them. Weight, width and colour of the words follow with a gentle change; the line at the bottom changes only when the choice does, and rolls inside its little windows.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
TOPICS | script.js | [['Clay', 24], ['Glaze', 17], …] | The topics: the word and how many notes it has. |
REACH | script.js | 0.17 | How far round the pointer the band catches the words, as a share of the field. |
SPRING | script.js | [170, 11] | The band’s spring: how stiff, and how much it is held back (less damping, more trembling). |
PAD | script.js | 14 | How much room the band leaves round the words, in pixels. |
WIDTH | script.js | [2.4, 0.9] | The band’s thickness at rest and fully stretched, in pixels. |
SEED | script.js | 7 | Changes where the words fall on the page. |
--accent | style.css | #ff5436 | The colour of the band. |
When to use it
For the topics of a blog or a magazine, for the filters of an archive, for the skills of a studio or a portfolio, for the categories of a shop: wherever a group of words is chosen together. Changing TOPICS turns it into any list of labels.
On phones
The same springs and the same band with adapted sizes: the words are laid out on fewer columns and the type size adapts. Drag a finger over the words and the band follows; lift it and the choice stays. The hint in the middle of the bottom line hides to leave room for the names.
With reduced motion
No springs and no trembling: the band takes its new shape straight away, the words change colour and weight without knocks and the line at the bottom changes with a fade. The page appears with the band already round all the words.
Pitfalls
- With a big reach the band caught eleven words out of eighteen and it was not clear what it was choosing: the reach came down to less than a fifth of the field, and it catches two to five.
- Casting the rays from the current centre, which is still travelling, put the centre outside the new shape and the rays did not find the edge: the targets are worked out from the centre of the new hull, and the points are drawn round the centre that is arriving.
- The words, measured at the light weight, touched as they grew: the grid is built with the sizes at the weight of a caught word.
Libraries
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 7.3 KB; the libraries: GSAP 28 KB.
Testing
Tested on 19 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.
