Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il pulsante della latte art
Il pulsante per ordinare di un bar, con una tazza d'espresso vista dall'alto nella punta tonda della pillola. Al clic il latte si versa e il cuore non è disegnato: è trasportato. La superficie del caffè è una griglia di 72 × 72 celle che tiene il latte e il tono della crema, e a ogni fotogramma un flusso li sposta (avvezione semi-lagrangiana): prima il latte si tuffa sotto la crema, poi sale in un disco bianco, e un ultimo filo tirato attraverso il disco trascina dentro la crema e fuori il latte, facendo l'incavo e la punta del cuore. Dopo un momento un cucchiaino gira il cuore in una spirale e la tazza torna espresso.
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 latte art button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the latte art button: the order button of a coffee bar, with a cup of espresso seen from above in the round left
end of the pill. A click pours the milk: it dives under the crema, then rises as a white disc, and a last thin
pour drawn through it drags the crema in and the milk out into a heart. A moment later a spoon's stir turns the
heart into a spiral and the cup is plain espresso again -->
<div class="latte" data-latte>
<div class="latte__unit">
<button class="latte__btn" type="button" data-btn data-autoclic>
<span class="latte__fill" aria-hidden="true"></span>
<span class="latte__faces">
<span class="latte__face" data-face="rest">
<span class="latte__word" data-wide="Order a flat white" data-rest-text>Order a flat white</span>
<span class="latte__price" data-rest-price>€3.80</span>
</span>
<span class="latte__face latte__face--two" data-face="busy" aria-hidden="true">
<span class="latte__small" data-busy-small>Oat milk · to drink here</span>
<span class="latte__big" data-busy-text>Pouring your flat white</span>
</span>
<span class="latte__face latte__face--two" data-face="done" aria-hidden="true">
<span class="latte__big" data-done-text>Ready at the bar</span>
<span class="latte__small" data-done-small>Order 42 · €3.80</span>
</span>
</span>
</button>
<!-- the cup seen from above: saucer and cup, the coffee on a canvas, and over it the rim's shine and the milk's
stream; the pointer goes through them to the button -->
<div class="latte__cup" aria-hidden="true" data-cup>
<svg class="latte__china" viewBox="-40 -40 80 80" data-china></svg>
<canvas class="latte__coffee" data-coffee></canvas>
<svg class="latte__over" viewBox="-40 -40 80 80" data-over></svg>
</div>
</div>
<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.
21 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 latte art» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola color espresso alta 60 pixel, con un filo di luce in alto e un'ombra morbida sotto; a destra Order a flat white in Bricolage Grotesque color crema e il prezzo €3.80. Nella punta tonda di sinistra, al posto dell'icona, una tazza bianca vista dall'alto sul suo piattino, che sporge appena dalla pillola, col manico in basso a sinistra; dentro l'espresso con la crema dorata, più chiara al centro, maculata di macchioline scure e con anelli appena accennati. Passando sopra la pillola la scritta si allarga, il fondo si gonfia con un rimbalzo e la tazza gira un poco sul piattino: il caffè resta indietro e poi la segue, come un liquido in una tazza che si gira. Al clic la pillola dice Oat milk · to drink here e Pouring your flat white: un filo di latte cade al centro e si tuffa sotto la crema, che si schiarisce intorno; poi il latte sale e si allarga in un disco bianco che spinge la crema verso il bordo; infine il filo si alza e corre dall'alto in basso attraverso il disco: in alto trascina dentro la crema e fa l'incavo, in basso tira fuori il latte e fa la punta. Sulla tazza c'è un cuore bianco con un alone sottile di crema intorno, e la pillola dice Ready at the bar · Order 42 · €3.80. Dopo un momento un cucchiaino gira il caffè: il cuore si avvolge in una spirale, affonda, e torna la crema maculata di un espresso nuovo. Con la tastiera il fuoco mostra un anello e gira la tazza; Invio o Spazio ordinano. Al telefono il tocco smuove la tazza e ordina.
Come funziona
La superficie è una griglia
Il caffè è un canvas di 46 pixel con sopra due campi su una griglia di 72 × 72 celle: quanto latte c'è (0 crema, 1 schiuma bianca) e il tono della crema (0 le sue macchioline scure, 1 la sua luce dorata). La crema di un espresso nuovo nasce da due rumori di Perlin, uno largo per le chiazze e uno fine per le macchioline, più un poco di anelli e un centro più chiaro. A ogni fotogramma la griglia si colora in un ImageData 72 × 72 e si disegna ingrandita e ritagliata nel cerchio della tazza.
Il flusso è la mano del barista
Le celle si spostano lungo un flusso scritto come somma di tre cose: un giro intero del caffè (velocità −y·ω, x·ω), una sorgente dove cade il latte (velocità radiale q / 2π · d / |d|², che allarga il latte di q pixel quadrati al secondo) e un getto sottile dove il filo viene trascinato (una gaussiana stretta nella direzione del movimento). Contro la parete il flusso si spegne. Ogni cella guarda indietro lungo il flusso, in due mezzi passi perché le curve restino curve, e prende il latte e la crema che stavano lì (avvezione semi-lagrangiana, con lettura bilineare).
Come nasce il cuore
Una timeline di GSAP muove i numeri del flusso come una mano: per mezzo secondo il latte cade dall'alto e si tuffa (la crema si schiarisce intorno e il latte resta sotto il 32%); poi la sorgente sale fino a 580 pixel quadrati al secondo e deposita un disco bianco; infine la sorgente si spegne e il getto corre dall'alto in basso attraverso il disco in 0,42 secondi. All'inizio della corsa trascina la crema dentro il disco e fa l'incavo, alla fine trascina il latte fuori e fa la punta: il cuore della latte art viene dallo stesso gesto del barista.
Il colore della schiuma
Il colore di ogni cella mescola la crema (dal suo tono, più scura verso la parete, dove è più sottile) e il latte, con un bordo netto fra 0,3 e 0,6 di latte e un alone marrone dove il latte si assottiglia sulla crema. Sopra il canvas un SVG mette l'ombra della parete, il riflesso sul liquido e il bordo della tazza; il filo di latte è un piccolo disco bianco con la sua ombra.
Il cucchiaino, la tazza e gli stati
Il cucchiaino è un giro del flusso fino a 7 radianti al secondo mentre il latte svanisce: il cuore si avvolge in una spirale e affonda, poi la crema torna quella di partenza. Sotto il puntatore la tazza gira su una molla e il caffè la segue in ritardo, trascinato dalla parete: per non sfumare la crema a ogni passaggio, il caffè intero si disegna ruotato invece di essere trasportato cella per cella. Il pulsante è un button vero con aria-disabled mentre versa, una zona aria-live che dice Pouring your flat white… e poi Ready at the bar.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Order a flat white | La scritta a riposo. |
PRICE | script.js | €3.80 | Il prezzo accanto alla scritta, e di nuovo sotto quando è pronto. |
DETAILS | script.js | Oat milk · to drink here | La riga piccola mentre il latte si versa: il latte scelto e dove si beve. |
POURING | script.js | Pouring your flat white | La scritta mentre il latte si versa; la dice anche la zona aria-live. |
READY | script.js | Ready at the bar | La scritta quando il cuore è fatto. |
TICKET | script.js | Order 42 | La riga piccola sotto, prima del prezzo: il numero dell'ordine. |
POUR | script.js | 1 | Quanto è lenta la versata: 0,6 svelta, 1,6 lenta. Il cuore viene uguale. |
HOLD | script.js | 2.6 | I secondi che il cuore resta prima che il cucchiaino lo giri via. |
HEART | script.js | 1 | Quanto latte va nel cuore: 0,6 un cuore piccolo, 1,3 uno grande che arriva quasi al bordo. |
TURN | script.js | 14 | Quanto gira la tazza sotto il puntatore, in gradi. |
Quando usarla
Per il pulsante d'ordine di un bar, di una torrefazione, di una caffetteria con l'ordine dal telefono o di un hotel con la colazione, e per il Add to cart di chi vende caffè, latte vegetale o tazze. Il pulsante finge l'ordine: in un sito vero il clic manda l'ordine e il latte si versa mentre il server risponde.
Sul telefono
La pillola è larga circa 300 pixel e il piattino sporge di 5 pixel: a 390 pixel ci sta. Il tocco smuove la tazza sul piattino, schiaccia il fondo e ordina. La griglia del caffè è la stessa, e il disegno resta nitido sugli schermi densi.
Con il movimento ridotto
Niente versata e niente giri: il cuore si calcola tutto in un colpo, fuori dalla vista, e appare sulla tazza in dissolvenza; il cucchiaino è una dissolvenza che riporta la crema. La tazza non gira sotto il puntatore, la pillola non si gonfia e la scritta non si allarga (sotto il mouse il fondo si schiarisce appena).
Trappole
- Il caffè che seguiva la tazza girata era trasportato cella per cella come il latte: ogni passaggio del mouse sfumava un po' la crema, e dopo qualche giro le macchioline erano sparite. Un giro rigido non ha bisogno di essere trasportato: ora il caffè intero si disegna ruotato, e solo la versata e il cucchiaino passano per la griglia.
- Le celle fuori dal cerchio restavano colorate e ai quattro angoli del canvas si vedevano dei quadratini marroni (il border-radius sul canvas non bastava). Ora il disegno si ritaglia nel cerchio con ctx.clip() prima di ingrandirlo.
- La crema fatta con un rumore in coordinate polari veniva a vortice, come già mescolata. Ora nasce da un rumore largo e uno fine in coordinate normali, più anelli leggeri e un centro più chiaro, come un espresso appena fatto.
- Con un getto forte il cuore veniva lungo e stretto come un tulipano. Ora il disco è più largo e il getto più leggero: l'incavo e la punta si fanno senza tirare il disco.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
