Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
L’impasto che lievita
La preparazione di un ordine nell’app di un forno, fatta come un panetto d’impasto che lievita in una ciotola di gres: è un corpo morbido vero, un anello di punti con le molle, una pressione dentro che cresce con l’avanzamento, la gravità e la parete della ciotola. Mentre sale la pelle si tende, le bollicine si gonfiano e scoppiano e la farina sopra si spacca in scaglie; toccato, si affossa e torna su con un rimbalzo molle. Alla fine è gonfio, prende il colore della crosta ed è pronto da ritirare.
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 rising dough</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/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the order tracker of a bakery app: the order is a ball of dough in a stoneware bowl that proofs as the order
gets ready. The dough is a soft body (a ring of points on springs, with a pressure inside that grows with the
progress, gravity and the bowl to lean on), drawn by script.js on the canvas; tap it and it gives under the
finger and springs back. At the end it has risen and baked to a crust: ready for pickup -->
<section class="proof" aria-labelledby="proof-title" data-proof>
<div class="proof__head">
<div class="proof__words">
<h2 class="proof__title" id="proof-title"><span class="proof__swap" data-title>Your order</span></h2>
<p class="proof__meta"><span class="proof__swap" data-meta>Ready in about 18 min</span></p>
</div>
<p class="proof__figure" aria-hidden="true">
<span class="proof__pct is-quiet" data-pct>$21.40</span>
<svg class="proof__tick" viewBox="0 0 24 24" data-tick><path d="M5.5 12.6l4.1 4.1L18.6 7.4" pathLength="1"/></svg>
</p>
</div>
<div class="proof__bowl" role="progressbar" aria-labelledby="proof-title" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="0" aria-valuetext="Not started" data-bowl>
<canvas class="proof__paint" aria-hidden="true" data-paint></canvas>
</div>
<div class="proof__foot">
<p class="proof__items">2 sourdough loaves <span class="sep">·</span> 1 focaccia</p>
<button class="proof__btn" type="button" data-action data-autoclic><span class="proof__label" data-label>Place order</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.
32 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 «L’impasto che lievita» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, da sola al centro, una scheda color farina con gli angoli tondi: in alto Your order e Ready in about 18 min, a destra il prezzo, $21.40; in mezzo una ciotola di gres smaltata di blu, coi puntini del gres nello smalto e il piede d’argilla grezza, e dentro un panetto d’impasto chiaro spolverato di farina che spunta appena dal bordo; sotto, 2 sourdough loaves · 1 focaccia e il pulsante scuro Place order. Premuto, il titolo diventa Preparing your order, a destra la percentuale sale e la riga sotto dice il passo e i minuti che mancano: Order received, Shaping the dough, Proofing, In the oven, Boxing it up. L’impasto lievita con l’ordine: si gonfia, sale oltre il bordo della ciotola in una cupola, la pelle si tende e si fa più lucida; mentre lievita delle bollicine si gonfiano sotto la superficie e scoppiano con un anellino e un piccolo cratere, e la pelle intorno ha un sussulto; la farina, che non si allunga, si spacca in scaglie e fra le crepe si vede l’impasto. Nel forno l’impasto passa dal crema al dorato e poi al bruno della crosta, più scura in cima, e la farina resta chiara nelle crepe brune. Quando l’ordine è pronto l’impasto ha un ultimo gonfiore elastico, un riflesso attraversa la crosta, a destra si disegna una spunta verde e il titolo dice Ready for pickup, con il codice da mostrare al banco; Order again fa tornare la crosta impasto mentre si sgonfia nella ciotola, e un nuovo ordine parte. Toccato col dito o col mouse in qualunque momento, l’impasto si affossa sotto il polpastrello, si allarga di lato e torna su con un rimbalzo molle che si smorza; la crosta cotta cede meno. Durante la preparazione il pulsante diventa Cancel, chiaro e col bordo: premuto a mano annulla l’ordine e l’impasto si risiede nella ciotola con un sospiro (Order cancelled, Nothing was charged).
Come funziona
Un anello di punti, con Verlet
L’impasto è un anello di 48 punti. A ogni passo di 1/240 di secondo (il tempo di un fotogramma è limitato a 1/30) ogni punto si muove di quanto si era mosso il passo prima, un po’ smorzato, più la gravità: è l’integrazione di Verlet, dove la velocità è la differenza fra la posizione di adesso e quella di prima. Poi tre giri di vincoli rimettono le cose a posto: molle fra punti vicini, molle più morbide fra un punto e quello dopo il successivo (così la pelle non fa pieghe), la pressione e la ciotola.
La pressione che lievita
La pressione è un vincolo sull’area: si calcola l’area dell’anello con la formula del laccio e il suo gradiente per ogni punto, ½ (y del successivo − y del precedente, x del precedente − x del successivo); ogni punto si sposta lungo il suo gradiente quanto serve per tornare all’area voluta. L’area voluta cresce con l’avanzamento (con RISE 1 raddoppia) e la lunghezza a riposo delle molle cresce con la sua radice, un po’ meno: la pelle si tende e la cupola si arrotonda invece di spandersi. L’avanzamento arriva a scatti, e l’impasto lo segue con una molla con lo smorzamento critico, che non torna mai indietro.
La ciotola e il dito
Sotto il bordo la parete interna è una mezza ellisse: un punto che esce viene riportato sul bordo dell’ellisse e perde il 30% della velocità lungo la parete, così l’impasto scivola con un po’ di attrito. Il polpastrello è un disco di 26 unità che scende dal punto più alto sopra il dito per POKE unità: i punti non possono entrarci, quindi l’impasto si affossa e si allarga di lato; intanto l’area voluta cala del 6%, perché premuto l’impasto cede un po’ d’aria e non si gonfia tutto intorno al dito. Tolto il dito, la pressione lo spinge su e l’inerzia di Verlet lo fa rimbalzare.
Farina, bolle e grani che viaggiano con l’impasto
Tutto quello che sta sulla pelle è legato all’anello con due numeri: un posto lungo l’anello (fra due punti) e una profondità sotto la pelle, lungo la normale. La farina è un foglio di scaglie a otto lati che si toccano tutte, con un punto in mezzo a ogni lato che vaga ed è lo stesso per le due scaglie vicine; ogni scaglia ricorda la sua area di partenza e, quando l’impasto sotto si allarga più della sua resistenza, si stringe verso il suo centro e arrotonda gli angoli: così le crepe si aprono qua e là, non tutte insieme. Ogni fila di scaglie è un solo tracciato, e dove si toccano ancora non c’è nessuna cucitura. Le bolle crescono, poi scoppiano: un anello che si allarga, un cratere che sbiadisce e una spinta verso l’interno ai punti vicini, che fanno un sussulto.
Luce, ombra e crosta
La ciotola si dipinge una volta sola in due strati: dietro l’impasto l’ombra sulla scheda, l’interno e il retro del bordo; sopra, l’esterno smaltato con la luce di una finestra, i puntini del gres, il piede d’argilla sotto la colatura dello smalto e il davanti del bordo. L’impasto si disegna a ogni fotogramma come una curva di Catmull-Rom chiusa, con un gradiente dall’alto in basso, un bagliore in alto a sinistra che cresce quando la pelle si tende, un’ombra sul lato lontano, un bordo più scuro e una trama di grani. Nel forno il colore passa prima dal dorato e poi al bruno, perché dal crema al bruno in linea retta passerebbe dal grigio, e delle macchie più scure fanno la crosta irregolare. Quando niente si muove non si disegna niente.
Per chi non vede e per chi non vuole movimento
La ciotola è un role=progressbar con aria-valuenow e un aria-valuetext che dice il passo; la scheda ha aria-busy mentre l’ordine si prepara e una riga aria-live dice quando parte, quando è annullato e quando è pronto, col codice. Il pulsante cambia parola (Place order, Cancel, Order again) e la pillola prende la larghezza nuova con un piccolo rimbalzo; il clic dell’anteprima della libreria, che arriva da uno script, non annulla mai.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SECONDS | script.js | 8 | Quanto dura l’ordine nella demo, in secondi (uno vero segue i suoi passi). |
MINUTES | script.js | 18 | I minuti che l’app dice per preparare l’ordine. |
RISE | script.js | 0.85 | Quanto cresce l’impasto alla fine: 1 vuol dire che raddoppia. |
GRAVITY | script.js | 900 | Quanto la gravità tira l’impasto nella ciotola, in pixel al secondo quadrato. |
SKIN | script.js | 0.3 | Quanto la pelle tiene la forma: bassa si affloscia, alta resta tonda. |
DAMP | script.js | 1.8 | Quanto in fretta si spegne un tremolio: la parte di velocità che perde ogni secondo. |
POKE | script.js | 16 | Quanto affonda il dito che tocca l’impasto, in pixel. |
BUBBLES | script.js | 3.2 | Quante bollicine salgono ogni secondo mentre l’impasto lievita. |
FLOUR | script.js | 0.9 | Quanta farina c’è sopra: 0 niente, 1 uno strato spesso. |
CRUST | script.js | 1 | Quanto scura viene la crosta: 0 pallida, 1 bruna. |
Quando usarla
Per un’attesa di qualche minuto in un’app di cibo: un ordine al forno, alla pizzeria, una torta su ordinazione, un pane da ritirare. L’impasto che cresce dice «ci stiamo lavorando» meglio di una barra, e si tocca mentre si aspetta; per un’attesa di pochi secondi o un caricamento di file è meglio qualcosa di più asciutto.
Sul telefono
La scheda prende la larghezza dello schermo meno 32 pixel (358 a 390) e la ciotola si rimpicciolisce con lei, sempre nella stessa forma: la fisica lavora in unità del disegno, e il canvas dipinge alla densità vera dello schermo, fino a due volte. Il dito tocca l’impasto come il mouse, e un tocco è subito un clic.
Con il movimento ridotto
L’impasto lievita lo stesso, perché è lui che dice a che punto è l’ordine, ma senza tremolii: lo smorzamento è così forte che sale e si risiede piano. Il dito non lo affossa, le bolle compaiono e spariscono in dissolvenza senza scoppiare, niente gonfiore finale né riflesso: la crosta arriva in dissolvenza, come la spunta e le parole nuove.
Trappole
- Il primo dito era un disco piccolo che affondava di 22 unità: l’area, tenuta ferma dalla pressione, usciva tutta ai due lati del dito in due gobbe, e l’impasto faceva una M. Ora il dito è largo il doppio, affonda meno e intanto l’area voluta cala del 6%: l’impasto cede e si allarga di lato, come uno vero.
- Disegnata scaglia per scaglia con la sua trasparenza, la farina mostrava una riga dove due scaglie si toccano, perché lì il colore passava due volte: ora ogni fila è un solo tracciato riempito una volta.
- Le scaglie quadrate, con gli angoli arrotondati da subito, sembravano squame di pesce o mandorle a lamelle: ora sono ottagoni irregolari con gli angoli vivi finché non si staccano, e si staccano ognuna con la sua resistenza, così la farina comincia intera e si crepa poco per volta.
- Il colore della crosta, mescolato in linea retta dal crema al bruno, passava per un rosa grigiastro a metà forno: ora passa prima dal dorato.
- Con una pelle troppo tesa l’impasto diventava una palla alta e stretta che usciva dal canvas: la tensione cresce solo del 5% con la lievitazione e RISE ha un massimo.
- Le molle si sistemano una dopo l’altra, e girando sempre nello stesso verso intorno all’anello l’impasto ruotava piano e pendeva da una parte, con la farina che scivolava di lato: ora un giro su due va al contrario.
- Un tocco veloce manda il pointerup prima che il dito sia sceso del tutto, e il dito restava giù nell’impasto: ora il dito ricorda se è ancora tenuto e, finita la discesa, se non lo è più risale da solo.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 17 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 8 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.
