Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il tergicristallo della pulizia
La pulizia della cache fatta come un parabrezza sotto la pioggia, di notte: ogni goccia è una piccola lente che mostra capovolte e nitide le luci della città dietro il vetro, mentre il vetro bagnato intorno le mostra sfocate. Le gocce grandi scivolano a scatti, lasciano una scia di goccioline e inghiottono quelle che incontrano. Premuto il pulsante partono i due tergicristalli: ogni passata pulisce il suo arco e spinge via l’acqua, la spatola di gomma si ribalta a ogni inversione, e la pioggia torna sempre meno: il vetro pulito è l’avanzamento. Alla fine il vetro si asciuga e un riflesso lo attraversa: 2.4 GB cleared.
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 windscreen wiper cleanup</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the windscreen wiper cleanup: clearing a cache shown as a rainy windscreen at night. Raindrops cover the glass
and each one shows the city lights behind it upside down; the big ones slide, leave a trail and swallow the
small ones. Pressed, the two wipers start: every pass pushes the water away, and less and less rain comes
back, so the clear glass is the progress. At the end the glass is dry and a glint runs across it. The glass,
the lights, the drops and the wipers are painted by script.js on the canvas -->
<section class="wipe" aria-label="Clear cache" data-wipe>
<div class="wipe__glass" role="progressbar" aria-label="Cache clearing progress" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="0" aria-valuetext="Ready to clear 2.4 GB" data-scene>
<canvas class="wipe__paint" aria-hidden="true" data-paint></canvas>
</div>
<div class="wipe__info" aria-hidden="true">
<p class="wipe__title">
<svg class="wipe__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="wipe__swap" data-title>System cache · 2.4 GB</span>
</p>
<p class="wipe__pct" data-pct>0%</p>
<p class="wipe__meta"><span class="wipe__swap" data-meta>Browsers, thumbnails and logs</span></p>
</div>
<div class="wipe__buttons">
<button class="pill" type="button" data-go data-autoclic><span class="pill__label" data-label>Clear cache</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.
47 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 tergicristallo della pulizia» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, da solo al centro, un parabrezza di notte col bordo alto appena curvo: dietro il vetro una strada in città, con i lampioni che si allontanano verso il centro, le luci rosse delle auto davanti, i fari di una che arriva, un semaforo verde e qualche insegna, tutto fuori fuoco come dischi di luce che si specchiano sull’asfalto bagnato. Il vetro è coperto di pioggia: una nebbia di goccioline minute rende tutto più sfocato e lattiginoso, e sopra ci sono le gocce vere, ognuna con dentro la città capovolta e nitida, il bordo scuro, una lunetta di luce in basso e un riflesso in alto. Ogni tanto una goccia diventa troppo pesante e scivola giù a scatti, si allunga un poco, lascia dietro di sé una scia di goccioline e una striscia più limpida nella nebbia, e inghiotte le gocce che incontra diventando più grossa. In basso, parcheggiati, due tergicristalli neri con il braccio, la spatola di gomma e il perno; sotto il vetro le parole System cache · 2.4 GB e Browsers, thumbnails and logs, e la pillola Clear cache. Puntando la pillola i tergicristalli danno un colpetto, come una spinta sulla leva, e ricadono con un rimbalzo. Premuta, la pioggia per un momento si fa più forte e i due tergicristalli partono insieme, paralleli come su un’auto: ogni passata è un arco di 160 gradi che rallenta, esita un attimo all’inversione e torna. Dove passa la spatola il vetro diventa limpido e le luci nitide, le goccioline spariscono e le gocce vengono spinte davanti alla gomma come una fila di perle, che a fine corsa resta sul vetro e scivola via. La gomma si piega contro il verso del movimento e si ribalta a ogni inversione. La pioggia continua, e il vetro appena pulito si bagna e si appanna di nuovo, ma sempre meno: a metà ne arriva meno della metà, verso la fine quasi niente. La riga dice Clearing cache, sotto cosa si sta cancellando e quanto (Thumbnails · 1.3 of 2.4 GB), a destra la percentuale grande. Alla fine i tergicristalli finiscono la passata e si parcheggiano, l’ultima nebbia e le ultime gocce negli angoli si asciugano, un riflesso di luce attraversa il vetro in diagonale e la riga diventa 2.4 GB cleared in verde, con una spunta che si disegna, e Cache is empty · just now. Clear again fa venire uno scroscio che bagna di nuovo il vetro e poi ricomincia. Durante la pulizia la pillola, chiara solo col bordo, dice Stop: i tergicristalli finiscono la passata e si fermano, la riga dice Clearing stopped con quanto si è cancellato, e la pioggia torna come prima.
Come funziona
Due città e una maschera
La strada dietro il vetro è disegnata una volta sola, due volte: nitida, con le luci come dischi fuori fuoco col bordo più chiaro, e sfocata, con le stesse luci larghe il doppio e più tenui e un velo lattiginoso sopra. Tutte e due sono più larghe del vetro di 40 unità per lato, per le gocce vicino al bordo. Un terzo canvas, a metà risoluzione, è la maschera di quanto il vetro è pulito: a ogni fotogramma si dipinge la città sfocata e sopra quella nitida ritagliata dalla maschera (copy e poi source-in su un canvas di passaggio). I tergicristalli e le gocce che scivolano dipingono la maschera, la pioggia la appanna togliendo un po’ di tutto a ogni fotogramma (destination-out con un alfa di 1 − e^(−6·pioggia·dt)).
Ogni goccia è una lente
Una goccia si disegna come un ritaglio ellittico dentro cui va la città nitida intorno a lei, presa da un quadrato largo 3,2 volte il raggio, capovolta nei due versi (scale(−1, −1)) e rimpicciolita: è quello che fa davvero una goccia su un vetro. Sopra si stira un’immagine sola, fatta una volta: il bordo scuro dove la goccia riflette il buio, una lunetta chiara in basso (un gradiente radiale col centro spostato in alto, che taglia il cerchio solo in basso) e il riflesso in alto a sinistra. Le goccioline troppo piccole per mostrare la città sono un puntino di luce col bordo appena scuro, timbrate una volta per sempre in un quarto canvas, che evapora piano così non si riempie mai.
Le gocce scivolano e si uniscono
Ogni goccia ha una soglia sua, intorno a 3,4 unità: sopra la soglia la gravità la tira con forza proporzionale a quanto la supera, un attrito la frena, e a caso il vetro la blocca e la lascia ripartire. Mentre scende si allunga con la velocità, toglie dalla nebbia le goccioline (e un po’ si ingrossa), pulisce una striscia nella maschera e ogni tanto lascia dietro una gocciolina, perdendone l’acqua. Due gocce che si toccano diventano una, con l’area delle due e il centro spostato verso la più grande: le gocce sono ordinate per x e si confrontano solo quelle vicine.
I tergicristalli
I due bracci sono paralleli e seguono lo stesso angolo: mezzo coseno per la passata, una pausa all’inversione, mezzo coseno per tornare. A ogni fotogramma lo spicchio di corona fra l’angolo di prima e quello di adesso pulisce la maschera e cancella la nebbia. Le gocce dentro lo spicchio si agganciano alla spatola: restano alla loro distanza dal perno e si mettono appena davanti alla gomma, dove si uniscono in una fila di perle (mai più grosse di 4 unità: il resto se ne va oltre il bordo) che perde acqua a ogni fotogramma; quando il braccio inverte le lascia, e scivolano via. La gomma è una molla sull’angolo: si inclina contro la velocità e all’inversione si ribalta con un piccolo rimbalzo.
L’avanzamento è la pioggia che cala
La pioggia della demo è (1 − avanzamento)^1,25: decide quante gocce arrivano ogni secondo (fino a 180, più sei goccioline per goccia, con un tetto di 300 gocce) e quanto in fretta il vetro si appanna, così ogni passata trova meno acqua della precedente. Arrivati in fondo, i tergicristalli finiscono la passata e si fermano; il vetro si asciuga in 0,9 secondi (le gocce rimaste negli angoli scivolano veloci e svaniscono, la città nitida copre tutto) e un riflesso, un gradiente lineare inclinato in modalità lighter, lo attraversa. Stop fa finire la passata e riporta la pioggia; Clear again fa uno scroscio sette volte più fitto prima di ripartire.
Chi non vede, la demo e il disegno
Il vetro è 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, lo stop e la fine; il pulsante resta lo stesso elemento in tutti gli stati. I clic da script (quelli dell’anteprima della libreria) non fermano mai e ripartono solo dopo 2,6 secondi di risultato. Il ciclo di disegno gira solo finché piove o qualcosa si muove, e si ferma quando il vetro esce dallo schermo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SECONDS | script.js | 9 | Quanto dura la pulizia della demo, in secondi (una vera segue i file cancellati). |
ITEMS | script.js | [['Browser caches', 0.92], ['Thumbnails', 0.41], …] | Cosa si cancella, ognuno col suo nome e i suoi gigabyte; il totale sta anche nella scritta a riposo in index.html. |
STROKE | script.js | 0.62 | I secondi di una passata del tergicristallo, da una parte all'altra. |
PAUSE | script.js | 0.09 | La piccola esitazione all'inversione, in secondi. |
SWEEP | script.js | 160 | L'arco di una passata, in gradi: meno di 150 lascia bagnato l'angolo in alto a destra. |
RAIN | script.js | 180 | Le gocce che arrivano sul vetro ogni secondo con la pioggia piena (più sei volte tante goccioline); a riposo ne arriva poco più di un decimo. |
LENS | script.js | 3.2 | Quanto mondo dietro entra in una goccia: più alto, l'immagine capovolta è più piccola e ci stanno più luci. |
SLIDE | script.js | 3.4 | Il raggio oltre il quale una goccia comincia a scivolare, in unità del disegno (il vetro è largo 380). |
GRAVITY | script.js | 150 | Quanto tira giù le gocce grandi, in unità al secondo quadrato. |
WORDS | script.js | { busy: 'Clearing cache', done: 'cleared', stopped: 'Clearing stopped' } | Le scritte sotto il vetro mentre pulisce, alla fine (dopo i gigabyte) e dopo Stop; quella a riposo si cambia in index.html. |
LABELS | script.js | { busy: 'Stop', done: 'Clear again' } | Le scritte del pulsante mentre pulisce e alla fine; quella a riposo, Clear cache, si cambia in index.html. |
Quando usarla
Per un’attesa di qualche secondo che toglie qualcosa: svuotare la cache o il cestino, liberare spazio, cancellare i file temporanei, ripulire una cronologia, la manutenzione di un’app per auto o di un servizio di guida. La pioggia che cala dice a che punto si è senza leggere niente, e il vetro limpido alla fine è la ricompensa. Per un’attesa di meno di due secondi è troppo (non si vede nemmeno una passata), e non va in una pagina chiara: è pensato per un’interfaccia scura.
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. Le gocce grandi sono al massimo 300, il lavoro più pesante (le due città) si fa una volta sola e il disegno si ferma quando il vetro esce dallo schermo. La pillola è alta 44: col dito si schiaccia e rimbalza; il colpetto dei tergicristalli c’è col mouse e con la tastiera.
Con il movimento ridotto
Niente pioggia che cade, gocce che scivolano, tergicristalli che si muovono né riflesso finale: il vetro resta bagnato e fermo, e con l’avanzamento le gocce e la nebbia svaniscono in dissolvenza mentre la città nitida compare, insieme alla percentuale. Alla fine il vetro è limpido; le parole cambiano con una dissolvenza e la spunta compare senza disegnarsi.
Trappole
- Con la pioggia e l’appannamento tarati sul riposo, già dopo la prima passata il vetro restava limpido e l’avanzamento non si leggeva: fra due passate passano 0,7 secondi, quindi la pioggia piena ora porta 180 gocce al secondo e il vetro si appanna sei volte più in fretta, e cala con l’avanzamento.
- Le goccioline timbrate come lenti, a due o tre pixel, diventavano puntini neri che sembravano sporco: ora sotto i 2,6 pixel sono un puntino di luce col bordo appena scuro, e anche il bordo delle gocce grandi è più leggero.
- Le gocce spinte dalla spatola si univano fra loro in palle enormi che viaggiavano sulla gomma: ora una goccia agganciata non supera 4 unità (il resto va oltre il bordo) e perde acqua a ogni fotogramma, così resta una fila di perle.
- La nebbia, timbrata di continuo dalla pioggia di riposo, si riempiva fino a un velo uniforme: ora evapora piano (un decimo al secondo) e trova un equilibrio vicino al riposo iniziale.
- Con l’arco a 150 gradi e la spatola che partiva a 30 unità dal perno restavano bagnati l’angolo in basso a destra e due cupole intorno ai perni: ora l’arco è di 160 gradi e la spatola parte a 16 unità.
- Il passaggio in hover teneva i tergicristalli alzati finché il mouse restava sopra: ora è un colpetto solo che ricade con un rimbalzo, come una spinta sulla leva.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 15 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.
