Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
La notifica appannata
La notifica di un pagamento con l’annulla, dove il tempo per annullare è il fiato su un vetro: la notifica di vetro scuro esce da sotto il pulsante e si appanna, un dito scrive Undo nella condensa, e la condensa evapora dai bordi verso la parola. Quando se ne va anche il contorno della parola il pagamento è fatto; Undo pulisce il vetro con una passata e rimette il pagamento nel pulsante.
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 fogged glass toast</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/golos-text@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the pay button of a money app and, under it, the notifications of the payments, made of dark glass. Each one
fogs up as it comes out, like a cold glass breathed on, and a fingertip writes Undo in the fog: that patch is
the Undo button, and the time to undo is the fog clearing from its edges. When the last of it has gone, the
payment is final. The button's words and the notifications are made by script.js, from PAYMENTS -->
<div class="wallet" data-wallet>
<button class="pay" type="button" data-pay data-autoclic>
<span class="pay__label" data-label></span>
</button>
<section class="stack" aria-label="Payments" data-stack>
<ol class="stack__list" data-list></ol>
</section>
<p class="sr" role="status" aria-live="polite" aria-atomic="true" 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.
33 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 notifica appannata» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un pulsante color avorio alto 60 pixel, Send €24.00 to Mara. Premendolo, da sotto il pulsante esce la notifica del pagamento, una lastra di vetro scuro alta 70: Sent €24.00 to Mara, Train tickets to Lyon e la croce. Mentre esce, il vetro a destra si appanna dal centro verso fuori come un bicchiere freddo su cui si alita, e un dito scrive Undo nella condensa, lettera dopo lettera: dove passa il dito il vetro torna scuro e pulito, e ai due lati della traccia resta un filo d’acqua più chiaro. Quella macchia di condensa è il pulsante Undo. Poi la condensa evapora: si ritira dai bordi verso la parola, sempre più in fretta, finché resta solo il contorno della parola, dove l’acqua spinta dal dito è più spessa, e alla fine se ne va anche quello. A vetro pulito il pagamento è fatto: dove c’era la condensa si disegna la spunta di Paid e la notifica se ne va. Intanto le parole del pulsante sono passate al pagamento dopo. Undo pulisce la condensa con una passata da sinistra a destra: la notifica dice Payment canceled, €24.00 is back in your wallet, col segno dell’annulla dove c’era la condensa, e rientra sotto il pulsante, che torna a proporre lo stesso pagamento. Col puntatore su una notifica, col focus della tastiera dentro o col dito che la tiene, la condensa smette di evaporare. I pagamenti si mettono in fila sotto il pulsante, il più nuovo in alto, tre al massimo: uno in più fa chiudere subito il più vecchio, che esce spinto in fondo. La croce o Esc chiudono una notifica, e la sua condensa evapora di colpo. All’apertura della pagina parte un primo pagamento da solo.
Come funziona
Il fiato sul vetro
La condensa è un velo d’acqua fatto di goccioline, e ogni pixel della macchia sa quanta acqua ha. Il fiato ne lascia di più al centro e sempre meno verso il bordo: lo spessore cala come 1 − d³, con d la distanza dal centro di un rettangolo arrotondato (una superellisse), resa irregolare da due ottave di rumore, così il bordo è mosso come quello di un fiato vero. La macchia si dipinge fino a due volte la misura CSS, quindi nitida anche sugli schermi densi.
Evapora allo stesso ritmo dappertutto
Ogni secondo se ne va la stessa quantità d’acqua in ogni punto: l’acqua rimasta è lo spessore meno il ritmo per il tempo. Per questo il vetro torna pulito prima dove c’era meno acqua, ai bordi, e il bordo pulito avanza verso la parola, sempre più in fretta perché lo spessore è piatto al centro. Il ritmo si ricava dal punto più spesso, così il vetro è pulito esattamente LIFE secondi dopo. Il tempo della condensa si somma solo quando niente lo tiene.
Il dito scrive Undo
La parola è un percorso a mano di diciannove curve cubiche, spezzate in punti ognuno con la lunghezza fatta fin lì. Il dito lo traccia in WRITE secondi su una tela nascosta, a punte tonde, fino al punto in cui è arrivato; poi si leggono due maschere: la traccia (lì l’acqua non c’è più) e la traccia allargata, i due fili d’acqua spinti ai lati. Sui fili l’acqua vale RIM volte il fiato più spesso, la stessa lungo tutta la parola: il contorno della parola è l’ultima cosa a sparire, e sparisce tutto insieme.
La luce nelle goccioline
Dove c’è ancora acqua le goccioline diffondono la luce: l’opacità sale con uno smoothstep sull’ultimo EDGE dell’acqua (il bordo morbido), è un po’ più trasparente dove il velo è sottile, e ha la grana delle gocce, un valore a caso per pixel ammorbidito coi vicini. Si scrive tutto in un ImageData e si dipinge con putImageData; la macchia si ridipinge solo quando è cambiato qualcosa.
Il fiato che si posa e la passata
Uscendo, la condensa compare dal centro verso fuori in BREATH secondi, poi il dito scrive. Undo è una passata: un tratto largo 46 pixel che attraversa la macchia da sinistra a destra in 0,28 secondi e porta via l’acqua dove passa; quello che resta svanisce in 0,2 secondi, e la macchia lascia il posto al segno dell’annulla. Chiusa con la croce, l’acqua che resta evapora in un quarto di secondo mentre la notifica svanisce.
La fila e il tempo
Le notifiche sono elementi di lista, la più nuova in cima, a 80 pixel l’una dall’altra; escono da sotto il pulsante perché la pila è tagliata da un clip-path proprio al suo bordo inferiore, e Undo ce le fa rientrare. Il tempo si ferma col puntatore su una notifica (anche nello spazio fra due, tenuto da uno pseudo-elemento), col focus della tastiera dentro (solo :focus-visible, perché anche un clic dà il focus al pulsante), col dito che la tiene e con la pagina nascosta. Oltre MAX pagamenti il più vecchio si chiude subito. Le parole le legge una riga role="status", Undo si raggiunge col tasto Tab ed Esc chiude la notifica più nuova.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LIFE | script.js | 6 | I secondi per annullare un pagamento: quanto dura la sua condensa (aspetta col puntatore sopra). |
BREATH | script.js | 0.4 | I secondi in cui il vetro si appanna. |
WRITE | script.js | 0.6 | I secondi in cui il dito scrive Undo nella condensa. |
RIM | script.js | 1.1 | L’acqua che il dito spinge ai lati della traccia, rispetto al fiato più spesso: con 1 la parola sparisce insieme al resto, più alto e il suo contorno resta più a lungo. |
EDGE | script.js | 0.05 | Quanto è morbido il bordo della condensa che si ritira: 0.01 netto, 0.3 sfumato. |
GRAIN | script.js | 0.06 | La grana delle goccioline: 0 liscia, 0.3 grossa. |
HOLD | script.js | 1.4 | I secondi in cui una notifica resta dopo Paid o dopo Undo. |
MAX | script.js | 3 | Quanti pagamenti possono aspettare insieme: uno in più chiude subito il più vecchio. |
FIRST | script.js | 0.8 | I secondi prima che parta da solo un primo pagamento (0 per nessuno). |
CURRENCY | script.js | € | Il segno davanti agli importi. |
PAYMENTS | script.js | quattro, da Mara Ilić 24 a Jonah Petit 9.20 | Chi si paga, a turno: il nome, l’importo e la nota. |
Quando usarla
Per un’azione che sposta qualcosa di prezioso e che per qualche secondo si può ancora disfare: un pagamento, un rimborso fra amici, una mancia, un acquisto con un clic. Poche notifiche alla volta, con una riga di titolo e una di dettaglio; la condensa che si ritira dice quanto tempo resta senza un numero e senza una barra, e si legge anche in piccolo.
Sul telefono
La colonna prende la larghezza dello schermo meno 32 pixel (358 a 390) e la condensa si dipinge fino al doppio della sua misura. Col dito su una notifica la condensa smette di evaporare finché il dito resta; la macchia di Undo è un bersaglio di 112 per 52 pixel e la croce ha un’area di tocco più grande di quella disegnata.
Con il movimento ridotto
Niente fiato che si allarga e niente dito che scrive: la condensa compare in dissolvenza con la parola già scritta, e continua a evaporare dai bordi, che si assottigliano dove sono senza che niente si sposti. Undo fa svanire la condensa invece della passata; le notifiche entrano ed escono in dissolvenza e le parole del pulsante cambiano in dissolvenza.
Trappole
- Con la condensa che sfumava piano (1 − e^(−acqua/morbidezza)) la macchia visibile si restringeva molto prima dell’acqua: a un terzo del tempo metà era già sparita e il tempo non si leggeva. Ora la condensa è piena finché c’è acqua, con un bordo morbido stretto (EDGE dell’acqua più spessa), e diventa solo un po’ più trasparente dove il velo è sottile.
- Coi fili d’acqua del dito proporzionali al fiato sotto di loro, le punte della parola, che stanno dove il fiato è più sottile, sparivano prima e la parola si leggeva «nd». Ora l’acqua sui fili è la stessa lungo tutta la parola (RIM volte il fiato più spesso) e il contorno se ne va tutto insieme.
- Uno spessore misurato dal riquadro della parola faceva della condensa un rettangolo grigio, più un’etichetta che un fiato. La macchia ora è tonda e irregolare, con spessore 1 − d³: piatto al centro, così resta grande per un po’ e poi si ritira sempre più in fretta.
- La parola scritta troppo grande (94 pixel su 112) finiva ai bordi, dove la condensa è sottile, e si leggeva «Indo»: larga 60 pixel sta tutta dentro la condensa.
- Undo premuto da tastiera disattivava il pulsante col focus sopra, e il focus finiva sul body. Ora il focus da tastiera passa alla croce prima che la macchia si disattivi; quello lasciato da un clic o da un tocco si lascia andare, e solo il focus della tastiera ferma il tempo, se no dopo un tocco su Undo la notifica non se ne andava più.
- La grana come un valore a caso per pixel sembrava la neve di un televisore: ammorbidita coi vicini e più leggera sembra fatta di gocce.
Librerie
GSAP 3.15.0, Golos Text (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 6 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.
