Il banner dei cookie
Consenso, Transizioni, SVG, Fisica
NuovaGratis
Tutti i componenti
La lista che gocciola
Le faccende della domenica in una lista che tiene le cose fatte in fondo, in una pozza d’inchiostro blu. Spuntandone una, l’inchiostro esce dalla casella e attraversa le parole, che diventano bianche; poi torna nella casella portandosele via, la casella si raccoglie in una goccia che cade nella pozza con uno schizzo, e l’inchiostro sale nel posto rimasto libero, dove la faccenda ricompare, fatta.
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 dripping list</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/rethink-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the dripping list: the chores done lie in a pool of ink at the bottom of the list. Ticking one, the ink runs
out of its box through the words, goes back into the box taking them along, and the box drips: the drop falls
into the pool, which rises into the place left free, and the chore is there, done, in the ink -->
<section class="todo" aria-labelledby="todo-title" data-todo data-autoclic>
<header class="todo__head">
<h2 class="todo__title" id="todo-title">Sunday reset</h2>
<p class="todo__count"><span class="todo__roll" data-left><span class="todo__line"><span class="todo__roll todo__n" data-left-n>4</span> left</span></span></p>
</header>
<form class="add" data-add>
<span class="add__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 5.5v13M5.5 12h13"/></svg></span>
<input class="add__field" type="text" placeholder="Add a chore" aria-label="Add a chore" maxlength="48" autocomplete="off" enterkeyhint="done" data-field>
<button class="add__go" type="submit" aria-label="Add the chore" data-go>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 18.5v-13M6.5 11 12 5.5l5.5 5.5"/></svg>
</button>
</form>
<div class="board" data-board>
<ul class="rows" aria-label="To do" data-todo-list></ul>
<ul class="rows" aria-label="Done" data-done-list></ul>
<!-- the ink: a copy of the list in white, cut out by the shape of the ink, drawn again at every frame -->
<div class="ink" aria-hidden="true" data-ink>
<svg class="ink__art" data-ink-art>
<defs>
<linearGradient id="ink-depth" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="1" data-depth>
<stop offset="0" class="ink__stop"/>
<stop offset="1" class="ink__stop ink__stop--deep"/>
</linearGradient>
</defs>
<rect fill="url(#ink-depth)" data-depth-rect/>
<path class="ink__shine" data-shine/>
</svg>
<div class="ink__rows" data-ink-rows></div>
</div>
</div>
<p class="sr" id="todo-move">Up and down arrow keys move the chore.</p>
<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.
30 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 lista che gocciola» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una scheda bianca larga 390 pixel: il titolo Sunday reset, a destra il conto 4 left, sotto il campo Add a chore col più blu, quattro faccende da fare (Change the bed sheets, Descale the kettle, Wipe the fridge shelves, Book the boiler service), ognuna con la sua casella quadrata e la maniglia a tre righe. Il fondo della scheda è una pozza d’inchiostro blu oltremare, più scuro in profondità, con la superficie che sale un poco contro le pareti e una riga di luce appena sotto; dentro, in bianco, le due faccende già fatte, Take out the recycling e Water the herbs. Aprendo la pagina l’inchiostro si versa dal fondo e le faccende arrivano una dopo l’altra. Spuntando una faccenda la casella scatta, l’inchiostro esce dalla casella e corre lungo la riga col fronte gonfio, e le parole diventano bianche dove le raggiunge; un attimo dopo torna indietro nella casella col fronte incavato portandosi via le parole, la casella si raccoglie in una goccia tonda che si abbassa, si allunga e cade, mentre le faccende sotto salgono a chiudere il posto. La goccia tocca la superficie, che le va incontro, con uno schizzo di goccioline e onde che corrono fino alle pareti e tornano; l’inchiostro sale nel posto lasciato libero e la faccenda è lì, bianca, fatta. Il numero del conto rotola al nuovo; fatte tutte, il conto dice All done, l’inchiostro riempie tutta la lista e un’onda parte da ogni parete. Togliendo la spunta a una faccenda fatta l’inchiostro scende attraverso le parole, che tornano scure, e lascia qualche goccia appesa alle lettere che ricade nella pozza; se la faccenda era più in fondo risale sopra le altre dentro l’inchiostro. Col mouse sopra una faccenda compaiono una fascia chiara e la croce, che la fa scivolare via a sinistra; scorrendola a sinistra col dito (o col mouse) dietro si scopre il rosso col cestino, che oltre un terzo della larghezza scatta pronto: lasciata, la faccenda vola via, il rosso si chiude e il posto si richiude. Scrivendo nel campo compare il pulsante blu, e Invio aggiunge la faccenda in cima mentre le altre e l’inchiostro scendono. Presa dalla maniglia, una faccenda si alza con l’ombra e le altre le fanno posto; portata giù sopra l’inchiostro, la casella mostra la spunta che avrà e l’inchiostro si alza verso di lei: lasciata lì, ci affonda ed è fatta.
Come funziona
La lista e la sua copia bagnata
Ogni faccenda esiste due volte: quella vera, un li con la casella vera, la croce e la maniglia, e una copia bianca dentro uno strato color inchiostro messo sopra tutto (aria-hidden, pointer-events none, così i clic passano). Quello strato ha un clip-path: path() riscritto a ogni fotogramma: dove c’è la forma dell’inchiostro si vede la copia bianca sul blu, altrove la lista vera. Così le parole diventano bianche esattamente dove arriva l’inchiostro, pixel per pixel e in ogni istante: la superficie che passa in mezzo a una riga taglia le lettere a metà, mezze bianche e mezze scure.
Una forma sola, a pezzi
La forma è un solo path fatto di più pezzi disegnati tutti in senso orario, che con la regola nonzero si sommano: la superficie della pozza (44 punti uniti da curve quadratiche, il menisco che sale di 3 pixel contro le pareti, un piccolo rigonfiamento sotto una goccia che sta per toccarla), l’inchiostro dentro una faccenda (un rettangolo arrotondato che cresce dalla casella a tutta la riga col fronte gonfio e torna indietro col fronte incavato), la casella che si raccoglie in una goccia, le gocce che cadono (a lacrima, allungate dalla velocità), gli schizzi e le gocce appese alle parole. Sotto la copia bianca un gradiente scurisce l’inchiostro in profondità, e una riga bianca 2 pixel sotto la superficie fa il riflesso.
Le onde
La superficie è un’equazione delle onde: ogni punto è tirato dai due vicini (c² per la differenza, con c = WAVES[0] pixel al secondo), frenato da WAVES[1] e richiamato al livello; le pareti rimandano indietro le onde. Si calcola a passi di 1/240 di secondo col fotogramma limitato a 1/30. Una goccia spinge giù una campana larga 21 pixel e lancia tre goccioline che, ricadendo, fanno le loro piccole onde; quando il livello accelera, un’onda a coseno fa restare indietro il centro rispetto alle pareti, come un liquido scosso. Sotto 0,02 pixel le onde si azzerano e, se niente altro si muove, il ciclo si spegne.
Il livello agganciato alle faccende
Il livello è il bordo alto della prima faccenda che sta nell’inchiostro (o il fondo della lista) più una molla sua. Quando cambia la faccenda su cui poggia (una goccia arriva, una spunta si toglie, una faccenda si cancella) la molla prende la differenza, così l’inchiostro non salta mai: sale svelto (rigidità 150) e scola piano (58), e quando le faccende si spostano tutte insieme l’inchiostro va con loro. Una faccenda spuntata aspetta già al suo posto, invisibile, finché l’inchiostro non la copre; la goccia che arriva per prima prende il posto più in basso fra quelli in attesa, perché l’inchiostro si riempie dal fondo.
Faccende su molle, dita e maniglia
Ogni faccenda sta al suo posto in posizione assoluta, portata da una molla (SPRING); l’ordine sullo schermo è l’ordine di due liste nella pagina, To do e Done, riscritte quando cambia, ridando il focus all’elemento che lo aveva. Scorrendo, dopo 8 pixel (e 1,3 volte più che in verticale) la riga è presa: il contenuto segue il dito, il rosso si scopre dal bordo destro con un clip-path inset, e oltre il 36% della larghezza o lanciata più veloce di 700 pixel al secondo la faccenda se ne va; il rosso si chiude in verticale prima che il posto si chiuda, e il clic che chiude il gesto viene scartato. La maniglia trattiene il puntatore e le altre fanno posto quando il centro della faccenda portata passa il loro; portata giù con il centro sotto la superficie, lasciata è fatta e affonda in cima all’inchiostro.
Tasti, voci e anteprima
Le caselle sono checkbox vere con l’etichetta: lo Spazio spunta e toglie la spunta, Canc o Backspace sulla casella cancellano la faccenda, e sulla maniglia le frecce su e giù la spostano (aria-describedby lo dice). Una regione aria-live dice fatto, non fatto, cancellato, aggiunto, spostato al posto n di m, e quante faccende restano. L’anello del focus si vede anche sulla copia bianca, dentro l’inchiostro. Un clic da script (detail 0, l’anteprima della libreria) mostra una cosa per volta: due faccende spuntate, una spostata, una aggiunta e cancellata scorrendo, due tolte dall’inchiostro, e la lista di nuovo com’era.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
CHORES | script.js | ['Change the bed sheets', 'Descale the kettle', …] | Le faccende all’apertura della pagina. |
START_DONE | script.js | 2 | Quante di loro, contando dalla fine, sono già fatte, nell’inchiostro. |
FLOOD | script.js | 0.24 | I secondi in cui l’inchiostro attraversa una faccenda spuntata. |
GRAVITY | script.js | 3000 | Quanto in fretta cade una goccia, in pixel al secondo al quadrato. |
WAVES | script.js | [330, 2.6] | La superficie dell’inchiostro: quanto corrono le onde (pixel al secondo) e quanto in fretta si calmano. |
SPLASH | script.js | 1 | Quanto è grande lo schizzo di una goccia. |
SPRING | script.js | [380, 0.8] | Le molle che spostano le faccende: quanto sono rigide e quanto frenate (1 = nessun rimbalzo). |
Quando usarla
Per le faccende di un’app per la casa, le cose da mettere in valigia, i passi di un trasloco, i compiti di un progetto o di una squadra, la lista della spesa: ovunque si spunta qualcosa e fa piacere vedere quanto si è già fatto.
Sul telefono
La scheda prende la larghezza dello schermo meno i margini (358 pixel a 390) e le faccende restano alte 54 pixel, comode per il dito. La croce non si vede: si cancella scorrendo la faccenda a sinistra (le righe hanno touch-action pan-y, così la pagina scorre ancora in verticale) e la croce resta per i lettori di schermo; la maniglia ha touch-action none e si trascina col dito. Il campo è a 16 pixel, così Safari non ingrandisce la pagina, e la tastiera mostra Done.
Con il movimento ridotto
Niente macchia, gocce, onde o scivolate: spuntata, la faccenda sfuma e ricompare già nell’inchiostro, salito al suo posto; tolta la spunta, ricompare asciutta in fondo alle cose da fare. Le faccende cancellate o aggiunte sfumano e le altre sono già al loro posto; la maniglia segue ancora la mano, ma le altre saltano subito al posto giusto, e la superficie resta ferma.
Trappole
- Il puntatore fermo non manda pointermove: la faccenda spuntata restava «sotto il mouse» e si portava la fascia chiara e la croce fin dentro l’inchiostro. Spuntando, togliendo la spunta o portandola nell’inchiostro il passaggio si toglie, e lo rimette il primo movimento.
- Svegliato in mezzo a un fotogramma, il ciclo vede passare zero secondi: senza un passo a tempo zero il livello non seguiva la lista e, col movimento ridotto, il ciclo si spegneva col livello vecchio (la faccenda spuntata ricompariva asciutta sopra l’inchiostro). A tempo zero si fa un passo che aggiorna il livello senza dividere per il tempo.
- Una faccenda tolta dal fondo dell’inchiostro, con un’altra subito sotto, non ha spazio per gocciolare: aspettando le gocce la sua risalita non finiva mai e restava ingrandita, col ciclo sempre acceso. Finisce quando è al suo posto e l’inchiostro l’ha lasciata, gocce o no.
- Il rosso del cestino, pensato per lo scorrimento, compariva anche cancellando con la croce, e dopo uno scorrimento restava a tutta larghezza sopra la faccenda che saliva al suo posto: con la croce niente rosso, e scorrendo il rosso si chiude in verticale prima che il posto si chiuda.
- La placca che fa passare una faccenda sopra le altre dentro l’inchiostro aveva la transizione dell’opacità: per un attimo due scritte bianche stavano una sull’altra. Compare di colpo e sparisce sfumando.
- La casella che si svuotava dall’alto in una goccia appesa sotto faceva una T; ora si raccoglie lei stessa in una goccia, più piccola e più tonda, che si abbassa, si allunga e parte. E le gocce appese alle parole nascevano già sulla superficie e sparivano subito: si staccano quando l’inchiostro è sceso sotto le lettere.
- Spostare nella pagina l’elemento che ha il focus (la faccenda passa dalla lista To do alla lista Done) lo fa perdere a chi usa i tasti: dopo ogni riordino il focus torna a chi lo aveva. E l’opacità lasciata in linea da un tween vinceva sulla classe che nasconde una faccenda in attesa: ogni dissolvenza finisce con clearProps.
Librerie
GSAP 3.15.0, Rethink Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 18 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.
