Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il becher delle gocce
Il caricamento di sei file fatto come un becher di vetro graduato sotto un contagocce: ogni pezzo di dati è una goccia che si gonfia sulla punta, si allunga, si stacca e cade, rompe la superficie e solleva un’onda che corre fino al vetro e torna. Ogni file ha il suo colore, così i file si posano a strati, e il livello sulle tacche è la percentuale. Se un pezzo non passa la goccia diventa torbida e resta appesa finché Retry non la riassorbe; alla fine il contagocce si alza, il liquido si calma e un riflesso attraversa il vetro: Upload complete.
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 drop beaker upload</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the drop beaker: an upload of six files shown as a graduated glass beaker under a dropper. Every chunk of data
is a drop that swells at the tip, stretches, pinches off and falls; it sinks into the liquid and lifts a wave.
Every file has its own colour, so the files settle in layers, and the level is the progress, read on the
beaker's marks. The beaker, the dropper and the drops are painted by script.js on the canvas -->
<section class="becher" aria-label="File upload" data-becher>
<div class="becher__scene" role="progressbar" aria-label="Upload progress" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="0" aria-valuetext="Ready to upload" data-scene>
<canvas class="becher__paint" aria-hidden="true" data-paint></canvas>
</div>
<div class="becher__info" aria-hidden="true">
<p class="becher__title">
<svg class="becher__tick" viewBox="0 0 24 24" data-tick><path d="M5.5 12.6l4.2 4.2 8.8-9.4" pathLength="1"/></svg>
<span class="becher__swap" data-title>6 files · 84 MB</span>
</p>
<p class="becher__pct" data-pct>0%</p>
<p class="becher__meta"><span class="becher__swap" data-meta>Ready to upload</span></p>
</div>
<div class="becher__buttons">
<button class="pill" type="button" data-go data-autoclic><span class="pill__label" data-label>Upload files</span></button>
</div>
<p class="sr" role="status" 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.
50 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 becher delle gocce» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, da solo al centro, un becher di vetro con il beccuccio a sinistra e le tacche stampate in bianco a destra, una ogni 5%, più lunghe e con il numero a 25, 50, 75 e 100%; sopra c’è un contagocce con la pompetta di gomma e il tubo di vetro pieno del colore del primo file. Sotto il becher le parole 6 files · 84 MB e Ready to upload, e la pillola Upload files. Puntando la pillola la goccia sulla punta del contagocce si gonfia un poco, pronta a cadere. Premuta, il caricamento parte: la riga dice Uploading 6 files, sotto il nome del file e i megabyte arrivati (hero-render.png · 31 of 84 MB), a destra la percentuale grande. Ogni pezzo di dati, circa 6 MB, è una goccia: si gonfia sulla punta mentre viaggia, poi si allunga su un collo che si assottiglia, si stacca e cade allungandosi un poco. Toccando il liquido si fonde con la superficie, che si incava e risale, scende nel liquido come una nuvola del suo colore e fa partire un’onda che corre fino al vetro e rimbalza, mentre uno spruzzo salta su e qualche gocciolina vola di lato. Il colore nel tubo del contagocce cala a ogni goccia; quando un file finisce il contagocce si sposta un poco con una molla e si riempie del colore del file dopo, così nel becher i file restano a strati (il file piccolo è una riga sottile). Le tacche che il liquido ha superato diventano più chiare e sotto il becher il liquido getta sul piano una luce del suo colore. Nella demo un caricamento ogni due si ferma a metà: la goccia appesa diventa torbida e grigia, trema e resta lì, la riga diventa Upload paused in rosso con Connection lost on hero-render.png e la pillola dice Retry; Retry riassorbe la goccia nel contagocce, che torna pulito, e il pezzo riparte. Alla fine il contagocce si alza e sparisce, le onde si spengono in fretta, un riflesso di luce attraversa il vetro in diagonale e la riga diventa Upload complete con una spunta verde che si disegna; Upload again svuota il becher e ricomincia. Durante il caricamento la pillola, chiara solo col bordo, dice Cancel: il becher si svuota e torna a riposo.
Come funziona
Le gocce sono metaball
La goccia sulla punta, il collo, la goccia che cade, gli spruzzi e la superficie del liquido sono campi che si sommano: ogni palla vale (1 − t²)² fino a 1,848 volte il suo raggio, così la somma passa la soglia 0,5 proprio sul raggio. Lo script calcola il campo pixel per pixel, ma solo nel rettangolo che le palle raggiungono, e lo scrive in un’ImageData che poi copia sul canvas. Il bordo è antialiasato dividendo la distanza dalla soglia per la pendenza del campo, e la stessa pendenza dà la normale: la luce viene da in alto a sinistra con un riflesso stretto, e dal fondo della goccia passa un po’ di luce, come in una lente.
Come si stacca una goccia
Mentre il pezzo viaggia la goccia cresce con la radice quadrata del tempo, appesa a un collo che è un campo a capsula (la distanza da un segmento). Quando il pezzo è arrivato, in 0,13 secondi la goccia scende di 10 unità e il collo si assottiglia fino a zero: il campo nel mezzo scende sotto la soglia prima che altrove e la goccia si strozza da sola, senza nessun disegno a mano del momento in cui si stacca. Cadendo si allunga con la velocità (fino al 40%) restando dello stesso volume.
La superficie è una catena di molle
39 punti, ognuno legato ai vicini e alla quota di riposo: a = c²/dx² · (h₋₁ + h₊₁ − 2h) − 14h − d·v, a passi di un 240° di secondo, con le pareti che riflettono. Dopo ogni passo si toglie la media, così l’acqua non si perde: il cratere della goccia spinge su il resto. Una goccia che entra dà ai punti vicini una spinta proporzionale alla sua velocità, lancia uno spruzzo che salta su dopo 90 millesimi (quando il cratere risale) e qualche gocciolina di lato, che ricadendo fa la sua piccola onda. Anche la superficie è un campo, appena sotto la soglia sulla sua linea: una goccia che si avvicina si attacca al liquido con un ponte, come succede davvero.
Il livello e gli strati
Ogni goccia porta i suoi megabyte: quando tocca il liquido si aggiungono al suo file e il livello li insegue con una molla esponenziale, così sale a piccoli scalini morbidi. Il liquido è un solo poligono, la superficie in alto, riempito con un gradiente verticale che ha una fascia per ogni file, alta come i suoi megabyte, con una cucitura morbida di 3 unità fra due file. Sopra ci sono le nuvole delle gocce appena entrate (gradienti radiali che scendono e si allargano), l’ombra delle pareti tonde e la luce sotto la superficie; il becher di vetro si disegna dopo, con le tacche che il liquido ha superato più chiare.
Errore, fine e ripartenza
Il pezzo che va storto si ferma al 72% della goccia: il colore va verso il torbido in mezzo secondo, una grana fissata alla goccia la rende opaca e la goccia trema con un seno che si spegne. Retry la fa rimpicciolire fino a zero dentro la punta e il pezzo riparte da capo. Alla fine lo smorzamento della superficie sale di 7, il contagocce si alza con un back.in e un riflesso diagonale, un gradiente lineare ritagliato sul vetro, lo attraversa in 1,1 secondi. Il ciclo di disegno gira solo finché qualcosa si muove: gocce, onde, livello o tween.
Chi non vede e la demo
Il becher è un role=progressbar con aria-valuenow e aria-valuetext aggiornati al massimo ogni mezzo secondo, aria-busy mentre lavora e una riga aria-live per l’inizio, l’errore, la fine e l’annullamento. Il pulsante resta lo stesso elemento in tutti gli stati, quindi lo stato attivo da tastiera non si perde. I clic da script (detail 0, quelli dell’anteprima della libreria) non annullano mai e ripartono solo dopo 2,4 secondi di Upload complete, così la miniatura gira da sola mostrando anche l’errore.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SECONDS | script.js | 7 | Quanto dura il caricamento della demo, in secondi (uno vero segue i byte che arrivano). |
FILES | script.js | [['brand-guide.pdf', 18.2], ['hero-render.png', 24.6], …] | I file da caricare, ognuno col suo nome e i suoi megabyte; il colore di ognuno sta in style.css (--drop-1 … --drop-6, poi si ricomincia). |
CHUNK | script.js | 6 | I megabyte di una goccia: un file si divide in gocce di circa questa misura (almeno una per file). |
FAIL_EVERY | script.js | 2 | Nella demo, un caricamento ogni quanti va storto; 0 mai. |
FAIL_AT | script.js | 0.5 | Fin dove arriva il caricamento che va storto, da 0 a 1. |
DROP | script.js | 5.6 | Il raggio di una goccia di CHUNK megabyte, in unità del disegno (il becher è largo 152); le gocce più piccole sono un po’ più piccole. |
GRAVITY | script.js | 1500 | La gravità sulle gocce e sugli spruzzi, in unità al secondo quadrato: più forte, le gocce entrano più veloci e fanno onde più alte. |
WAVE | script.js | [210, 1.8] | La superficie: quanto corre un’onda (unità al secondo) e quanto in fretta si spegne. |
SPLASH | script.js | 3 | Le goccioline che saltano su quando una goccia entra: la prima è lo spruzzo dritto, le altre volano di lato. |
WORDS | script.js | { busy: 'Uploading', error: 'Upload paused', done: 'Upload complete' } | Le scritte sotto il becher mentre carica (seguita dal numero di file), quando si ferma e alla fine; quella a riposo si cambia in index.html. |
LABELS | script.js | { busy: 'Cancel', error: 'Retry', done: 'Upload again' } | Le scritte del pulsante mentre carica, quando si ferma e alla fine; quella a riposo, Upload files, si cambia in index.html. |
Quando usarla
Per un caricamento di qualche secondo con più file, in un prodotto che può permettersi un tocco di gioco: uno strumento creativo, un laboratorio o un’app di scienza, un servizio di consegna di file, la pagina dei campioni di un laboratorio. Gli strati dicono quali file sono già arrivati senza un elenco, e le gocce danno un ritmo all’attesa. Per un caricamento di un file solo, o di centinaia di file piccoli (sarebbero centinaia di gocce), è meglio una barra semplice.
Sul telefono
Il componente è largo 380 pixel e sul telefono prende la larghezza dello schermo meno 16 pixel per lato (358 a 390): il disegno si scala con la larghezza e il canvas dipinge alla densità vera dello schermo, fino a due volte, quindi le gocce restano nitide. Il campo delle metaball si calcola solo intorno alle gocce, così anche su un telefono lento resta leggero. La pillola è alta 44: col dito si schiaccia e rimbalza; la goccia che si gonfia sulla punta, la pillola che si gonfia e la scritta che si allarga ci sono solo col mouse (la goccia anche con la tastiera).
Con il movimento ridotto
Niente gocce che cadono, onde, spruzzi, nuvole né riflesso finale, e il contagocce non si sposta: il liquido sale lo stesso a strati, insieme alla percentuale, perché è lui a dire a che punto si è, e il colore nel contagocce cambia di colpo a ogni file. Alla fine il contagocce sparisce con una dissolvenza; le parole cambiano con una dissolvenza e la spunta compare senza disegnarsi.
Trappole
- La goccia torbida dell’errore, con una grana fitta e forte, sembrava un sasso o un biscotto più che un liquido: ora la grana è più larga e leggera (±15%) ed è fissata alla goccia, così non brulica mentre trema.
- La riga col nome del file e i megabyte, cambiata a ogni fotogramma con una dissolvenza, restava sempre a metà della dissolvenza e sembrava spenta: ora si dissolve solo quando cambia il file, e i megabyte si aggiornano direttamente.
- Alla fine si leggeva 99%: il livello insegue i byte e la fine arrivava quando mancava un centesimo. Ora la fine porta il livello al pieno e scrive 100%.
- Due percorsi del vetro passati insieme per riempire lo spessore del fondo: il secondo cominciava con beginPath e cancellava il primo, così si riempiva tutto l’interno. Ora il secondo si aggiunge al primo e il fondo si riempie con evenodd.
- Con la catena di molle troppo rigida verso la quota di riposo, l’onda di una goccia si vedeva appena e moriva prima di arrivare al vetro: ora la spinta è tre volte più forte e la molla verso il riposo è la metà, e l’onda rimbalza sulle pareti.
- Gli spruzzi di lato, partiti tutti insieme alla goccia, sembravano puntini sparsi: ora il primo è uno spruzzo dritto, più grosso, che parte 90 millesimi dopo, quando il cratere risale.
Librerie
GSAP 3.15.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 8 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.
