Il banner dei cookie
Consenso, Transizioni, SVG, Fisica
NuovaGratis
Tutti i componenti
La moka del caricamento
Un’esportazione fatta come una moka sul fornello, tagliata a destra come un disegno tecnico: dentro si vedono l’acqua nella caldaia, l’imbuto col caffè macinato e il camino al centro del raccoglitore. Premuto Export report la fiamma blu prende dall’accenditore e fa il giro dell’anello, l’acqua cala e il caffè sale nel camino, trabocca e scende nel raccoglitore: il suo livello è la percentuale. Alla fine la moka borbotta, butta spruzzi di schiuma, fischia vapore dal beccuccio e dal coperchio che sobbalza, e il gas si spegne: Report ready.
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, viewport-fit=cover">
<title>The moka pot loader</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the moka pot loader: an export shown as a stovetop moka pot on a small gas ring, its right side cut away like a
technical drawing so you see the water in the boiler and the chimney in the upper chamber. Pointed at, the
button makes the igniter spark; pressed, the blue gas lights, the water goes down, the coffee comes up the
chimney and runs into the chamber, and its level is the export's progress. At the end the pot sputters and
hisses, the gas goes out and the report is ready to download. The pot is drawn by script.js -->
<section class="moka" aria-label="Report export" data-moka>
<!-- four layers, bigger than the pot's place so the steam has room above it: the burner and the inside of the
pot; the flame and the liquids; the outside and the hatched cut; the steam -->
<div class="moka__scene" role="progressbar" aria-label="Report export" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="0" aria-valuetext="Ready to export" data-scene>
<div class="moka__layers" data-layers>
<svg class="moka__art" viewBox="25 40 250 290" preserveAspectRatio="none" aria-hidden="true" data-art="back"></svg>
<canvas class="moka__art" aria-hidden="true" data-fluid></canvas>
<svg class="moka__art" viewBox="25 40 250 290" preserveAspectRatio="none" aria-hidden="true" data-art="front"></svg>
<canvas class="moka__art" aria-hidden="true" data-air></canvas>
</div>
</div>
<p class="moka__status" aria-hidden="true">
<svg class="moka__tick" viewBox="0 0 24 24" data-tick><path d="M5.5 12.6l4.2 4.2 8.8-9.4" pathLength="1"/></svg>
<span class="moka__swap" data-status>Ready to export</span>
<span class="moka__pct" data-pct></span>
</p>
<div class="moka__buttons">
<button class="pill" type="button" data-go data-autoclic><span class="pill__label" data-label>Export report</span></button>
<button class="pill is-quiet" type="button" hidden data-again><span class="pill__label">Brew again</span></button>
</div>
<p class="sr" role="status" aria-live="polite" data-live></p>
</section>
</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.
51 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 moka del caricamento» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, da sola al centro, una moka di alluminio a otto facce su un piccolo fornello a gas: la caldaia in basso con la valvola d’ottone, la vita col collare, il raccoglitore che si allarga verso l’alto col beccuccio a punta, il coperchio col pomolo nero e il manico di bachelite incernierato. A sinistra l’alluminio spazzolato, con le facce che prendono la luce in modo diverso: la caldaia guarda la luce, il raccoglitore un poco in giù. A destra la moka è tagliata come in un disegno tecnico, con le pareti sezionate a tratteggio e la linea d’asse: dentro ci sono l’acqua azzurra nella caldaia, l’imbuto pieno di macinato col suo tubo che pesca nell’acqua, il filtro forato, la guarnizione, la filettatura fra caldaia e raccoglitore e, al centro del raccoglitore vuoto, il camino. Sotto c’è il fornello, con la griglia di ghisa, il bruciatore e l’accenditore, poi la riga Ready to export e il pulsante Export report. Puntando il pulsante l’accenditore fa tre scintille. Premuto, la fiamma blu prende vicino all’accenditore e corre intorno all’anello, l’acqua sale nel tubo e il macinato si scurisce bagnandosi, il caffè sale nel camino, trabocca dalla cima a cupola e scende in due rivoli lungo i fianchi. Nel raccoglitore il livello cresce con la percentuale (Brewing your report… 48%), scuro con la crema chiara in superficie, le bollicine e un po’ di schiuma, mentre l’acqua nella caldaia cala e dal fondo caldo salgono le bolle. L’esportazione va a scatti: quando corre il getto gorgoglia e butta qualche goccia, nelle pause si riduce a un filo. A 100% l’acqua scende sotto l’imbuto e il vapore passa nel tubo a sbuffi; il camino butta tre spruzzi di schiuma, il vapore fischia dal beccuccio e da sotto il coperchio, che sobbalza sulla cerniera, e la fiamma si spegne. La riga diventa Report ready con una spunta verde che si disegna, accanto a Download compare Brew again, e dal beccuccio sale ancora un filo di vapore. Brew again versa il caffè, riempie di nuovo la caldaia e rimette il macinato asciutto.
Come funziona
Un ottagono visto di fronte
Di un ottagono visto di fronte si vedono tre facce: quella davanti finisce a tan 22,5° della mezza larghezza (0,414), le due di sbieco vanno da lì al bordo. Il profilo della moka dà la mezza larghezza a ogni altezza (la caldaia si stringe salendo, il raccoglitore si allarga), e ogni fascia (coperchio, orlo, raccoglitore, collare, caldaia, smusso) si disegna una volta sola in SVG con un gradiente per faccia, scelto da come la faccia è inclinata verso la luce. Sulla faccia di sbieco una striscia bianca sfocata fa il riflesso, sopra c’è un motivo di righe sottili a caso, sempre le stesse, per lo spazzolato; tutto è ritagliato a sinistra della linea del taglio.
Il taglio, in quattro strati
A destra del taglio le pareti sono poligoni riempiti con due motivi tratteggiati, a 45° e a −45°, perché due pezzi che si toccano in un disegno tecnico hanno il tratteggio opposto: la caldaia col fondo, il raccoglitore col pavimento e il camino, il coperchio. La lamiera dell’imbuto è una linea piena, il filtro e il fondo dell’imbuto una linea tratteggiata, la filettatura un zigzag. Gli strati sono quattro: dietro l’interno della moka e il bruciatore (SVG), poi un canvas con la fiamma e i liquidi, poi l’esterno e le pareti tagliate (SVG), sopra tutto un canvas col vapore. Così i bordi dei liquidi finiscono sotto il tratteggio, e a ogni fotogramma si ridipingono solo i due canvas.
Il livello è la percentuale
L’esportazione della demo è un elenco di passi, ognuno un salto avanti o una pausa: i pesi cambiano un poco ogni volta ma insieme durano SECONDS. Il livello del caffè va dal pavimento del raccoglitore al pieno con la percentuale, quello dell’acqua dalla caldaia piena al tubo dell’imbuto. Quanto forte esce il caffè dal camino segue la velocità dell’avanzamento, smussata: 0,14 + 1,6 × velocità, così il getto gorgoglia nei salti e resta un filo nelle pause. Il gorgoglio è la somma di due seni, più un salto ogni tanto che gonfia la cupola e lancia due gocce; i rivoli lungo il camino si allargano e si stringono con un’onda che scende.
Una superficie che ondeggia
La superficie del caffè, e quella dell’acqua, è una fila di 40 punti con un’equazione d’onda smorzata: v += (c²/dx² · (h₋₁ + h₊₁ − 2h) − d·v − 5h)·dt, a passi di 5 millesimi di secondo, con le pareti che riflettono. I rivoli spingono giù dove cadono, le gocce dove atterrano, le bolle che scoppiano tirano su; nel caffè le bolle trascinate dai rivoli risalgono e restano a galla come schiuma. Quando l’increspatura più grande è sotto 0,04 unità la superficie si ferma, e quando niente si muove il ciclo smette di disegnare.
La fiamma e il borbottio
Diciotto fiamme stanno su un’ellisse intorno al cappello del bruciatore: si dipingono da dietro a davanti col cappello in mezzo, ognuna una goccia con un cono chiaro dentro, piegata in fuori e schiacciata sotto la moka, e tremano con due seni. Si accendono in ordine a partire dall’accenditore. Alla fine l’acqua scende sotto il tubo e il vapore lo attraversa a tratti; gli spruzzi sono particelle con la gravità che ricadono nel caffè e lo fanno ondeggiare, gli sbuffi di vapore sono un corpo bianco su un bordo grigio azzurro (sul bianco il vapore si vede per la sua ombra) e il coperchio ruota sulla cerniera con un rimbalzo.
Chi non vede e la demo
La moka è un role=progressbar con aria-valuenow e aria-valuetext aggiornati al massimo ogni 0,6 secondi, aria-busy mentre lavora e una riga aria-live per l’inizio, la fine e il download. Il pulsante resta lo stesso elemento in tutti gli stati, quindi lo stato attivo da tastiera non si perde; Brew again, sparendo, lo ripassa al pulsante. I clic da script (detail 0, quelli dell’anteprima della libreria) non scaricano mai: dopo 2,5 secondi di Report ready rifanno il caffè, così la miniatura gira da sola.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SECONDS | script.js | 3.6 | Quanto dura l’esportazione della demo, in secondi, senza il gas che si accende e il borbottio finale (una vera segue il lavoro del server). |
STEPS | script.js | [[0.2, 0.9], [0, 0.45], [0.47, 1], …] | L’esportazione a scatti: per ogni passo fin dove arriva (da 0 a 1) e quanto pesa sul tempo; un passo che non va più avanti del precedente è una pausa. |
JITTER | script.js | 0.25 | Quanto cambiano i pesi dei passi da una volta all’altra: 0 sempre uguali. La durata resta SECONDS. |
HEAT | script.js | 0.6 | I secondi fra l’accensione del gas e il caffè in cima al camino. |
SPURTS | script.js | 3 | Gli spruzzi di schiuma del borbottio finale, ognuno col suo sbuffo di vapore e il coperchio che sobbalza. |
FLAME | script.js | 15 | L’altezza delle fiamme, in unità del disegno (la moka è alta circa 200); più alte si schiacciano sotto la moka. |
PORTS | script.js | 18 | I fori del bruciatore, cioè quante fiamme ci sono intorno all’anello. |
GRAVITY | script.js | 320 | La gravità sulle gocce e sugli spruzzi, in unità del disegno al secondo quadrato. |
WAVE | script.js | [90, 2.4] | La superficie del caffè e dell’acqua: quanto corre un’increspatura (unità al secondo) e quanto in fretta si spegne. |
LABELS | script.js | { busy: 'Exporting…', done: 'Download', saved: 'Downloaded' } | Le scritte del pulsante mentre lavora, alla fine e dopo lo scaricamento; quella a riposo, Export report, si cambia in index.html. |
WORDS | script.js | { busy: 'Brewing your report…', done: 'Report ready' } | La riga sotto la moka mentre lavora (seguita dalla percentuale) e alla fine; quella a riposo, Ready to export, si cambia in index.html. |
Quando usarla
Per un’attesa di qualche secondo che finisce con un risultato da prendere: esportare un report o un PDF, preparare un archivio da scaricare, generare una fattura, un backup. Va bene in un prodotto con un tono caldo, artigianale o italiano, o dove l’attesa si può raccontare come «lo stiamo preparando per te»; la moka tagliata dice bene a che punto si è anche senza leggere il numero. Per un’attesa brevissima o che non finisce con qualcosa in mano è troppo.
Sul telefono
Il componente è largo 360 pixel e sul telefono prende la larghezza dello schermo meno 16 pixel per lato (358 a 390); la moka resta larga 240 e il disegno è vettoriale, quindi resta nitido a ogni densità, e i due canvas dipingono alla densità vera dello schermo, fino a due volte. Gli strati del disegno sporgono sopra la moka per il vapore senza far scorrere la pagina di lato. I pulsanti sono pillole alte 44: col dito si schiacciano e rimbalzano; la pillola che si gonfia, la scritta che si allarga e le scintille dell’accenditore al passaggio ci sono solo col mouse (o con la tastiera, per le scintille).
Con il movimento ridotto
La fiamma si accende e si spegne con una dissolvenza e non trema, niente scintille, niente gocce, bolle, schiuma, spruzzi né vapore, il coperchio non sobbalza e le superfici restano piatte. Il caffè sale nel camino e nel raccoglitore e l’acqua cala lo stesso, insieme alla percentuale, perché sono loro a dire a che punto si è; il getto lungo il camino resta fermo e sottile. Le parole cambiano con una dissolvenza e la spunta compare senza disegnarsi.
Trappole
- Tagliata proprio sull’asse, la moka mostrava solo mezzo camino e il caffè che sale era un filo di quattro pixel: il taglio è spostato 14 unità a sinistra dell’asse, così il camino si vede intero con i suoi due fianchi.
- I rivoli lungo il camino, spessi e scuri come il caffè dentro, facevano del camino un pilastro marrone: ora sono una pellicola sottile e più chiara, al massimo 1,6 unità, con un filo di luce sul bordo, e fra il caffè dentro e quello fuori restano visibili le pareti tratteggiate.
- Il vapore sul bianco: bianco non si vede, grigio sembra fumo. Ogni sbuffo è un corpo bianco sopra un bordo grigio azzurro sfumato, e si legge per la sua ombra.
- La superficie d’onda non si fermava mai del tutto (restavano increspature di un centesimo di pixel) e il canvas si ridipingeva per nove secondi dopo la fine: sotto 0,04 unità la superficie si ferma e il ciclo smette di disegnare.
- Due filtri di sfocatura con lo stesso id nei due SVG della pagina: url(#…) prende sempre il primo, e l’ombra della valvola usciva sfocata come quella del fornello. Ora hanno nomi diversi.
- La riga di stato, chiesta a ogni fotogramma, ricominciava la dissolvenza prima che finisse: ora ricorda le parole in arrivo e non riparte per le stesse.
- Il riflesso blu della fiamma sul fondo della caldaia era alto venti unità e sembrava vernice: ora è una sfumatura di nove unità sullo smusso.
- L’anteprima della libreria clicca il pulsante segnato ogni 2,8 secondi, e appena finito avrebbe premuto Download: i clic da script (detail 0) non scaricano mai e, dopo 2,5 secondi di Report ready, rifanno il caffè.
- Subito dopo il tocco si leggeva per un attimo «Ready to export 0%»: la percentuale entra in dissolvenza solo dopo che la riga è cambiata.
- Il pulsante sbiadito mentre lavora sembrava una macchia grigia nel poster: ora passa allo stile tranquillo, trasparente con l’anello, come il pulsante accanto.
Librerie
GSAP 3.15.0, Bricolage Grotesque (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.
