Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
La notifica del tappo che salta
La notifica di una bella notizia, un ordine confermato o un obiettivo raggiunto, che arriva come una bottiglia di spumante: il collo della bottiglia entra dal bordo, la gabbietta si svita e scivola via, il tappo salta girando, ricade e rimbalza fuori, e la schiuma dorata esce con le bollicine, riempie la forma della notifica e si posa diventandone il fondo, su cui si scrive il messaggio. Quando si chiude, la schiuma si sgonfia e le bollicine scoppiano.
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 popping cork toast</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 good news toast of a wine shop and a savings app, delivered like a bottle of sparkling wine: the neck of
the bottle comes in from the edge, the wire cage is untwisted and slips off, the cork creeps out and pops
(it flies, turns, falls and bounces away), and the golden foam gushes out with its bubbles, fills the shape
of the notification and settles into its background, where the message is written. When it closes, the foam
sinks back, its bubbles bursting. The bottle, the cork, the foam and the bubbles are painted by script.js
on the canvas; the words and the buttons are real HTML on top -->
<div class="cellar" data-cellar>
<div class="slot" data-slot>
<canvas class="fizz" aria-hidden="true" data-fizz></canvas>
<section class="card" aria-label="Notification" data-card inert>
<svg class="card__icon" viewBox="0 0 28 28" aria-hidden="true" data-icon>
<path class="card__wine" d="M10.9 8.2h6.2l-.35 4.2a2.75 2.75 0 0 1-5.5 0z" data-wine/>
<path class="card__glass" d="M10 3.5h8l-.62 8.9a3.4 3.4 0 0 1-6.76 0zM14 15.8v7.6M10.4 23.9h7.2" data-glass/>
</svg>
<div class="card__text">
<p class="card__title" data-title></p>
<p class="card__body" data-body></p>
</div>
<button class="card__close" type="button" aria-label="Dismiss notification" data-close>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg>
</button>
</section>
</div>
<button class="trigger" type="button" data-trigger data-autoclic>
<span class="trigger__label" data-trigger-label></span>
</button>
<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.
34 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 del tappo che salta» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, da solo al centro, un pulsante sottile color crema, Place order. Premendolo, nel posto della notifica (380 per 70 pixel) compare appena il contorno della sua forma, e dal bordo sinistro entra, uscendo dal buio, il collo di una bottiglia di vetro verde: la stagnola dorata strappata sotto il collo, con le sue pieghe che prendono la luce, la fascia bordeaux, il tappo di sughero e la gabbietta di filo d’argento con la capsula dorata in cima. Il piccolo occhiello della gabbietta si svita girando su sé stesso, la gabbietta si allenta e scivola via cadendo; la bottiglia si alza, il tappo esce piano tremando sotto la pressione e poi salta: vola lungo il collo girando su sé stesso, ricade con la gravità, rimbalza sul fondo e rotola fuori, mentre dal collo esce uno sbuffo di gas. Subito dopo esce la schiuma, dorata, con gocce di vino e bollicine: prima un getto forte, poi sempre meno mentre la bottiglia si abbassa a versare e torna indietro. La schiuma atterra nella forma della notifica, si ammucchia, scorre e ondeggia, la riempie e si posa: diventa un cuscino di schiuma dalla crema in alto all’oro in basso, pieno di bollicine, col bordo di sopra mosso dalle bolle e una luce calda sul pavimento. Le bollicine salgono, scoppiano in superficie e rallentano fino a fermarsi. Sulla schiuma si scrive il messaggio: il calice si disegna e si riempie, le lettere di Your order is confirmed salgono una a una dalla schiuma, sottili e poi piene, e la riga Two bottles of Brut · arriving Friday scivola dentro allargandosi; poi la croce. Col puntatore sopra (o col dito) le bollicine ricominciano a salire. Dopo cinque secondi, con la croce o con Esc, le parole se ne vanno e la schiuma si sgonfia: scende, le bollicine scoppiano a decine sulla superficie che cala, e resta il nero. Il pulsante intanto è passato alla notizia dopo, Add the last €40, che fa saltare un altro tappo per You hit your goal.
Come funziona
La bottiglia, il tappo e la gabbietta disegnati sul canvas
La bottiglia è un profilo lungo il suo asse (il labbro tondo, l’anello, il collo, la spalla) disegnato due volte, sopra e sotto, e riempito con una sfumatura di traverso; sopra ci sono i riflessi, la stagnola col bordo strappato, le pieghe che prendono o non prendono la luce e la fascia. Tappo e gabbietta si disegnano nello stesso sistema: l’occhiello della gabbietta, visto di lato, si allarga e si stringe col coseno del suo giro mentre si svita. La bottiglia sta su un livello a parte, cancellato con due sfumature in destination-out: così esce dal buio a sinistra e sotto il pavimento.
Il tappo vola con la fisica di un lancio
Il tappo parte lungo il collo con una velocità ricavata dalle formule del lancio, quella che lo fa ricadere vicino al fondo della notifica (POP la moltiplica), e una rotazione costante. Poi è gravità, rimbalzo sul pavimento con BOUNCE, attrito che frena la corsa e passa parte della velocità alla rotazione, come un tappo che rotola; oltre il bordo svanisce. La gabbietta, sfilata un attimo prima, cade allo stesso modo e si spegne prima di arrivare al pulsante.
Lo spruzzo è fatto di particelle
Mentre il getto è forte escono fino a 820 particelle al secondo dalla bocca, con un ventaglio che si allarga quando la spinta cala: schiuma (più leggera, frenata dall’aria), gocce di vino e bollicine. Veloci si disegnano come strisce lungo la velocità, lente come gocce con un riflesso. La forza del getto è un tween GSAP che scende come (1 − t)², e intanto la bottiglia si abbassa a versare.
La schiuma posata scorre come un liquido
La schiuma atterrata è una fila di colonne, una ogni tre pixel, mossa dalle equazioni delle acque basse su una griglia sfalsata: la differenza di altezza spinge il flusso fra due colonne, il flusso porta l’altezza, con uno smorzamento forte perché la schiuma è densa e un poco di cedimento che arrotonda i fronti. Ogni particella che atterra aggiunge il suo volume alle colonne sotto di lei e un po’ della sua spinta; nessuna colonna supera di molto la notifica, il troppo scivola ai lati. Il volume di ogni particella è calcolato perché il getto riempia circa i quattro quinti della forma.
Si posa nella forma della notifica
Per posarsi le colonne vengono tirate, sempre più forte, verso il profilo di un rettangolo arrotondato: la forma della notifica, angoli compresi. Una cupola che rimbalza con un elastico e il bordo mosso dalle bolle (due seni in valore assoluto, che si calmano a riposo) fanno il resto; la schiuma si dipinge con una sfumatura dalla crema all’oro, l’ombra ai lati e in fondo, un riflesso in alto e una luce calda sul pavimento. Chiudendo, lo stesso tiro porta le colonne a zero e la schiuma si sgonfia.
Le bollicine, le parole e i gesti
Le bollicine sono un mucchio di cerchi che salgono finché la schiuma è fresca, si vedono solo sotto la superficie e quando la toccano scoppiano in un anello che si apre; quando la superficie scende, scoppiano tutte. Le parole sono HTML vero sopra il canvas: le lettere del titolo (Fraunces) salgono con lo spessore che cresce da 250 a 620, la riga sotto (Instrument Sans) si allarga con l’asse wdth. Una riga role="status" le legge, la croce ed Esc chiudono, il tempo si ferma sotto il puntatore, col dito e col focus della tastiera. Il ciclo di disegno si ferma da solo quando niente si muove.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
MESSAGES | script.js | due, Your order is confirmed e You hit your goal | Le belle notizie, a turno: le parole del pulsante, il titolo e la riga sotto. |
LIFE | script.js | 5 | I secondi in cui la notifica resta prima che la schiuma si sgonfi (0: finché la chiudi); aspetta col puntatore sopra. |
PRESSURE | script.js | 0.45 | I secondi in cui il tappo esce piano, tremando, prima di saltare. |
POP | script.js | 1 | Quanto forte salta il tappo: 1 ricade vicino al fondo della notifica, 1.3 le vola sopra. |
SPIN | script.js | 20 | Quanto gira il tappo in aria, in radianti al secondo. |
BOUNCE | script.js | 0.42 | Quanto rimbalza il tappo quando tocca terra: 0 niente, 0.8 molto. |
FOAM | script.js | 1 | Quanto spruzzo esce: 0.5 un filo, 1.8 un getto (la notifica si riempie uguale). |
BUBBLES | script.js | 1 | Quante bollicine ci sono nella schiuma: 0.3 poche, 1.8 tante. |
SETTLE | script.js | 0.8 | I secondi in cui la schiuma si posa nella forma della notifica. |
FIRST | script.js | 0 | I secondi prima che salti da solo un primo tappo (0: aspetta il pulsante). |
Quando usarla
Per le notizie che meritano un brindisi, una alla volta: un ordine confermato in un’enoteca o in un negozio, un obiettivo di risparmio raggiunto, una prenotazione per una festa, un traguardo in un’app. Il colpo di scena dura circa quattro secondi, quindi non va bene per le notifiche di tutti i giorni; per un sito sobrio si abbassano FOAM e BUBBLES. Il posto della notifica deve avere un po’ di aria sopra, dove vola il tappo.
Sul telefono
La notifica prende la larghezza dello schermo meno 32 pixel (358 a 390) e sotto i 420 pixel gli spazi e il testo si stringono un poco; la bottiglia entra un poco più vicina al bordo e la velocità del tappo si ricalcola dalla larghezza, così ricade comunque dentro la notifica. Col dito sulla notifica le bollicine ripartono e il tempo si ferma; la croce ha un’area di tocco più grande di quella disegnata. Al cambio di misura le colonne della schiuma si ricampionano, anche a metà del getto.
Con il movimento ridotto
Niente bottiglia, niente tappo che vola e niente spruzzo: la notifica di schiuma compare in dissolvenza già posata, con le bollicine ferme, e le parole compaiono in dissolvenza. Chiudendo, schiuma e parole svaniscono in dissolvenza.
Trappole
- Le particelle atterravano sulla cima del mucchio di schiuma e lo facevano crescere ancora: sotto la bocca si alzava una torre alta più del doppio della notifica. Ora l’atterraggio si misura su un’altezza al massimo poco sopra la notifica e il troppo di una colonna scivola alle vicine.
- Con le sole acque basse i fronti della schiuma restavano pareti verticali, come blocchi: un poco di cedimento fra due colonne vicine li arrotonda in pendii.
- Lo spruzzo fatto di grossi grumi bianchi sembrava popcorn: ora sono grumi più piccoli color crema, gocce dorate e qualche bollicina, disegnati come strisce quando vanno veloci.
- Con una colonna ogni tre pixel gli angoli di sopra della notifica venivano tagliati in verticale: quando la schiuma si posa la si ritaglia anche col rettangolo arrotondato vero, e il riflesso del bordo si ferma prima degli angoli.
- Il tappo lanciato a velocità fissa cadeva fuori dalla notifica sul telefono e rimbalzava sul niente: la velocità si ricava dalla larghezza, con le formule del lancio, perché ricada vicino al fondo.
- L’anteprima della libreria fa clic da script: quel clic fa il giro intero (tappo, schiuma, messaggio, chiusura) e quelli che arrivano durante il giro si ignorano; Invio da tastiera, che pure ha detail 0, è un clic vero (isTrusted) e funziona come il mouse.
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 17 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.
