Il rullo delle ore
Selettori, 3D, Fisica
NuovaGratis
Tutti i componenti
Il pulsante a coriandoli
Premendo Claim reward il regalo nel pulsante trema, si apre e lancia una nuvola di coriandoli di carta in 3D. Le strisce girano sul loro asse lungo e scartano di lato, i quadratini ondeggiano e planano come foglie, la lamina d'oro brilla quando prende la luce e le stelle filanti arricciate si srotolano in aria; tutto ricade davanti e dietro il pulsante e si posa in fondo alla finestra con la sua ombra.
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 confetti button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the paper is drawn on two canvases: the one behind the button holds what flies or lies behind it, the one in
front holds the rest -->
<canvas class="paper paper--back" data-back aria-hidden="true"></canvas>
<main class="stage">
<!-- the confetti button: pressed, the gift in it opens. The paper bursts out of the gift, turns and glides in the
air and settles at the bottom of the window -->
<div class="confetti" data-confetti>
<button class="claim" type="button" aria-label="Claim reward, 500 points" data-claim data-autoclic>
<span class="claim__shine" aria-hidden="true"></span>
<span class="claim__face">
<svg class="claim__gift" viewBox="0 0 24 24" aria-hidden="true">
<g data-box>
<rect class="gift__box" x="4.6" y="11.2" width="14.8" height="9.8" rx="1.5"/>
<rect class="gift__band" x="10.7" y="11.2" width="2.6" height="9.8"/>
</g>
<g data-lid>
<path class="gift__bow" d="M12 7.6C10.5 4.7 7.1 3.7 6.5 5.7 6 7.4 9 7.6 12 7.6zM12 7.6c1.5-2.9 4.9-3.9 5.5-1.9.5 1.7-2.5 1.9-5.5 1.9z"/>
<rect class="gift__lid" x="3.4" y="7.4" width="17.2" height="4.2" rx="1.3"/>
<rect class="gift__band" x="10.7" y="7.4" width="2.6" height="4.2"/>
</g>
<path class="claim__check" d="M5.2 12.4l4.4 4.4 9.2-9.6" pathLength="1" data-check/>
</svg>
<span class="claim__labels" aria-hidden="true">
<span class="claim__label" data-label>Claim reward</span>
<span class="claim__label" data-label>Opening your gift…</span>
<span class="claim__label" data-label>+<span data-points>500</span> points</span>
</span>
</span>
</button>
<p class="sr" aria-live="polite" data-live></p>
</div>
</main>
<canvas class="paper paper--front" data-front aria-hidden="true"></canvas>
<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.
24 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 a coriandoli» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco un pulsante scuro con un pacchetto regalo giallo e la scritta Claim reward. Col mouse sopra una luce attraversa il pulsante e il coperchio del regalo si alza a sbirciare. Premendo, la scritta diventa Opening your gift… e il regalo trema sempre più forte per poco meno di un secondo; poi il coperchio salta e dal regalo esplodono 150 coriandoli e 7 stelle filanti. Salgono quasi fino in cima alla finestra aprendosi a ventaglio, alcuni verso chi guarda e altri lontano, che il pulsante copre quando gli passano dietro. Le strisce colorate girano veloci sul loro asse lungo e la rotazione le fa scartare di lato; i quadratini e i dischetti ondeggiano avanti e indietro planando come foglie; i pezzi di lamina d'oro lampeggiano quando si girano verso la luce; le stelle filanti, arricciate a spirale, si srotolano e ondeggiano cadendo. Ogni pezzo cambia colore col suo angolo: chiaro quando guarda la luce in alto a sinistra, più scuro di taglio o girato. Tutto ricade e si posa in fondo alla finestra, con un'ombra che si scurisce mentre scende. Intanto il pulsante diventa giallo con una spunta che si disegna e i punti che salgono fino a +500 points. Dopo quattro secondi la carta posata svanisce in dissolvenza e il pulsante torna pronto.
Come funziona
Ogni coriandolo è una lastrina in 3D
Ogni pezzo ha posizione, velocità, un orientamento (un quaternione) e una rotazione. L'aria lo frena in due modi diversi: tanto contro la faccia larga (0,05 per la velocità al quadrato) e poco lungo il suo piano (0,003): per questo un pezzo inclinato non cade dritto ma scivola di lato e plana. Lo scoppio è una corrente d'aria che esce dal regalo e si spegne in 0,15 secondi: i pezzi la seguono e poi ne escono, così si aprono a ventaglio invece di partire come proiettili.
Strisce che girano, foglie che ondeggiano
Le strisce ruotano sul loro asse lungo, più veloci quanto più l'aria corre; la rotazione dà una spinta di traverso (l'effetto Magnus, prodotto vettoriale fra la rotazione e il vento) e le fa scartare. I quadratini e i dischetti invece sono riportati verso la posizione piatta da una coppia di richiamo: la superano, tornano indietro e ondeggiano come una foglia, e ogni oscillazione li fa planare di lato. La fisica gira a passi fissi di 1/120 di secondo, e il passo del fotogramma è limitato a 1/30.
La luce e la prospettiva
Le due facce di un pezzo si proiettano sullo schermo con la loro prospettiva (la scala DEPTH / (DEPTH − z) e la sua derivata danno i due assi), e diventano la trasformazione del canvas: un rettangolo o un cerchio disegnati piatti escono storti al punto giusto. Il colore viene dall'angolo fra la faccia vista e una lampada in alto a sinistra, più un riflesso diretto verso l'occhio: morbido per la carta, stretto e forte per la lamina d'oro, che così lampeggia.
Le stelle filanti
Ogni stella filante è una catena di 30 punti a 6,5 pixel l'uno dall'altro (verlet: la velocità è la differenza fra due posizioni, poi quattro giri che rimettono le distanze). Una torsione fa ruotare ogni anello rispetto a quello prima attorno a un asse suo: è questo che la arriccia a spirale. L'aria la frena poco lungo la catena e molto di traverso, così si srotola volando. Il lato largo del nastro segue la curvatura della catena, e ogni tratto prende la sua luce.
Davanti, dietro e sul pavimento
Ci sono due canvas, uno sotto il pulsante e uno sopra: un pezzo con z negativo si disegna in quello sotto e il pulsante lo copre. Il pulsante è solido: chi lo attraversa da davanti a dietro rimbalza. Il pavimento è il fondo della finestra: toccato, un pezzo si sdraia lungo la rotazione più corta che porta la sua faccia in orizzontale, e la sua ombra, un'ellisse schiacciata dalla prospettiva, si scurisce mentre scende. Fermo tutto, il ciclo non disegna più niente.
Gli stati del pulsante
Riposo, sopra (una luce che passa e il coperchio che sbircia, anche al tocco e col tasto Tab), in apertura (il regalo trema per OPEN secondi, aria-disabled), fatto (giallo, la spunta e i punti che salgono) e di nuovo pronto dopo DONE secondi. I colori della carta sono variabili CSS lette a ogni scoppio, così si possono cambiare dal vivo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PIECES | script.js | 150 | Quanti coriandoli escono dal regalo. |
STREAMERS | script.js | 7 | Quante stelle filanti arricciate escono con loro. |
POWER | script.js | 1 | Quanto forte il regalo lancia la carta (1 = fin quasi in cima alla finestra). |
AIR | script.js | 1 | Quanto è densa l'aria: di più, e la carta plana e ondeggia più a lungo. |
GRAVITY | script.js | 1500 | La gravità, in pixel al secondo al quadrato. |
OPEN | script.js | 0.8 | I secondi in cui il regalo trema prima di aprirsi. |
DONE | script.js | 4 | I secondi in cui il pulsante mostra i punti prima di tornare pronto. |
POINTS | script.js | 500 | I punti che vale il premio. |
Quando usarla
Per il momento in cui qualcuno ottiene qualcosa: un premio, un traguardo raggiunto, il primo acquisto, un abbonamento attivato, la fine di un percorso. È una festa: va bene una volta, nel punto giusto, non su ogni pulsante.
Sul telefono
Il pulsante è largo 328 pixel, o lo schermo meno 32; la carta si apre meno di lato su uno schermo stretto e vola meno in alto su uno basso, e il pavimento sta sempre dentro la finestra. Al tocco il pulsante si stringe e la luce lo attraversa come col mouse. I canvas usano al massimo due volte la densità dello schermo.
Con il movimento ridotto
Niente volo: premendo, la carta compare già posata in fondo alla finestra con una dissolvenza, il regalo diventa subito la spunta e i punti sono già 500. Il pulsante non si muove e all'arrivo non sale.
Trappole
- Lanciata con la sola velocità iniziale, la carta partiva come pallini da fucile e cadeva subito: l'aria la frena troppo. Lo scoppio è diventato una corrente d'aria che si spegne in 0,15 secondi, e i pezzi si aprono a ventaglio come da un vero cannone di coriandoli.
- Con una sola spinta di richiamo verso la posizione piatta, i quadratini si fermavano piatti e cadevano dritti come sassi: serve che il richiamo li faccia oscillare oltre (poco smorzamento), e che l'aria contro la faccia sia molto più forte di quella lungo il piano, perché ondeggino planando.
- La luce va calcolata sulla faccia rivolta all'occhio, non sulla faccia davanti: girato, un coriandolo mostra il retro, che deve avere la sua luce, altrimenti i pezzi capovolti diventano neri.
- Un pezzo dietro il pulsante va disegnato sul canvas di sotto, ma se passa da davanti a dietro attraverso il pulsante si vedrebbe sparire nel nulla: il pulsante è solido e lo fa rimbalzare.
- La prospettiva deve tenere il pavimento dentro la finestra: un pezzo troppo vicino all'occhio si posava sotto il bordo dello schermo. La z più vicina si calcola dall'altezza della finestra.
- I colori dei pezzi vengono dal CSS e si leggono a ogni scoppio: letti una volta sola all'inizio, un colore cambiato nel Playground non arrivava alla carta.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 4 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
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.
