Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il timer dell’uovo
Il timer per le uova di un’app di cucina, con l’uovo tagliato a metà che cuoce davvero mentre il tempo scende: il calore dell’acqua entra dal guscio come nella fisica vera, l’albume diventa bianco dal bordo verso il centro e il tuorlo si rapprende dal suo bordo. Morbido, bazzotto o sodo vengono fuori da soli. Allo scadere l’uovo esce dall’acqua con un saltello e il tuorlo trema tanto quanto è ancora liquido.
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 egg timer</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/rubik@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the egg timer: the egg is drawn cut in half, and while the time runs down it cooks from the shell inwards,
worked out as heat that really moves through the white and into the yolk. When the time is up the egg is
lifted out of the water and its yolk wobbles as much as it is still runny -->
<section class="egg" aria-label="Egg timer" data-timer>
<div class="egg__pan" data-pan>
<canvas class="egg__canvas" aria-hidden="true" data-canvas></canvas>
</div>
<div class="egg__readout" data-readout>
<span class="egg__time" role="timer" aria-live="off" aria-atomic="true">
<span class="egg__digits" aria-hidden="true" data-time></span>
<span class="sr" data-time-words></span>
</span>
<p class="egg__state"><span class="egg__word" data-word></span><span class="egg__detail" data-detail></span></p>
</div>
<fieldset class="kinds" data-kinds>
<legend class="sr">How you like your egg</legend>
<span class="kinds__pill" aria-hidden="true" data-pill><span class="kinds__copy" data-pill-copy></span></span>
</fieldset>
<div class="egg__controls" data-controls>
<button class="egg__reset" type="button" aria-label="Start over" aria-disabled="true" data-reset>
<span class="egg__turn">
<svg viewBox="0 0 24 24" aria-hidden="true" data-reset-icon><path d="M5.6 9.2A7.2 7.2 0 1 1 4.9 14.2"/><path d="M5.2 4.6v4.8H10"/></svg>
</span>
</button>
<button class="egg__go" type="button" data-go data-autoclic>
<span class="egg__go-words" data-go-words>Start</span>
</button>
<span class="egg__balance" aria-hidden="true"></span>
</div>
<p class="sr" 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.
31 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 timer dell’uovo» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un uovo tagliato a metà per il lungo, grande, col bordo sottile del guscio marrone, la punta a destra: crudo, l’albume è una gelatina scura e trasparente con un filo di luce lungo il bordo in alto, e in mezzo c’è il tuorlo arancione, lucido. Sotto, il tempo in grandi cifre, 07:00, poi Ready e la temperatura del tuorlo, 4 °C (l’uovo esce dal frigo); poi i tre modi di farlo, Soft 5:30, Jammy 7:00 e Hard 10:00, con Jammy scelto in una pillola chiara, e due pulsanti: uno tondo per ricominciare, spento, e una pillola color tuorlo con Start. Scegliendo un altro modo la pillola ci scivola sotto, le parole cambiano colore proprio sul suo bordo e le cifre rotolano al tempo nuovo. Con Start l’uovo scende nell’acqua con un piccolo affondo e un getto di bollicine, comincia a dondolare e dal guscio nascono bollicine che salgono; le cifre scendono e accanto a Cooking la temperatura del tuorlo sale. L’uovo cuoce davvero: l’albume diventa prima lattiginoso e poi bianco partendo dal guscio, un anello che si stringe verso il tuorlo, e quando il calore arriva al tuorlo anche lui si rapprende dal bordo: prima un anello più scuro, denso come marmellata, poi giallo chiaro e granuloso. Pause ferma tutto: niente più bollicine, l’uovo smette di dondolare; Resume riparte. A zero l’uovo viene tirato fuori: si accuccia, fa un salto, ricade schiacciandosi e torna su con un rimbalzo, e il tuorlo trema come una gelatina tanto più quanto è liquido (molto un uovo morbido, appena uno sodo). Sotto le cifre compare Done e il verdetto calcolato dall’uovo stesso, runny, jammy o firm yolk, e il pulsante diventa New egg: l’uovo cotto svanisce e ne arriva uno crudo. Il pulsante tondo ricomincia in qualunque momento.
Come funziona
Il calore, anello per anello
Il taglio è un semipiano intorno all’asse lungo dell’uovo: z lungo l’uovo, r dall’asse, in celle di 0,75 mm (76 per 30). Ogni cella è in realtà un anello, e il calore passa dalle sue quattro facce in proporzione alla loro area: verso l’esterno (i+1)/(i+½), verso l’asse i/(i+½), sopra e sotto 1. È l’equazione del calore in coordinate cilindriche, a volumi finiti, con la conducibilità e la capacità termica dell’albume e del tuorlo (media armonica sulle facce fra i due) e l’acqua a WATER gradi fuori dal guscio. Il passo di tempo è il più lungo che resta stabile, e ogni cella ricorda la temperatura più alta che ha raggiunto: le proteine non tornano indietro.
Il colore della temperatura più alta
Due tabelle di 481 colori, un quarto di grado alla volta, dicono che cosa fa la temperatura: l’albume è trasparente fino a 58 gradi, lattiginoso fino a 66 e bianco sodo verso 80; il tuorlo resta liquido fino a 60, diventa marmellata fino a 65, si rapprende fino a 70 e si fa giallo chiaro sopra. Due livelli, l’albume e il tuorlo, si dipingono pixel per pixel su due canvas nascosti: per ogni pixel la cella e i pesi dell’interpolazione bilineare si calcolano una volta sola, così dipingere vuol dire quattro letture e una tabella. Il tuorlo ha un velo lucido e un punto di luce solo dove è ancora liquido, e una grana dove è sodo.
Il disegno
Il contorno è la curva dell’uovo, y = (B/2)·√((L²−4x²)/(L²+8wx+4w²)), con w che porta la parte più larga verso il fondo; la pelle sotto il guscio è lo stesso contorno spostato lungo le normali. L’albume si disegna dentro il contorno sopra una sagoma nera, così le bollicine che passano dietro non si vedono attraverso l’albume crudo; il tuorlo dentro il suo cerchio, che può tremare per conto suo. L’albume sotto il tuorlo legge la temperatura appena fuori dal tuorlo, così quando il tuorlo si schiaccia sotto non compare un buco.
Bollicine, dondolio e salto
Le bollicine nascono sul guscio, soprattutto sotto e ai lati, crescono attaccate e poi si staccano e salgono sempre più in fretta, ondeggiando. L’uovo dondola con due seni sfalsati finché bolle. A zero una timeline GSAP lo fa accucciare, saltare, ricadere schiacciato (lo schiacciamento tiene fermo il fondo dell’uovo) e tornare su con un elastic.out; all’atterraggio il tuorlo oscilla come una molla smorzata, scala (1+j, 1−j) intorno al suo centro, con ampiezza, frequenza e smorzamento presi da quanto tuorlo è ancora liquido, così un uovo morbido trema a lungo e uno sodo quasi niente, e tutto finisce entro un secondo e mezzo.
Il tempo, gli stati e l’anteprima
Il tempo che resta viene dall’orologio (performance.now), e l’uovo si calcola fino al punto in cui dice l’orologio: una scheda rimasta in background finisce in orario e cotta giusta. Con DEMO il tempo vero viene compresso (sette minuti in venti secondi) ma l’uovo cuoce col tempo che si legge; le cifre allora cambiano senza rotolare. role="timer" con aria-live off, e una regione aria-live che parla solo ai cambi di stato e alla fine. Il clic dell’anteprima (detail 0) fa solo cominciare e riprendere, e dopo la fine aspetta un poco prima di prendere un uovo nuovo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
EGGS | script.js | [['Soft', 330], ['Jammy', 420], ['Hard', 600]] | I modi di fare l’uovo: il nome e i secondi in acqua. |
CHOSEN | script.js | 1 | Il modo scelto quando si apre la pagina: 0 è il primo. |
DEMO | script.js | 20 | Per provarlo, un uovo intero cuoce in questi secondi (le cifre mostrano comunque i minuti veri); 0 = nel tempo vero. |
START | script.js | 4 | La temperatura dell’uovo quando entra in acqua, in gradi: 4 dal frigo, 20 dalla dispensa (cuoce prima). |
WATER | script.js | 100 | L’acqua, in gradi: 100 a bollore pieno; sotto i 65 il tuorlo non si rapprende mai. |
BUBBLES | script.js | 1 | Quanto bolle l’acqua intorno all’uovo: 0 = niente bollicine. |
WOBBLE | script.js | 1 | Quanto trema un tuorlo liquido quando l’uovo esce dall’acqua: 0 = per niente. |
Quando usarla
Per il timer di un’app di ricette o di cucina, di un forno o di una pentola intelligenti, di un’app per la colazione: dove chi aspetta vuole sapere non solo quanto manca ma come sta venendo. Lo stesso calcolo funziona per qualunque cosa cuocia dal bordo verso il centro (un arrosto, un pane, un dolce) cambiando forma e temperature.
Sul telefono
Il componente è largo 360 pixel e a 390 si stringe a 358 senza sforare. I tre modi sono alti 52 pixel, i pulsanti 48 e 56. Il calcolo del calore costa pochissimo (circa 1700 celle); i due livelli si dipingono al massimo trenta volte al secondo mentre l’uovo cuoce, e mai quando è fermo.
Con il movimento ridotto
L’uovo cuoce lo stesso, perché è il tempo: l’albume e il tuorlo cambiano colore senza che niente si muova. Niente bollicine, niente dondolio né affondo, niente salto e niente tremolio alla fine: compaiono Done e il verdetto in dissolvenza. L’uovo nuovo arriva in dissolvenza, la pillola dei tre modi si sposta senza scivolare e le cifre cambiano senza rotolare.
Trappole
- Con le conducibilità dei libri l’uovo cuoceva un quarto più piano delle ricette: dopo dieci minuti il tuorlo di un uovo sodo era ancora liquido nel mezzo. Le ricette contano sul calore che continua a entrare dopo che l’uovo è uscito: la conducibilità è alzata del 30%, e i tre modi vengono giusti ai tempi delle ricette.
- Quando il tuorlo tremava, dove si stringeva compariva una mezzaluna scura: l’albume sotto il tuorlo leggeva le temperature del tuorlo, troppo basse per essere cotto. Ora legge quella appena fuori dal tuorlo.
- Le bollicine che passavano dietro l’uovo si vedevano attraverso l’albume crudo, come se fossero dentro l’uovo: l’uovo si disegna sopra una sagoma nera.
- La camera d’aria in fondo all’uovo, disegnata come una mezzaluna scura, sembrava un errore del disegno: è stata tolta.
- Dipingere i due livelli pixel per pixel costa quattro o cinque millesimi: mentre l’uovo cuoce si dipingono al massimo trenta volte al secondo e i fotogrammi in mezzo riusano l’ultima pittura; la cella e i pesi di ogni pixel si calcolano una volta sola.
- Nella prova veloce le cifre cambiano venti volte al secondo e rotolando sarebbero una macchia: rotolano solo se il cambio prima è di più di un quarto di secondo fa. E rotolando in dissolvenza le due cifre si sovrapponevano a metà trasparenti: ora sono una ruota di contatore, la nuova esattamente una finestra sopra la vecchia.
- Scorrendo con un rimbalzo la pillola dei tre modi usciva dal binario agli estremi, e le parole cambiavano colore tutte insieme prima che la pillola arrivasse (scritta scura sul nero per un attimo). Ora scivola senza rimbalzo e dentro c’è una copia scura delle parole che scorre all’indietro di altrettanto: il colore cambia esattamente sul bordo.
- All’apertura il tempo e i pulsanti si vedevano per un fotogramma e poi sparivano per entrare in dissolvenza: gsap.from con un ritardo scrive i valori di partenza al primo fotogramma; con lazy: false li scrive subito.
- L’anteprima clicca da sola ogni 2,8 secondi e avrebbe messo in pausa l’uovo appena messo in acqua: un clic senza mano né tastiera non mette in pausa (Invio fa un clic con detail 0 come lo script: lo si riconosce dal keydown). Dopo la fine aspetta 2,4 secondi prima di prendere un uovo nuovo, così l’uovo cotto si vede.
Librerie
GSAP 3.15.0, Rubik (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 15 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.
