Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il pulsante della pizza
Il «Book a table» di una pizzeria, fatto di pasta morbida: un corpo molle vero che si sporge verso il puntatore e cede sotto il dito. Al clic la pasta viene stesa con uno schiaffo, il pomodoro va giù a spirale, mozzarella e basilico cadono dall'alto e rimbalzano, un arco di mattoni si costruisce intorno col fuoco in fondo, il cornicione si gonfia e si macchia di bruciato. Il forno si alza, sale il vapore e la pizza si cuoce in una pillola dorata con scritto «Table booked».
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 pizza button</title>
<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 pizza button: the Book a table of a pizzeria, a pill of soft dough on a black page. The dough is a soft
body on a canvas: it leans towards the pointer and gives under the finger. A click slaps it out wider, the
sauce goes on in a spiral, mozzarella and basil drop on it and settle, a brick oven arch builds itself
round it with the fire at the back, the crust puffs and chars, the oven lifts away and the baked pill
says Table booked -->
<div class="pizza" data-pizza>
<canvas class="pizza__art" aria-hidden="true" data-art></canvas>
<button class="pizza__btn" type="button" data-btn data-autoclic>
<span class="pizza__face" data-face="rest">
<span class="pizza__word" data-label-text>Book a table</span>
</span>
<span class="pizza__face pizza__face--done" data-face="done" aria-hidden="true">
<svg class="pizza__tick" viewBox="0 0 20 20" aria-hidden="true"><path data-tick d="M4.5 10.5l3.6 3.6 7.4-8.2"/></svg>
<span class="pizza__word" data-done-text>Table booked</span>
</span>
</button>
<p class="sr" aria-live="polite" data-live></p>
</div>
</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.
37 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 della pizza» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una pillola alta 60 pixel di pasta cruda color crema, infarinata, con la scritta «Book a table». Sotto il mouse la pasta si gonfia appena e si sporge verso il puntatore, e la scritta si allarga sull'asse della larghezza del carattere; premendo, la pasta si ammacca dove sta il dito e si schiaccia. Al clic la scritta sparisce e la pasta viene stesa con uno schiaffo: si allarga, si appiattisce, prende un contorno irregolare fatto a mano e un cornicione in rilievo, mentre una nuvola di farina vola via dai bordi. Il pomodoro si stende dal centro lasciando la spirale del mestolo; sei pezzi di mozzarella strappata cadono dall'alto con la loro ombra che si stringe, rimbalzano e si schiacciano un attimo, e tre foglie di basilico scendono ondeggiando. Poi, mattone dopo mattone, dai piedi alla chiave, un arco di forno si costruisce intorno alla pizza: dentro è buio, il fuoco brucia in fondo a sinistra, la sua luce tremola sulla pizza e sui mattoni. In forno il cornicione si gonfia, si dora e si macchia di bruciato a gruppi, come un vero cornicione «leopardato», la mozzarella si scioglie e prende delle bolle dorate. L'arco si smonta dalla chiave in giù volando via, il fuoco si spegne, salgono tre fili di vapore, e la pizza si cuoce in una pillola dorata, con le macchie di bruciato sul bordo, che dice «Table booked» con una spunta che si disegna. Dopo un paio di secondi uno sbuffo di farina la riporta pasta cruda. Con la tastiera il comportamento è lo stesso.
Come funziona
La pasta è un anello di punti con le molle
Settantadue punti sul contorno della pillola, distribuiti alla stessa distanza lungo il perimetro (due tratti dritti e due mezzi cerchi). Ogni punto è tirato da una molla verso il suo posto e da un'altra verso la media dei suoi due vicini, con lo smorzamento; quattro piccoli passi per fotogramma, col passo limitato a 1/30 di secondo, lo tengono stabile. Il contorno si disegna con curve quadratiche fra i punti di mezzo, così resta morbido.
Il puntatore e lo schiaffo
Il puntatore sposta i posti delle molle: vicino a lui il contorno si sporge verso di lui, sotto la pressione rientra lungo la normale. Lo schiaffo è un colpo di velocità verso l'esterno a tutti i punti (più forte sulle teste tonde), mentre GSAP porta i posti a una forma più larga e più bassa con un contorno irregolare fatto di tre sinusoidi: le molle fanno il resto, con l'oscillazione.
Cornicione, pomodoro e macchie
Il bordo interno del cornicione è l'anello stesso, spostato verso dentro lungo la sua normale. Il pomodoro è lo stesso contorno interno rimpicciolito verso il centro con un poco di rumore, ritagliato dentro il cornicione, e sopra due spirali sottili, scura e chiara, disegnate fino al punto in cui è arrivato il mestolo. Le macchie di bruciato stanno a gruppi lungo l'anello e compaiono ognuna a una soglia diversa della cottura, con un alone morbido intorno.
Gli ingredienti cadono davvero
Ogni pezzo ha una velocità e la gravità; toccata la pizza rimbalza se arriva abbastanza forte e prende un colpo su una molla che lo schiaccia e lo allarga per un attimo. Le foglie di basilico hanno la resistenza dell'aria, quindi cadono più piano, ondeggiano e girano. L'ombra sotto ogni pezzo diventa più scura man mano che si avvicina.
Il forno
L'arco è un'ellisse divisa in mattoni di uguale lunghezza misurata sulla sua linea di mezzo. GSAP fa cadere ogni mattone al suo posto con un rimbalzo, dai piedi alla chiave, e all'uscita li fa volare via in ordine inverso. Il fuoco sono particelle tonde e morbide sommate con 'lighter', ritagliate dentro il forno e disegnate dietro la pizza; la stessa luce, con un tremolio di tre sinusoidi, si somma sulla pizza e sui mattoni.
La regia e il riposo
Una timeline GSAP muove pochi numeri (stesura, pomodoro, forno, fuoco, cottura, vapore) e chiama gli istanti delle cadute; la fisica e il disegno girano sul ticker di GSAP. Quando molle, ingredienti e particelle sono fermi e la timeline è finita, il canvas non viene più ridisegnato.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | 'Book a table' | La scritta a riposo. |
DONE | script.js | 'Table booked' | La scritta sulla pillola cotta. |
STRETCH | script.js | 1.08 | Quanto si allarga la pasta con lo schiaffo: 1 per niente. |
MOZZARELLA | script.js | 6 | Quanti pezzi di mozzarella cadono sulla pizza. |
BASIL | script.js | 3 | Quante foglie di basilico cadono sulla pizza. |
GRAVITY | script.js | 2400 | Quanto forte cadono gli ingredienti. |
BOUNCE | script.js | 0.28 | Quanto rimbalzano gli ingredienti quando arrivano: 0 per niente. |
BAKE | script.js | 1.4 | I secondi che la pizza resta in forno. |
BRICKS | script.js | 13 | Quanti mattoni fanno l'arco del forno. |
HOLD | script.js | 2.6 | I secondi in cui resta la pillola cotta prima di tornare pasta. |
SOFT | script.js | 1 | Quanto è morbida la pasta: 0,5 soda, 1,6 molto molle. |
Quando usarla
Per la prenotazione di una pizzeria, di un ristorante o di un forno, o per l'ordine di una consegna a domicilio: un'azione sola e importante, dove si può spendere qualche secondo per farla ricordare.
Sul telefono
I tocchi fanno come i clic e il dito ammacca la pasta dove tocca; col dito non c'è la pasta che si sporge verso il puntatore. Il forno sale circa 60 pixel sopra la pillola e sporge una trentina di pixel ai lati: a 390 pixel ci sta senza sforare.
Con il movimento ridotto
Niente molle, niente schiaffo, niente cadute, niente fuoco che si muove, niente farina né vapore. Al clic la scritta svanisce, il pomodoro e poi gli ingredienti compaiono già al loro posto con una dissolvenza, il forno appare e sparisce in dissolvenza con un bagliore fermo, la cottura si dissolve sulla pizza e la pillola dorata con la scritta arriva con una dissolvenza; poi torna pasta allo stesso modo.
Trappole
- Le macchie di bruciato messe a distanze regolari lungo il bordo sembravano una fila di puntini: ora stanno a gruppi di uno, due o tre con dei tratti vuoti in mezzo, ognuna con un alone morbido, e compaiono a soglie diverse della cottura.
- Il vapore disegnato a pezzetti, ognuno con la sua trasparenza, sembrava una catenella tratteggiata: ora ogni filo è una sola linea con una sfumatura verticale per la trasparenza.
- Due tween sulla stessa trasparenza di un mattone si pestavano i piedi: l'entrata di ogni mattone è un solo fromTo che porta insieme caduta, rotazione e trasparenza.
- La larghezza della pillola si misura sulla scritta già allargata dall'hover (circa un 18 per cento in più), così la scritta non tocca mai le teste tonde.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 15 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 13 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.
