Attrezzi che cadono
Fisica, Hover
NuovaGratis
Torna alla libreria
I campanelli a vento
Uno scacciapensieri di tubi di metallo appeso alla trave del portico di una casa al mare: passandoci col puntatore i tubi oscillano come pendoli, urtano il battaglio e fra loro, e a ogni colpo partono archi di suono disegnati. Il vento arriva a raffiche e lo fa suonare da solo; un clic manda una raffica forte.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.
<!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
Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.
32 valori da cambiare
Oppure chiedila a Claude Code
Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:
Prendi «I campanelli a vento» da Animorio e adattala al mio sitoCosa fa
La parete di assi dipinte di una casa per le vacanze sul mare, Saltwind House, con a sinistra il suo nome e due righe, e sotto la trave del portico uno scacciapensieri: sette tubi di alluminio e di ottone appesi a un anello di legno, al centro il battaglio di legno e sotto, sul suo filo, una barchetta di legno con la vela a righe che prende il vento. All’arrivo la trave scende con lo scacciapensieri e rimbalza sulla corda, i tubi si mettono a dondolare e il primo colpo di vento arriva dal mare. Passando col puntatore i tubi si spostano come pendoli, urtano il battaglio e i vicini, e a ogni colpo dal tubo partono archi che si allargano e svaniscono, più grandi quanto più forte è il colpo; il tubo vibra e un lampo di luce lo percorre. Il vento soffia a raffiche da solo: spinge la barchetta, che si gira a guardarlo, e il battaglio suona i tubi; righe di vento attraversano la parete e sotto il testo il nome del vento sulla scala Beaufort cambia con la sua forza. Un clic manda una raffica forte dal lato del clic, e le parole del titolo si piegano e tornano su con un elastico.
Come funziona
Ogni pezzo è un pendolo
I tubi e il battaglio sono pendoli appesi all’anello. Di ognuno si tiene quanto si è spostato, di lato e verso di noi, misurato all’altezza del battaglio, e la sua velocità: a ogni passo la gravità lo riporta al centro, l’attrito lo frena un poco. Un tubo lungo ha un periodo più lento di uno corto. La fisica gira a 120 passi al secondo, a passo fisso.
Gli urti
Visto dall’alto ogni tubo è un cerchio, e anche il battaglio: se due cerchi si toccano e si stanno avvicinando, si scambiano la velocità lungo la linea che li unisce, con un rimbalzo (BOUNCE) e con il battaglio più pesante dei tubi. Due tubi si urtano in fondo al più corto. Poi si separano, così non restano uno dentro l’altro.
Le onde del suono
Ogni urto abbastanza forte diventa un’onda: dal centro del tubo partono tre archi a destra e tre a sinistra, uno dopo l’altro, che si allargano rallentando e svaniscono. La loro grandezza e il loro colore dipendono dalla forza del colpo; il tubo intanto vibra e un lampo di luce lo percorre. Fra due colpi dello stesso tubo passano almeno otto centesimi di secondo, così un tubo appoggiato al battaglio non fa onde a raffica.
Il puntatore e il vento
Il puntatore tira con sé il punto del tubo che tocca, misurato lungo la strada fatta nel fotogramma, così una passata veloce non salta i tubi; quelli davanti li spinge anche indietro, contro il battaglio. Il vento è un valore che una timeline di GSAP alza e abbassa a raffiche, con pause di calma: spinge soprattutto la barchetta, cioè il battaglio, con un tremolio, e un poco i tubi.
Il disegno
Tutto è disegnato su un canvas visto un poco dall’alto: l’anello e il battaglio sono ellissi con lo spessore, i tubi rettangoli con un gradiente metallico e la bocca aperta, ordinati da dietro in avanti a ogni fotogramma. Sulla parete c’è la loro ombra. La barchetta gira su se stessa schiacciandosi di lato e mostra il retro più scuro.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TUBES | script.js | 7 | Quanti tubi pendono intorno all’anello (da 3 a 12): più tubi, più colpi fra vicini. |
SWING | script.js | 1 | Quanto forte il puntatore spinge i tubi. |
GUSTS | script.js | 1 | La forza del vento che soffia da solo (0 = aria ferma). |
GUST_EVERY | script.js | 3 | Quanti secondi di calma, più o meno, fra due raffiche. |
DAMPING | script.js | 1 | Quanto in fretta lo scacciapensieri si calma: 0,3 lo lascia dondolare a lungo. |
BOUNCE | script.js | 0.6 | Quanto rimbalza un colpo: 0,9 fa saltare il battaglio come una palla, 0 lo appoggia. |
WAVES | script.js | 3 | Quanti archi di suono partono da ogni lato del tubo a ogni colpo. |
CLICK_GUST | script.js | 2.6 | La forza della raffica che parte col clic. |
--wave | style.css | #2a7d9c | Il colore degli archi del suono (i tubi sono --tube e --tube-warm, il legno --wood, la barchetta --sail, --stripe e --hull). |
Quando usarla
Per la prima pagina di una casa per le vacanze, un albergo sul mare, un negozio di cose per la casa o di strumenti, un festival all’aperto: un oggetto da toccare che suona senza audio e dà subito l’idea del vento e dell’estate.
Sul telefono
Lo scacciapensieri sta in alto, al centro, e il testo sotto. I tubi si muovono trascinando il dito fra loro; un tocco manda la raffica. La fisica, le onde e il vento sono gli stessi.
Con il movimento ridotto
Niente dondola e il vento non soffia: lo scacciapensieri sta fermo, già appeso. Il tubo sotto il puntatore si illumina e intorno compaiono e svaniscono i suoi archi, fermi; il clic fa comparire e svanire gli archi di tutti i tubi, uno dopo l’altro.
Trappole
- Un tubo spinto dal vento resta appoggiato al battaglio e a ogni passo lo «urta» di nuovo con una velocità minuscola: senza una soglia di forza e una pausa minima fra due colpi dello stesso tubo, le onde partirebbero a mitraglia.
- Se due corpi si toccano già (il vento li tiene premuti) e si scambia la velocità anche quando si stanno allontanando, si incollano: lo scambio si fa solo se si avvicinano, e la separazione si fa sempre.
- Un tubo e il battaglio sono pendoli diversi: l’urto va calcolato all’altezza giusta. Per il battaglio è la sua; fra due tubi è il fondo del più corto, dove lo spostamento è più grande in proporzione.
- Un puntatore che si muove veloce salta da una parte all’altra di un tubo in un fotogramma: si guarda tutta la strada fatta nel fotogramma, in cinque punti, non solo la posizione finale.
- Il video dell’anteprima e il Playground si fermano quando non c’è più niente di GSAP in programma: anche la calma fra due raffiche è un tween, così l’orologio non si ferma mai.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 10 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Da fare
Licenza d’uso
Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.
