Attrezzi che cadono
Fisica, Hover
NuovaGratis
Torna alla libreria
La tenda di perline
Una tenda di fili di perline di legno, vetro e conchiglie davanti alla porta di un chiosco sulla spiaggia: passandoci col puntatore i fili dondolano come pendoli, si urtano e si calmano piano, e il tramonto disegnato dalle perline si deforma. Un clic la attraversa.
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>Bead curtain</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 front of a little beach kiosk: the painted sign, the doorway and the sand -->
<header class="sign" data-sign>
<p class="sign__line">Beach kiosk on the north dune</p>
</header>
<div class="door" data-door>
<!-- inside, behind the curtain: the title and the menu board -->
<div class="inside" data-inside>
<div class="inside__glow" data-glow aria-hidden="true"></div>
<h1 class="inside__title" data-title>Driftwood Shack</h1>
<p class="inside__line" data-line>Cold drinks, grilled fish and a hammock in the shade.</p>
<p class="inside__board" data-board>Open till sunset</p>
</div>
<div class="door__frame" aria-hidden="true"></div>
</div>
<!-- a surfboard leaning on the wall and a potted agave, drawn by hand -->
<svg class="prop prop--board" viewBox="0 0 60 260" aria-hidden="true" focusable="false" data-board-prop>
<path class="board__body" d="M30 4 C48 40 54 120 50 200 C48 236 40 254 30 256 C20 254 12 236 10 200 C6 120 12 40 30 4 Z"/>
<path class="board__stripe" d="M14 120 C24 116 36 116 47 120 L47 132 C36 128 24 128 13 132 Z"/>
<path class="board__line" d="M30 14 L30 246"/>
</svg>
<svg class="prop prop--plant" viewBox="0 0 120 150" aria-hidden="true" focusable="false" data-plant>
<g class="plant__leaves" data-leaves>
<path d="M60 96 C52 70 40 44 20 28 C38 52 46 76 52 98 Z"/>
<path d="M60 96 C58 64 60 34 66 8 C70 36 68 66 66 98 Z"/>
<path d="M62 98 C70 72 86 50 108 38 C88 58 76 80 70 100 Z"/>
<path d="M58 100 C46 88 28 82 8 82 C28 90 42 96 54 104 Z"/>
<path d="M64 100 C78 90 96 88 114 92 C94 96 80 100 68 106 Z"/>
</g>
<path class="plant__pot" d="M34 100 L86 100 L80 146 L40 146 Z"/>
<path class="plant__rim" d="M30 96 L90 96 L90 106 L30 106 Z"/>
</svg>
<div class="sand" aria-hidden="true"></div>
<!-- the curtain: one canvas over the whole front, so a strand can swing past the frame -->
<canvas class="curtain" data-curtain aria-hidden="true"></canvas>
<!-- the doorway is a button: a click (or Enter) walks through the curtain -->
<button class="walk" type="button" aria-label="Walk in through the bead curtain" data-walk></button>
<p class="hint" data-hint>Brush the curtain with the pointer. Click to walk in.</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.
31 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 «La tenda di perline» da Animorio e adattala al mio sitoCosa fa
La facciata di un piccolo chiosco sulla spiaggia, con la porta aperta e dentro, al buio, il nome del locale. Davanti alla porta pende una tenda di fili di perline: perline di legno tornito, perline di vetro e conchiglie in fondo a ogni filo, e tutte insieme disegnano un sole che tramonta sul mare. All’arrivo i fili cadono dal bastone e si distendono rimbalzando, poi un primo cliente entra. Passando col puntatore i fili si scostano come pendoli a catena, urtano quelli vicini, dondolano e si fermano piano, e il disegno del sole si piega con loro. Le perline girano su se stesse mentre dondolano e il vetro manda piccoli riflessi. Un clic attraversa la tenda: i fili si aprono di lato al centro, il titolo dentro salta lettera per lettera, e poi la tenda si richiude dondolando.
Come funziona
Ogni filo è una catena di punti
Ogni perlina è un punto con la posizione di adesso e quella di prima (Verlet): la differenza è la sua velocità, che perde un poco a ogni passo, più la gravità. Il primo punto sta inchiodato al bastone. La fisica gira a 120 passi al secondo, a passo fisso, qualunque sia lo schermo.
Il filo tira, le perline si toccano
Fra due perline il filo tira solo quando è teso, come uno spago vero; se si avvicinano troppo le perline si spingono via. Le perline urtano quelle del filo vicino, e una regola semplice tiene i fili in ordine da sinistra a destra, così non si attraversano e non si annodano.
Il puntatore spinge
Il puntatore è un cerchio: le perline dentro vengono spinte fuori e si portano dietro un po’ del suo movimento, misurato lungo la strada fatta nel fotogramma, così una passata veloce non salta i fili. Spostare la posizione in Verlet vuol dire darle velocità: il filo parte da solo.
Il disegno e la luce
Il colore di ogni perlina si sceglie una volta sola guardando dove sta a riposo nella porta: dentro il cerchio del sole, sui raggi, nel mare. Quando i fili si muovono il disegno si deforma da sé. Ogni tipo di perlina è disegnato prima in 16 vedute girate; quando la perlina rotola si prende la veduta dopo, e il vetro accende un riflesso a quattro punte quando corre.
Attraversare
Al clic una timeline di GSAP apre un varco al centro, largo come una persona e più stretto in alto: le perline dentro il varco vengono spostate al suo bordo. Il varco si richiude piano e i fili tornano al loro posto dondolando; intanto le lettere del titolo saltano con un elastico e la luce dentro si scalda.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
STRANDS | script.js | 24 | Quanti fili pendono nella porta (al telefono sei decimi). |
BEADS | script.js | 22 | Quante perline su ogni filo: più perline, più piccole. |
SWING | script.js | 1 | Quanto forte il puntatore spinge i fili. |
DAMPING | script.js | 1 | Quanto in fretta i fili si calmano: 0,3 li lascia dondolare a lungo. |
BREEZE | script.js | 1 | La brezza che muove appena la tenda da sola (0 = niente). |
OPEN | script.js | 1 | Quanto si apre la tenda quando la si attraversa. |
FIGURE | script.js | 'sun' | La figura delle perline: 'sun' (tramonto sul mare), 'wave' (un’onda) o 'plain' (solo legno e conchiglie). |
--sun | style.css | #f5b433 | Il colore delle perline del sole (i raggi sono --ray, il mare --sea e --deep, il legno --wood e --wood-dark, le conchiglie --shell). |
Quando usarla
Per l’ingresso di un sito estivo: un bar sulla spiaggia, uno stabilimento, un festival, un negozio di cose fatte a mano. La tenda è la porta: si gioca prima di entrare.
Sul telefono
Ci sono meno fili, più grandi, e si spostano trascinando il dito sulla tenda; un tocco la attraversa. La porta è più stretta e la tavola da surf e la pianta spariscono, ma la fisica è la stessa.
Con il movimento ridotto
La tenda sta ferma, già appesa. Le perline vicine al puntatore sbiadiscono un poco per lasciar vedere dentro, e il clic fa solo sbiadire tutta la tenda per un momento.
Trappole
- Se due fili si urtano solo perlina contro perlina, una spinta forte li fa passare uno attraverso l’altro e restano annodati: una regola in più tiene ogni perlina a destra della stessa perlina del filo prima.
- Con le perline ammucchiate tutte nello stesso punto la regola «non toccarti» le fa esplodere in direzioni a caso: per la caduta iniziale si partono già in fila, a contatto, e i fili non urtano i vicini finché non si sono distesi.
- Uno spostamento grande in un passo diventa una velocità enorme e lancia i fili fuori dalla porta: la velocità ha un tetto e gli stipiti fermano i fili.
- Disegnare ogni perlina con i suoi gradienti a ogni fotogramma costa troppo: ogni tipo si disegna una volta in 16 vedute su piccoli canvas, e poi si copia ruotato con drawImage.
- La fisica legata al fotogramma va veloce su uno schermo a 120 Hz e lenta a 60: si accumula il tempo e si fanno passi fissi di 1/120 di secondo, al massimo otto per fotogramma.
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 11 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.
