Il vaso al sole
Card, 3D, Fisica, Hover, Transizioni
NuovaGratis
Tutti i componenti
Il pulsante del soffione
Il pulsante Add to wishlist di un negozio, con un soffione vero nella punta tonda della pillola, al posto dell'icona: centoventi semi messi sulla sfera per fillotassi, ognuno col suo achenio, il becco sottile e il pappo a ombrellino. Il puntatore è una brezza che li fa piegare e tremare, una passata veloce ne stacca uno o due. Al clic una folata li porta via tutti, in alto a destra, e ogni seme vola come un piccolo paracadute sopra tutta la pagina; resta il ricettacolo nudo sul suo stelo, la scritta dice Saved to wishlist con una spunta che si disegna, e poco dopo il soffione rinasce.
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 dandelion button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the dandelion button: the Add to wishlist button of a shop, with a dandelion clock at its right end where an
icon would be. The seed head is drawn on a canvas, seed by seed: the pointer is a breeze that makes the seeds
lean and tremble, and the click is a gust that blows them all away, up and to the right, each one flying as a
little parachute on a second canvas over the whole page. The words say Saved to wishlist, and a moment later
the head grows its seeds again -->
<div class="wish" data-wish>
<button class="wish__btn" type="button" data-btn data-autoclic>
<span class="wish__label" data-label>
<span class="wish__face" data-face="rest"><span data-rest-text>Add to wishlist</span></span>
<span class="wish__face" data-face="done" aria-hidden="true">
<svg class="wish__tick" viewBox="0 0 20 20" aria-hidden="true"><path d="M4.4 10.6l3.6 3.5 7.6-8.2" pathLength="1" data-tick/></svg>
<span data-done-text>Saved to wishlist</span>
</span>
</span>
<canvas class="wish__head" aria-hidden="true" data-head></canvas>
</button>
<p class="sr" aria-live="polite" data-live></p>
</div>
<canvas class="wish__air" aria-hidden="true" data-air></canvas>
</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.
20 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 del soffione» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una pillola color grafite alta 60 pixel, con un bordo sottile e un filo di luce in alto. A sinistra, in un carattere con le grazie color avorio, Add to wishlist; nella punta tonda di destra, al posto di un'icona, un soffione: una palla di lanugine bianca larga circa 45 pixel su uno stelo verde salvia che sale dal bordo basso della pillola. Ogni seme è disegnato a tratti sottilissimi: l'achenio bruno vicino al centro, il becco lungo e sottile, e in cima il pappo, un ombrellino di setole che si aprono e girano in su verso la punta. I semi davanti sono più chiari, quelli dietro si vedono appena attraverso la lanugine, il lato in alto a sinistra prende la luce, e in mezzo si intravede il nucleo più scuro degli acheni. All'arrivo il soffione cresce: i semi spuntano dal ricettacolo uno dopo l'altro lungo la spirale, dall'alto verso lo stelo. A riposo respira appena nell'aria ferma. Col mouse sopra la pillola arriva una brezza: ogni seme si piega lontano dal puntatore, tanto più quanto gli è vicino, e trema su una molla sua; passando di corsa sopra la testa una raffica stacca uno o due semi, che volano via e dopo qualche secondo ricrescono. Al clic la folata attraversa la testa dal lato del vento: i semi si piegano e si staccano in un'onda, uno dopo l'altro, e partono in alto a destra, lontano dalle parole, aprendosi a ventaglio. In aria ognuno è un paracadute: il pappo si gira verso l'aria che lo investe con l'achenio che pende dietro, ruota piano su sé stesso, si inclina verso chi guarda e poi lontano, si avvicina o si allontana, e la nuvola si sparpaglia nei mulinelli e svanisce lontano. Resta il ricettacolo nudo, una piccola cupola chiara butterata, con le brattee piegate in giù lungo lo stelo. La scritta sale sfocandosi e da sotto arriva Saved to wishlist, con una spunta che si disegna. Dopo qualche secondo i semi rispuntano dal centro in ordine di fillotassi, ognuno con un piccolo scatto quando apre il pappo, e torna Add to wishlist. Con la tastiera il fuoco mostra un anello avorio e un soffio attraversa la testa; Invio o Spazio soffiano. Al telefono il dito è la brezza e il tocco la folata.
Come funziona
La testa per fillotassi
I SEEDS semi stanno su una sfera, a passi d'area uguale dalla cima fino a 146 gradi (sotto c'è lo stelo) e girati ognuno dal precedente dell'angolo aureo, 137,5 gradi: la spirale del girasole, su una palla. L'asse del fiore guarda in su, un poco a destra e verso l'occhio, così la testa si vede un po' dall'alto. Ogni seme è lungo il suo raggio: l'achenio dal ricettacolo (raggio 4,4) per 4 pixel, il becco per altri 10,2, e lì il pappo con 14 setole di 8,6 pixel. La luce di un seme viene da quanto è davanti e da quanto guarda la lampada in alto a sinistra, in 24 livelli di colore fatti una volta; si disegnano prima i semi di dietro, poi lo stelo e il ricettacolo, poi quelli davanti.
Il pappo in 3D
Le setole sono vettori nello spazio: cos α · asse + sin α · (cos φ · e1 + sin φ · e2), con e1 ed e2 perpendicolari all'asse del seme, α l'apertura (76 gradi) e φ che gira intorno all'asse. Ogni setola è una curva di secondo grado che parte un po' più piatta e alla punta gira in su, come le stecche di un ombrellino; sullo schermo se ne prende la proiezione. Così un pappo di fronte è una stella, uno di profilo un ventaglio, e la sagoma della palla viene da sola. Gli stessi calcoli disegnano i semi in volo, con l'asse e la rotazione che cambiano a ogni fotogramma.
Brezza e raffica
Ogni seme segue su una molla sua (pulsazione 15, smorzamento 0,32, quindi trema) il punto dove l'aria lo piegherebbe: un respiro di rumore di Perlin lento a riposo; col puntatore sopra una spinta lontano da lui, fino a 4,6 pixel e più forte entro 24 pixel, più un tremito di rumore veloce. Il becco si piega con una curva e il pappo segue. Se il puntatore passa a più di 700 pixel al secondo entro 22 pixel dal centro della testa, il seme del lato davanti più vicino alla sua traccia si stacca (due sopra i 1500), verso dove andava il puntatore ma girato in alto a destra, e ricresce dopo 2,4-4 secondi; ne mancano al massimo dieci.
La folata del clic
Il vento soffia in alto a destra, più ripido dove a destra c'è poco spazio (fra 32 e 78 gradi). Ogni seme ha la sua ora di partenza secondo la sua posizione lungo il vento: dal lato sopravvento a quello sottovento in 0,7 / √GUST secondi, e nei 0,2 secondi prima si piega nel vento. Quando parte passa dal canvas della testa a un canvas fisso grande quanto la finestra, dallo stesso punto e con lo stesso asse, e prende la sua fetta del ventaglio della folata: un seme sul lato alto della palla va più in su, fino a mezzo radiante, uno sul lato basso più piatto, fino a tre decimi: la nuvola sale sempre.
Il volo del paracadute
In aria un seme è un corpo con una resistenza forte: a = DRAG · (aria − v) + peso, quindi raggiunge presto il vento e cade piano (36 / DRAG pixel al secondo). L'aria è la folata (250 · GUST pixel al secondo al culmine, che sale in 0,07 secondi e cala in 1,05, presa da ogni seme in misura sua), una brezza costante e un poco d'aria che sale, i mulinelli del rotore di un campo di rumore (due ottave, che non ammucchiano mai i semi) e un tremolio proprio di ogni pappo. Il pappo si gira su una molla verso l'aria che lo investe, si inclina verso l'occhio e via, ruota, e una profondità lo fa più grande e chiaro o più piccolo; svanisce con l'età e con la distanza. Passi di 1/120 di secondo, fotogramma limitato a 1/30, e si cancella solo il rettangolo disegnato prima.
La ricrescita e gli stati
Riposo, folata, testa nuda, ricrescita. Il ricettacolo nudo è una cupola con le fossette in spirale e le brattee piegate in giù; lo stelo e il ricettacolo si perdono nella lanugine quanto più la testa è piena. Dopo HOLD secondi i semi rispuntano in ordine di indice nell'arco di 1,1 secondi, ognuno su una molla che va oltre l'uno (pulsazione 14, smorzamento 0,42): il becco esce dal ricettacolo col pappo chiuso e lo apre di scatto. Il pulsante è aria-disabled e ignora i clic dalla folata alla fine della ricrescita; una zona aria-live dice Saved to wishlist. A riposo, se respira solo, la testa si ridisegna a metà dei fotogrammi; fuori dallo schermo si ferma.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Add to wishlist | La scritta a riposo. Se è troppo lunga per lo spazio a sinistra del soffione, il carattere si rimpicciolisce. |
DONE | script.js | Saved to wishlist | La scritta quando i semi sono volati via, con la spunta; è anche quello che dice la zona aria-live. |
SEEDS | script.js | 120 | Quanti semi ha il soffione: meno, la palla si dirada e si vedono le stelle dei singoli pappi; di più, è più piena. |
GUST | script.js | 1 | Quanto soffia il clic: 0,5 un sospiro, i semi si staccano piano e salgono adagio; 2 una raffica che li porta via in un attimo. |
DRAG | script.js | 3.2 | Quanto l'aria trattiene un seme: più alto, i semi cadono più piano e seguono il vento più da vicino; più basso, sono più pesanti e tengono lo slancio. |
TURBULENCE | script.js | 1 | Quanto i mulinelli dell'aria fanno girare e sparpagliare i semi in volo: 0, una corrente liscia. |
BREEZE | script.js | 1 | Quanto l'aria muove i semi sulla testa, a riposo e sotto il puntatore: 0 stanno fermi (e il soffione non si ridisegna finché non succede qualcosa), e il puntatore non ne stacca nessuno. |
HOLD | script.js | 2.6 | I secondi in cui la testa resta nuda, con Saved to wishlist, prima che i semi rispuntino. |
Quando usarla
Per l'azione che mette da parte un desiderio: la lista dei desideri di un negozio, i preferiti, il salvare per dopo, una lista nozze o dei regali, un biglietto d'auguri. Il soffione sta bene nei negozi di fiori, di piante e di cose per la casa, nella cosmetica naturale, nei siti per bambini e per chi fa regali. È un pulsante da far vedere, uno per pagina, su un fondo scuro; i semi volano sopra tutta la pagina, quindi in alto a destra serve un po' d'aria libera.
Sul telefono
La pillola è alta 60 pixel e larga 272, o lo schermo meno 32; il soffione ha sempre la stessa misura e la scritta, se non ci sta, si rimpicciolisce. Il dito appoggiato è la brezza (i semi si piegano lontano da lui) e il tocco la folata. Con poco spazio a destra il vento soffia più ripido, fino a 78 gradi, e i semi salgono verso l'alto; escono dai lati dello schermo senza mai farlo scorrere, perché volano su un canvas fisso grande quanto la finestra.
Con il movimento ridotto
Niente volo, niente respiro, niente brezza né tremito e nessuna crescita all'arrivo. Al clic i semi svaniscono al loro posto in sei decimi di secondo e resta il ricettacolo nudo; Saved to wishlist arriva in dissolvenza con la spunta già disegnata. Dopo HOLD secondi i semi tornano in dissolvenza e la scritta torna Add to wishlist. Premuta, la pillola si schiarisce appena invece di rimpicciolire.
Trappole
- I semi volavano tutti insieme in un grumo, come una palla che si sposta: avevano la stessa velocità e i mulinelli, larghi 150 pixel, sono uguali su una nuvola larga 50. Ora la folata esce dalla testa a ventaglio e ogni seme ne prende la sua fetta secondo dove stava sulla palla, con una presa, un peso e un tremolio suoi.
- Con i mulinelli più forti della brezza costante i semi si fermavano a mezz'aria in una riga verticale: dei corpi con inerzia in un campo che gira si raccolgono dove il vortice si oppone alla corrente. Ora la brezza costante è più forte (64 pixel al secondo contro 40 dei mulinelli), i mulinelli hanno una seconda ottava più piccola e più veloce che non lascia il tempo di fermarsi, e ogni pappo tremola per conto suo.
- Lo stelo, disegnato pieno, attraversava la parte davanti della palla come il bastoncino di un lecca-lecca: i tratti sottili delle setole non coprono quello che sta dietro. Lo stelo e il ricettacolo ora si perdono nella lanugine tanto più quanto la testa è piena.
- Il centro della palla era una macchia chiara e calda, come una luce accesa dentro: acheni illuminati e ricettacolo chiaro. Gli acheni ora sono più scuri e il ricettacolo, sotto una testa piena, sta nell'ombra dei semi, come il nucleo bruno di un soffione vero.
- I semi staccati da una passata del puntatore verso sinistra volavano sopra le parole: la loro strada ora è quella del puntatore girata sempre in alto a destra, e un seme vicino alla pillola, a sinistra della testa, viene solo sollevato.
- Il canvas dei semi in volo è fisso sulla finestra, ma un elemento fisso dentro un elemento trasformato non è più fisso: l'entrata sposta il pulsante con una trasformazione. Il canvas sta fuori dal blocco del pulsante.
- Le brattee sotto il ricettacolo, scure e fitte, sembravano una gabbia: ora sono sottili, in due toni, quelle davanti del colore dello stelo.
Librerie
GSAP 3.15.0, Newsreader (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 16 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 7 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.
