Falling tools
Physics, Hover
NewFree
Back to the library
The wind chime
A wind chime of metal tubes hanging from the porch beam of a seaside house: brushing it with the pointer the tubes swing like pendulums, knock the clapper and each other, and every knock sends out drawn sound arcs. The wind comes in gusts and plays it on its own; a click sends a strong gust.
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>Wind chime</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the porch beam the chime hangs from -->
<div class="beam" data-beam aria-hidden="true"></div>
<!-- the chime: metal tubes, a wooden ring, the clapper and the little boat that catches the wind -->
<canvas class="chime" data-chime aria-hidden="true"></canvas>
<section class="copy" data-copy>
<p class="copy__kicker" data-in>Saltwind House</p>
<h1 class="copy__title" data-in data-title>Rooms that listen to the sea</h1>
<p class="copy__line" data-in>Four rooms above the dune, a porch facing the tide and a chime that tells you the weather before you open the shutters.</p>
<p class="copy__wind" data-in>
<span class="copy__label">Wind on the porch</span>
<span class="copy__beaufort" data-beaufort aria-live="polite"><span class="copy__word">light air</span></span>
</p>
<p class="copy__open" data-in>Open from April to October</p>
</section>
<!-- a click anywhere sends a gust; the button is there for the keyboard -->
<button class="gust" type="button" aria-label="Send a gust of wind through the chime" data-gust></button>
<p class="hint" data-hint>Brush the tubes. Click for a gust.</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.
32 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 wind chime” from Animorio and fit it into my siteWhat it does
The painted clapboard wall of a holiday house by the sea, Saltwind House, with its name and two lines on the left, and under the porch beam a wind chime: seven aluminium and brass tubes hung from a wooden ring, the wooden clapper in the middle and, under it on its cord, a little wooden boat with a striped sail that catches the wind. On arrival the beam drops in with the chime and bounces on its cord, the tubes start swinging and the first gust comes in from the sea. Brushing them with the pointer the tubes move like pendulums, knock the clapper and their neighbours, and every knock sends arcs out of the tube that widen and fade, bigger the harder the knock; the tube trembles and a flash of light runs along it. The wind blows in gusts on its own: it pushes the little boat, which turns to face it, and the clapper plays the tubes; lines of wind cross the wall and under the copy the name of the wind on the Beaufort scale changes with its strength. A click sends a strong gust from the side of the click, and the words of the title bend and spring back with an elastic.
How it works
Every piece is a pendulum
The tubes and the clapper are pendulums hung from the ring. For each one we keep how far it has swung, sideways and towards us, measured at the height of the clapper, and its speed: at every step gravity pulls it back to the middle and friction slows it a little. A long tube swings more slowly than a short one. The physics runs at 120 steps a second, at a fixed step.
The knocks
Seen from above every tube is a circle, and so is the clapper: if two circles touch while moving closer, they swap speed along the line between them, with a bounce (BOUNCE) and with the clapper heavier than the tubes. Two tubes knock at the bottom of the shorter one. Then they are moved apart, so they never stay inside each other.
The sound waves
Every knock hard enough becomes a wave: three arcs leave the middle of the tube to the right and three to the left, one after the other, widening as they slow down and fading. Their size and strength follow the strength of the knock; meanwhile the tube trembles and a flash of light runs along it. At least eight hundredths of a second pass between two knocks of the same tube, so a tube resting on the clapper does not fire waves in a burst.
The pointer and the wind
The pointer drags along the point of the tube it touches, measured along the path travelled in the frame, so a fast sweep does not skip tubes; the tubes in front are also pushed back, into the clapper. The wind is a value a GSAP timeline raises and lowers in gusts, with calm pauses: it pushes mostly the little boat, so the clapper, with a flutter, and the tubes a little.
The drawing
Everything is drawn on a canvas seen a little from above: the ring and the clapper are ellipses with a thickness, the tubes are rectangles with a metal gradient and an open mouth, sorted from back to front on every frame. Their shadow falls on the wall. The little boat turns round squeezing sideways and shows its darker back.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
TUBES | script.js | 7 | How many tubes hang round the ring (3 to 12): more tubes, more knocks between neighbours. |
SWING | script.js | 1 | How hard the pointer pushes the tubes. |
GUSTS | script.js | 1 | The strength of the wind that blows on its own (0 = still air). |
GUST_EVERY | script.js | 3 | How many seconds of calm, more or less, between two gusts. |
DAMPING | script.js | 1 | How fast the chime calms down: 0.3 lets it swing for a long time. |
BOUNCE | script.js | 0.6 | How springy a knock is: 0.9 makes the clapper bounce like a ball, 0 just leans it. |
WAVES | script.js | 3 | How many sound arcs leave each side of the tube at every knock. |
CLICK_GUST | script.js | 2.6 | The strength of the gust a click sends. |
--wave | style.css | #2a7d9c | The colour of the sound arcs (the tubes are --tube and --tube-warm, the wood --wood, the little boat --sail, --stripe and --hull). |
When to use it
For the first page of a holiday house, a seaside hotel, a shop of home things or instruments, an open-air festival: an object to touch that plays without audio and straight away brings the wind and the summer.
On phones
The chime hangs at the top, in the middle, with the copy below. The tubes move as you drag a finger through them; a tap sends the gust. The physics, the waves and the wind are the same.
With reduced motion
Nothing swings and the wind does not blow: the chime stays still, already hung. The tube under the pointer lights up and its arcs fade in and out round it, still; a click fades the arcs of every tube in and out, one after the other.
Pitfalls
- A tube pushed by the wind stays leaning on the clapper and “knocks” it again at every step with a tiny speed: without a minimum strength and a short pause between two knocks of the same tube, the waves would fire like a machine gun.
- If two bodies are already touching (the wind keeps them pressed) and speed is swapped even while they move apart, they stick: the swap only happens when they move closer, while separating them always happens.
- A tube and the clapper are different pendulums: the knock must be worked out at the right height. For the clapper it is its own; between two tubes it is the bottom of the shorter one, where the swing is bigger in proportion.
- A fast pointer jumps from one side of a tube to the other within one frame: the whole path travelled in the frame is checked, at five points, not just the final position.
- The preview video and the Playground stop when nothing from GSAP is scheduled: the calm between two gusts is a tween too, so the clock never stops.
Libraries
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 12 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.
