L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
Il pulsante delle bandierine
L'RSVP di una festa di compleanno, Count me in, con un festone di bandierine di stoffa che pende morbido sotto la pillola color lampone: triangoli corallo, sole, menta, rosa e panna con una fila di punti lungo l'orlo. Sotto il puntatore una brezza le scompiglia; al clic il filo viene issato in tre strattoni mentre la risposta parte, poi un ultimo tiro lo tende di colpo, lo schiocco corre lungo il filo e ogni bandierina sbatte. Il filo è una catena di 36 punti calcolata a ogni fotogramma e ogni bandierina ha le sue due oscillazioni. Dopo un momento il filo torna giù.
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>The bunting button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the bunting button: the RSVP of a birthday party, with a string of cloth pennants hanging in a slack swag from
under the pill. Under the pointer a breeze ruffles them; a click hoists the string in a few heaves while the
answer goes, it snaps taut and every pennant whips and flaps, and the pill says you are on the list. A moment
later the string is let down again -->
<div class="bunting" data-bunting>
<div class="bunting__unit">
<!-- the string and its pennants, drawn by script.js behind the pill, so the string comes out from under it -->
<svg class="bunting__art" aria-hidden="true" data-art></svg>
<button class="bunting__btn" type="button" data-btn data-autoclic>
<span class="bunting__fill" aria-hidden="true"></span>
<span class="bunting__faces">
<span class="bunting__face" data-face="rest">
<span class="bunting__word" data-wide="Count me in" data-rest-text>Count me in</span>
<span class="bunting__date" data-rest-date>Sat 8 pm</span>
</span>
<span class="bunting__face bunting__face--two" data-face="busy" aria-hidden="true">
<span class="bunting__small" data-busy-small>Mia turns 30</span>
<span class="bunting__big" data-busy-text>Sending your RSVP</span>
</span>
<span class="bunting__face bunting__face--two" data-face="done" aria-hidden="true">
<span class="bunting__big" data-done-text>You’re on the list</span>
<span class="bunting__small" data-done-small>Sat 8 pm · bring a song</span>
</span>
</span>
</button>
</div>
<p class="sr" aria-live="polite" data-live></p>
</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
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.
22 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 «Il pulsante delle bandierine» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola color lampone alta 60 pixel, con un filo di luce in alto e un'ombra morbida sotto; a sinistra Count me in in Anybody color crema e accanto la data Sat 8 pm in rosa. Da sotto la pillola, legato dietro le sue due punte, pende un filo lampone in un festone morbido con sette bandierine di stoffa: corallo, sole, menta, rosa e panna, ognuna con una fila di punti bianchi lungo l'orlo e una piega leggera in mezzo, e una piccola ombra. Passando sopra la pillola la scritta si allarga, il fondo si gonfia con un rimbalzo e una brezza scompiglia le bandierine: sbattono avanti e indietro, accorciandosi e scurendosi quando si girano, e il filo ondeggia. Al clic la pillola dice Mia turns 30 e Sending your RSVP, e il filo viene issato in tre strattoni: a ogni strattone sale, rimbalza e le bandierine dondolano; poi un ultimo tiro lo tende di colpo, la pillola sussulta, lo schiocco corre lungo il filo da sinistra a destra e ogni bandierina sbatte una dopo l'altra. Il festone resta teso appena sotto la pillola e la pillola dice You're on the list · Sat 8 pm · bring a song. Dopo un momento il filo viene lasciato andare e torna giù nel suo festone, dondolando. Con la tastiera il fuoco mostra un anello e fa scompigliare le bandierine; Invio o Spazio rispondono. Al telefono il tocco dà uno strattone al filo e risponde.
Come funziona
Il filo: 36 punti con Verlet
Il filo è una catena di 36 punti legati dietro le due punte della pillola, calcolata con l'integrazione di Verlet: ogni punto tiene la sua velocità come differenza fra dove è e dove era, la gravità lo tira giù, un poco d'aria lo frena, e venti passate di vincoli rimettono ogni maglia alla sua lunghezza. La lunghezza delle maglie viene da quanto è lento il filo (SLACK, la lunghezza sulla distanza fra i nodi): cambiandola, il filo si allenta o si tende da solo, con la sua inerzia. Un SVG dietro la pillola lo disegna come una curva liscia di quadratiche fra i punti medi.
Le bandierine appese al filo
Ogni bandierina sta su tre maglie: il suo orlo segue la curva del filo e la punta scende perpendicolare all'orlo. Ha due oscillazioni sue: di lato, un pendolo spinto al contrario quando il filo strattona di lato (θ'' = −(g / l) sin θ − c θ' − a / l); avanti e indietro sull'orlo, uno sbattere spinto dagli scossoni verticali del filo e dalla brezza. Lo sbattere si vede come prospettiva: girata, la bandierina sembra più corta, si scurisce e la sua piega si segna di più. L'accelerazione di ogni punto si misura a ogni passo dalla differenza delle sue velocità.
Issare e tendere
Al clic una timeline di GSAP accorcia il filo in tre strattoni da 0,16 secondi ogni 0,38: a ogni strattone il filo sale e rimbalza per conto suo. Poi un ultimo tiro lo porta un capello oltre la lunghezza tesa e lo lascia tornare: è lo schiocco. Nello stesso momento ogni bandierina riceve un colpo di sbattere, una dopo l'altra a 35 millesimi di distanza, alternando il verso, così lo schiocco corre lungo il filo. Il ritorno è la stessa cosa al contrario: il filo si riallunga in 0,9 secondi e ricade nel suo festone dondolando.
La brezza
Sotto il puntatore una brezza sale e scende piano: sul filo è una spinta laterale a onde lente lungo la sua lunghezza, sulle bandierine due onde con periodi diversi e una fase diversa per ognuna, così non sbattono mai tutte insieme. Quando la brezza cala e niente si muove più, il ciclo di GSAP smette di disegnare.
Gli stati
Tre facce sovrapposte larghe quanto le parole (a riposo, mentre risponde, in lista); la pillola si misura una volta sulla più larga e il disegno del filo prende la sua larghezza. Il pulsante è un button vero con aria-disabled mentre il filo è su, una zona aria-live che dice Sending your RSVP… e poi You're on the list. Mia turns 30, Sat 8 pm, bring a song., e l'aria-label che cambia con lo stato.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Count me in | La scritta a riposo. |
WHEN | script.js | Sat 8 pm | La data accanto alla scritta, e di nuovo sotto quando si è in lista. |
PARTY | script.js | Mia turns 30 | La riga piccola mentre la risposta parte: di chi è la festa. |
SENDING | script.js | Sending your RSVP | La scritta mentre il filo viene issato; la dice anche la zona aria-live. |
DONE | script.js | You’re on the list | La scritta quando il filo è teso. |
NOTE | script.js | bring a song | La riga piccola sotto, dopo la data: un'indicazione per la festa. |
FLAGS | script.js | 7 | Quante bandierine pendono dal filo. |
SLACK | script.js | 1.07 | Quanto pende il filo a riposo: la sua lunghezza sulla distanza fra i nodi. 1,03 quasi teso, 1,14 un festone profondo. |
HOLD | script.js | 2.8 | I secondi che il filo resta teso prima di tornare giù. |
BREEZE | script.js | 1 | Quanto la brezza sotto il puntatore scompiglia le bandierine: 0 restano ferme. |
Quando usarla
Per l'RSVP di un invito a una festa, a un compleanno, a un matrimonio, a una cena fra amici o all'inaugurazione di un negozio, per un I'm going di un evento o un Join the party di una community. Il pulsante finge la risposta: in un sito vero il clic manda la risposta e il filo si tende quando il server conferma.
Sul telefono
La pillola è larga circa 250 pixel e il festone pende al massimo una quarantina di pixel sotto di lei: a 390 pixel ci sta. Il tocco dà uno strattone al filo, schiaccia il fondo e risponde. Le bandierine restano della loro misura.
Con il movimento ridotto
Il filo non si muove e le bandierine non sbattono: quando la risposta è confermata il festone svanisce in dissolvenza e ricompare teso, e quando torna giù svanisce e ricompare nel suo festone. Le scritte arrivano in dissolvenza, la pillola non si gonfia e la scritta non si allarga (sotto il mouse il fondo si schiarisce appena).
Trappole
- Con la scritta che sotto il puntatore passava dal 80 al 112% di larghezza, la copia invisibile che tiene il posto alla scritta larga lasciava un buco di un centinaio di pixel fra Count me in e la data. Ora va dal 92 al 106%: si vede allargarsi, e la data le resta vicina.
- Teso a 1,012 volte la distanza fra i nodi, il filo spariva quasi tutto dietro la pillola e le bandierine ai lati restavano mezze coperte. Ora teso vuol dire 1,02: il festone resta un poco curvo, appena sotto il bordo.
Librerie
GSAP 3.15.0, Anybody (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
