Il menu a mazzetta di colori
Menu, Fisica, Transizioni, Hover
NuovaGratis
Tutti i componenti
Il tè in infusione
La card di un tè verde nel negozio di una piccola casa del tè: sopra una tazza di vetro con l’acqua calda pende una bustina piramidale di seta. Con Steep, o con un clic o un tocco sulla tazza, la bustina scende nell’acqua oscillando sul filo e il tè ne esce in pennacchi che scendono e si arricciano, perché è più pesante dell’acqua, mentre l’acqua si fa piano piano giallo-verde e dal bordo sale il vapore. Il fluido è vero, risolto su una griglia (i fluidi stabili di Stam). Tolta, la bustina sgocciola; il colore resta.
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 steeping tea</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/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the card of a green tea in the shop of a small tea house. Over a glass cup of hot water hangs a silk pyramid
of tea on its string: with Steep, or a click or a tap on the cup, it goes down into the water swinging on the string, and the
tea leaves it in plumes that curl and sink, while the water slowly turns gold-green. Lifted, it drips; the
colour stays. The cup, the water and the tea are drawn by the script -->
<article class="tea" aria-labelledby="tea-name" data-tea data-autoclic>
<div class="tea__shot" data-shot>
<canvas class="tea__canvas" role="img" aria-label="A glass cup of hot water, with a silk pyramid of tea hanging over it on its string" data-canvas></canvas>
</div>
<div class="tea__body">
<p class="tea__kind">Green tea · Shizuoka</p>
<div class="tea__head">
<h2 class="tea__name" id="tea-name">Sencha Asamushi</h2>
<p class="tea__price">€14</p>
</div>
<div class="tea__meta">
<p class="tea__notes">Grassy · Marine · Sweet</p>
<p class="tea__weight">50 g</p>
</div>
<div class="brew">
<p class="brew__guide"><span class="brew__label">Brew</span> 70 °C · 90 s</p>
<button class="pill pill--steep" type="button" data-steep>
<span class="pill__icon" aria-hidden="true">
<svg class="steep-icon" viewBox="0 0 24 24">
<path class="steep-icon__water" d="M3.5 17.2c1.6-1 3.1-1 4.7 0s3.1 1 4.7 0 3.1-1 4.7 0 2.4.8 2.9.4"/>
<g class="steep-icon__bag" data-bag-icon>
<path d="M12 2.4v5"/>
<path d="M8.2 7.6h7.6L12 14.4z"/>
</g>
</svg>
</span>
<span class="pill__label" data-label>Steep</span>
</button>
</div>
<div class="buy">
<button class="pill pill--add" type="button" data-add>
<span class="pill__clip" aria-hidden="true">
<span class="add__fill" data-fill>
<svg class="add__wave" viewBox="0 0 96 8" preserveAspectRatio="none" data-wave><path d="M0 4c6-4 12-4 18 0s12 4 18 0 12-4 18 0 12 4 18 0 12-4 18 0 6 2 6 2V8H0z"/></svg>
</span>
</span>
<span class="pill__icon" aria-hidden="true">
<svg class="add__glyph" viewBox="0 0 24 24" data-cart><path d="M3.4 4.6h2.3l2.1 9.6a1.7 1.7 0 0 0 1.7 1.3h7.1a1.7 1.7 0 0 0 1.7-1.3l1.4-6.4H6.6"/><path d="M10.2 19.4a.9.9 0 1 0 0 .01M16.6 19.4a.9.9 0 1 0 0 .01"/></svg>
<svg class="add__glyph add__tick" viewBox="0 0 24 24" data-tick><path d="M5.6 12.6l4.1 4.1 8.7-9.2"/></svg>
</span>
<span class="pill__label" data-label>Add to cart</span>
</button>
<button class="pill pill--undo" type="button" data-undo hidden><span class="pill__label">Undo</span></button>
</div>
<p class="sr" aria-live="polite" data-live></p>
</div>
</article>
</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.
38 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 tè in infusione» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una card bianca dagli angoli tondi. In alto la foto, disegnata dallo script: un muro verde salvia illuminato da una finestra a sinistra, un tavolo chiaro e sopra una tazza di vetro trasparente col manico, piena d’acqua calda, con l’ombra lunga verso destra. Attraverso l’acqua il muro e il bordo del tavolo si vedono deformati, come dietro una lente; il vetro ha i bordi scuri, il riflesso della finestra in strisce, il bordo lucido e il fondo spesso. Sopra la tazza pende una bustina piramidale di seta piena di foglie verdi, appesa al suo filo e a un’etichetta di carta con una foglia e la scritta SENCHA, tenuta da una mano fuori dalla foto: all’arrivo la card sale e la bustina dondola un poco. Sotto: Green tea · Shizuoka, il nome Sencha Asamushi con €14, le note Grassy · Marine · Sweet con 50 g, una riga sottile, la guida Brew 70 °C · 90 s col pulsante Steep e il pulsante verde scuro Add to cart. Col puntatore sopra la foto la mano si prepara: la bustina scende di pochi pixel nella bocca della tazza e dondola, senza toccare l’acqua, e il cursore diventa la mano; sul resto della card il puntatore non fa niente. Premendo Steep, o con un clic o un tocco sulla foto, la mano abbassa la bustina: scende spostandosi un poco di lato, così dondola sul filo, tocca l’acqua con un cerchio che si allarga sulla superficie, viene immersa due volte e resta lì, con il filo che si allenta quando l’acqua la sostiene. Dalla bustina esce il tè: una nuvola gialla e verde scura che si stacca e scende in fili, con le teste a fungo che si arricciano in volute; sul fondo il tè si raccoglie, si allarga e si mescola, e tutta la tazza diventa piano piano giallo-verde, più carica in basso. Sulla tavola, nell’ombra della tazza, la luce raccolta dall’acqua prende il colore del tè. Dal bordo salgono due o tre fili di vapore, che si diradano col passare del tempo. Il pulsante Steep diventa Lift e la sua piccola bustina scende sotto la sua linea d’acqua. Con Lift, o con un altro clic sulla foto, la bustina risale bagnata e sgocciola: si gonfia una goccia sulla punta e cade, prima spesso poi sempre più di rado, e ogni goccia fa un cerchio e un piccolo pennacchio. Il colore resta nella tazza. Add to cart si gonfia e allarga la scritta col puntatore sopra; premuto diventa Adding e si riempie come una tazza, con la superficie che ondeggia, poi Added con una spunta che si disegna, nel giallo chiaro del tè, e accanto compare Undo; dopo qualche secondo torna Add to cart.
Come funziona
La scena, disegnata una volta
Tutto è disegnato su una tavola di 324 per 300 punti, scalata al canvas. Il muro, il tavolo e le ombre stanno in uno strato; la tazza in altri tre, rifatti solo quando cambia la misura: il dietro (il vetro visto attraverso, il bordo lontano), la superficie dell’acqua (il riflesso della finestra, il menisco scuro e chiaro) e il davanti (i bordi scuri, le strisce di luce della finestra, il bordo, il fondo spesso, il manico). L’acqua è una lente: ogni colonna di pixel dietro di lei è presa da un’altra colonna dello sfondo, più larga in mezzo e stretta ai lati, e spostata in su e in giù, così il bordo del tavolo si piega.
L'acqua è un fluido vero
La velocità sta su una griglia di celle di CELL pixel, ritagliata sulla forma dell’acqua: il vetro è una parete che la pressione non attraversa. A ogni passo il tè spinge giù l’acqua in proporzione a quanto è carico (SINK), i vortici sono tenuti vivi da una spinta intorno a ogni mulinello (vorticity confinement, CURL) solo dove c’è tè, la bustina trascina l’acqua con sé e un poco di viscosità avvicina ogni cella alla media delle vicine; poi la velocità si porta da sola indietro lungo il flusso (semi-lagrangiano) e una pressione, trovata con Gauss-Seidel sovrarilassato che riparte da quella di prima, toglie la divergenza così l’acqua non si comprime (i fluidi stabili di Stam).
Il tè, su una griglia più fine
Il tè sta su una griglia due volte più fine e va col flusso avanti e indietro (MacCormack, con un limite fra i quattro vicini), così i fili restano sottili. La bustina lo dà dalle facce in basso, con un disturbo che cambia sette volte al secondo e lo fa uscire in più fili: tanto all’ingresso e quando si muove, poi sempre meno. Piano piano il tè si scioglie in un colore uniforme di tutta la tazza, un po’ più carico in basso. Si disegna come luce tolta (Beer-Lambert): il colore del tè a piena forza in :root dice quanto toglie di ogni canale, una tabella di 1024 voci trasforma lo spessore di tè nel colore che passa, e l’immagine moltiplica l’acqua.
La bustina su un pendolo
La cima della bustina è un punto di Verlet appeso a un filo che tira ma non spinge: quando l’acqua la sostiene il filo si allenta e si piega. Il peso e il freno passano da quelli dell’aria a quelli dell’acqua secondo quanto è immersa, a passi di 1/240 di secondo; l’angolo della bustina segue il filo su una molla smorzata. La mano è una timeline di GSAP, che parte solo con Steep o un clic sulla tazza: abbassa la bustina spostandosi un poco di lato, la immerge due volte e la lascia. Nell’acqua la bustina si vede più larga, come attraverso il vetro curvo, e trascina il fluido.
Gocce, cerchi e vapore
Uscita dall’acqua, sulla punta della bustina si gonfia una goccia che cade, tanto più spesso quanto più la bustina è piena. Ogni goccia che arriva fa un cerchio sulla superficie (un’ellisse chiara e una scura che si allargano) e una piccola nuvola di tè spinta in giù, che diventa un pennacchio. Il vapore sono tre fili di punti che salgono ondeggiando su due seni, disegnati a tratti che si allargano e svaniscono; si dirada in un minuto, come l’acqua che si raffredda.
Gli stati e il riposo
Il tè si infonde solo a richiesta: Steep (anche con Invio o Spazio), un clic o un tocco sulla foto; Lift o un altro clic lo tolgono. Il puntatore sopra la foto fa solo un’anticipazione: un tween di GSAP abbassa la mano di 9 pixel con un rimbalzo e dà alla bustina una piccola spinta, così scende nella bocca della tazza e dondola, sempre sopra l’acqua; uscendo dalla foto torna su, e sul resto della card non succede niente. Add to cart si riempie come una tazza (una pellicola con l’onda in cima che sale), poi Added con la spunta, Undo, e il ritorno a riposo; uno stato aria-live dice ogni passo. Il passo di tempo è limitato a 1/30 di secondo; il pendolo dorme sotto mezzo pixel al secondo, il fluido quando la bustina non dà più niente e il tè si è mescolato, il vapore dopo un minuto: allora non si ridisegna più niente.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
STEEP | script.js | 1.3 | I secondi che la mano impiega per abbassare la bustina nell’acqua. |
LIFT | script.js | 1.1 | I secondi che impiega per tirarla fuori. |
SWING | script.js | 0.4 | Quanto liberamente la bustina dondola sul filo nell’aria: la parte della velocità che tiene ogni secondo (da 0,05 a 0,9). |
SINK | script.js | 64 | Quanto forte il tè scende nell’acqua: quanto è più pesante dell’acqua, in pixel al secondo quadrato. |
CURL | script.js | 4 | Quanto il tè che scende si arriccia in vortici (0 = fili lisci). |
STRENGTH | script.js | 1 | Quanto tè danno le foglie: di più, una tazza più scura. |
STEAM | script.js | 0.8 | Quanto vapore sale dalla tazza, da 0 a 1. |
CELL | script.js | 2.6 | La misura di una cella della simulazione dell’acqua, in pixel: più piccola è più fine e più lenta. |
WORDS | script.js | ['Lift', 'Adding', 'Added'] | Il pulsante Steep con la bustina nell’acqua, poi Add to cart mentre lavora e quando ha finito. |
Quando usarla
Per la scheda di un tè, di una tisana o di un caffè in un negozio online; ovunque un prodotto si capisca meglio vedendolo all’opera (un colorante, un inchiostro, un sale da bagno, uno sciroppo) e per una pagina di prodotto che vuole un momento da guardare prima del carrello.
Sul telefono
La card è larga 340 pixel, o lo schermo meno 32, e la scena si ridisegna alla misura vera. Un tocco sulla foto mette la bustina in infusione e un altro la toglie, come Steep e Lift; l’anticipazione del passaggio col mouse al telefono non c’è, perché il tocco fa già tutto; i pulsanti sono alti 50 e 42 pixel. Sotto i 360 pixel il nome e le pillole si stringono un poco. La simulazione è la stessa del computer: la griglia è piccola (circa 45 per 55 celle, e il doppio per il tè) e costa un paio di millisecondi a fotogramma.
Con il movimento ridotto
Col puntatore sopra la foto la bustina resta ferma. Infusa, non scende e non dondola: compare nell’acqua con una dissolvenza e se ne va allo stesso modo. Niente pennacchi, gocce, cerchi né vapore: l’acqua prende il suo colore con una dissolvenza lenta e lo tiene. Le scritte dei pulsanti cambiano in dissolvenza e le pillole non si gonfiano.
Trappole
- Nella prima versione il passaggio del puntatore sulla card faceva già scendere la bustina: chi andava a premere Steep lo trovava già diventato Lift, lo premeva e tirava su la bustina, e il tè non si faceva mai. Ora l’infusione parte solo per un’azione esplicita (Steep, Invio o Spazio, un clic o un tocco sulla tazza) e il passaggio sulla foto è solo un’anticipazione: la bustina scende di 9 pixel nella bocca della tazza e dondola, senza toccare l’acqua.
- La piccola spinta che fa dondolare la bustina all’arrivo era uno spostamento di 4 pixel: in Verlet uno spostamento è una velocità, e la bustina faceva un giro intero sopra l’etichetta. Ora la spinta è una velocità piccola, data spostando la posizione di prima.
- Il vorticity confinement teneva l’acqua in moto per sempre anche dopo che il tè si era mescolato: i mulinelli si alimentavano da soli e la scena non smetteva di ridisegnarsi. Ora spinge solo dove c’è tè, e quando la bustina non dà più niente il freno e il mescolarsi crescono, finché il fluido si ferma e dorme.
- Il tè faceva ogni tanto dei tratti dritti e orizzontali, con le estremità a scaletta: sulla griglia di Stam, con velocità e pressione nello stesso punto, resta un rumore largo una cella che il vorticity confinement gonfia lungo le righe della griglia. Un poco di viscosità (ogni cella va verso la media delle vicine, 12 per cento a passo) lo spegne; troppa (30 per cento) toglieva anche le volute e il tè scendeva liscio e simmetrico come un’ancora, quindi CURL è salito da 3 a 4.
- Il tè usciva in un filo solo dalla punta: la bustina teneva ferma l’acqua dentro di sé e il tè poteva lasciarla solo dall’angolo in basso. Con un trascinamento più leggero e un disturbo nell’uscita esce in più fili, dalle facce.
- Vista con l’interpolazione, l’immagine del tè sbiadiva contro il vetro, perché le celle fuori dall’acqua valevano zero: un anello di celle fuori prende la media delle vicine dentro.
- GSAP leggeva il translateY(130%) del CSS del riempimento di Add to cart come pixel e ci sommava lo yPercent: il riempimento si fermava sotto la pillola. All’avvio si azzera y.
- Undo aveva overflow hidden per crescere dal niente, e tagliava il suo stesso anello di fuoco: ora l’overflow è nascosto solo mentre cresce.
- Il pendolo non si addormentava mai: la soglia era di 0,02 pixel al secondo, e l’ampiezza cala piano. Ora è mezzo pixel al secondo, meno di un centesimo di pixel a fotogramma.
- Con l’etichetta sopra il centro della tazza, a bustina immersa la carta copriva la superficie: la mano scende solo fin dove l’etichetta resta sopra il bordo lontano, e la tazza è più in basso per fare posto alla bustina.
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 22 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.
