L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
Gli inchiostri che sciabordano
Gli inchiostri di un piccolo produttore, ognuno nella sua boccetta di vetro, su una mensola che si scorre: quando la mensola parte l’inchiostro resta indietro e sale sul vetro, quando frena corre dall’altra parte, e quando si ferma dondola finché non torna piatto. Dove è passata l’onda il vetro resta macchiato e la macchia cola giù a righe. Ogni boccetta dondola col suo ritmo: le larghe piano, le strette in fretta.
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 sloshing inks</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/alegreya@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the inks of a small ink maker, each in its glass bottle on a shelf that moves. The ink feels the shelf: it
is left behind when the shelf sets off, runs up the glass when it brakes, rocks when it stops, and the glass
stays stained where the wave went until the film drains back down. The bottles are drawn by the script -->
<section class="shelf" role="region" aria-roledescription="carousel" aria-labelledby="shelf-title" data-shelf>
<header class="shelf__head">
<h2 class="shelf__title" id="shelf-title">Fountain pen inks</h2>
<div class="shelf__arrows">
<button class="arrow" type="button" aria-label="Previous inks" aria-controls="shelf-track" data-prev>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 6.5 8.5 12l5.5 5.5"/></svg>
</button>
<button class="arrow" type="button" aria-label="Next inks" aria-controls="shelf-track" data-next data-autoclic>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path class="arrow__step" d="M10 6.5 15.5 12 10 17.5"/>
<path class="arrow__back" d="M18.5 12H9M13 7.5 8.5 12l4.5 4.5M5.5 6.5v11"/>
</svg>
</button>
</div>
</header>
<div class="shelf__view" tabindex="0" aria-describedby="shelf-help" data-view>
<div class="shelf__track" id="shelf-track" data-track></div>
</div>
<p class="sr" id="shelf-help">Arrow keys to move along the inks, Home and End for the first and the last.</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.
53 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 «Gli inchiostri che sciabordano» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, da solo al centro, il carosello di un produttore di inchiostri per stilografiche, largo 720 pixel: in alto Fountain pen inks e due pulsanti tondi con le frecce; sotto, una fila di schede alte coi bordi arrotondati, ognuna del colore chiaro del suo inchiostro, con sopra una boccetta di vetro disegnata e sotto il nome, il prezzo, il colore e la misura. Le boccette sono tutte diverse: una bassa e larga col tappo nero zigrinato (Kingfisher, verde petrolio), una alta e quadrata (Oxblood, rosso scuro), una fiaschetta tonda col tappo di sughero (Moss, verde), un calamaio a cono col tappo d’ottone (Saffron, giallo oro), una grande da 100 ml (Night Heron, blu nero) e una tonda col tappo di legno (Damson, prugna). Si vedono due schede e mezza: la terza è tagliata dal bordo. Dentro ogni boccetta l’inchiostro ha la sua superficie vista un poco dall’alto, più chiara, il vetro spesso delle pareti e del fondo ne prende il colore e due riflessi fermi stanno sul vetro. Premendo la freccia avanti la mensola scorre di una scheda: appena parte l’inchiostro resta indietro e si alza contro il vetro dalla parte da cui la mensola viene; quando frena corre in avanti e sale sull’altra parete; fermata la mensola dondola avanti e indietro e in un secondo e mezzo torna piatto. Le boccette larghe dondolano piano, quelle strette in fretta, come fa davvero un liquido. Dove l’onda è salita il vetro resta velato d’inchiostro e la macchia cola giù a righe. In fondo alla fila la freccia avanti diventa una freccia con la sbarra e riporta all’inizio con una corsa lunga, e tutti gli inchiostri sciabordano insieme; all’inizio la freccia indietro è spenta. La mensola si trascina col mouse o col dito, si lancia e si aggancia sulla scheda più vicina, e oltre i capi tira come un elastico; un tocco su una scheda tagliata la porta dentro, un tocco su una boccetta intera la spinge un poco e il suo inchiostro ondeggia. Con la mensola selezionata funzionano le frecce della tastiera, Home e End; contro un capo la mensola dà un piccolo urto e torna.
Come funziona
Un numero per la mensola
La mensola è un numero solo, x, i pixel che ha fatto. Una molla la porta alla fermata scelta, a = ω²·(meta − x) − 2ζω·v, con ω e ζ da GLIDE; la rigidità si divide per la radice della distanza in schede, così la corsa lunga che torna all’inizio parte con la stessa spinta di un passo solo. Le fermate sono le schede allineate al titolo, l’ultima con l’ultima scheda contro il bordo destro. Quella a, che la molla calcola a ogni passo, è l’accelerazione delle boccette (al contrario), già liscia: niente differenze fra due fotogrammi.
I modi dello sciabordio
La superficie dell’inchiostro è la somma dei primi tre modi che una spinta di lato può accendere in una vaschetta larga W: z(u) = Σ ηₙ·cos(nπu) per n = 1, 3, 5, con u da 0 a 1 fra le due pareti. Ogni ηₙ è una molla con la pulsazione vera di un liquido profondo h, ωₙ² = g·k·tanh(k·h) con k = nπ/W, e la spinta la sposta verso la quota che avrebbe sotto una spinta costante, (a/g)·4W/(n²π²): sommati, sono la superficie inclinata di a/g. La g è scelta perché una boccetta larga 100 e profonda 60 dondoli WAVE[0] volte al secondo; ζ cresce con la radice di n, così le increspature si spengono prima dell’onda grande.
Un liquido che resta credibile
La spinta è tenuta morbidamente sotto due g con una tangente iperbolica, perché un lancio della mano darebbe quattro o cinque g e l’inchiostro salirebbe dritto al tappo. Un’onda grande si affila come al secondo ordine di un’onda stazionaria, KAPPA·η₁²/W·cos(2πu), più alta in cima e piatta in fondo; e non sale oltre la spalla della boccetta: la quota si schiaccia con tanh vicino al soffitto e al fondo.
Il vetro e la superficie vista dall’alto
Ogni boccetta è un SVG col suo contorno e il suo interno. L’inchiostro è un tracciato rifatto a ogni fotogramma: tutto quello che sta sotto il bordo lontano della superficie, tagliato dall’interno con un clipPath. La superficie vista un poco dall’alto è la fascia fra il bordo lontano e quello vicino, un’ellisse nelle boccette tonde e una fascia costante in quelle quadrate, con un filo di luce sul bordo vicino. Lo stesso tracciato, tagliato dal contorno esterno e più chiaro, colora il vetro spesso delle pareti; i riflessi bianchi restano fermi sopra, come una lampada.
La macchia che cola
Per ognuno dei 33 punti della superficie lo script ricorda il punto più alto a cui è arrivato il bordo lontano: lì il vetro è bagnato. La linea bagnata scende a 26/FILM unità al secondo, ogni punto col suo passo un po’ diverso (due seni lenti), così la macchia cola a righe morbide; il bordo si disegna smussato su cinque punti, col colore dell’inchiostro al 20 per cento. Quando la superficie risale la linea si rialza con lei.
Mani, tasti e telefono
Col mouse o col dito la mensola insegue il puntatore su una molla rigida, così anche lì la spinta è liscia, e oltre i capi su un elastico; lasciata prende la velocità degli ultimi 90 millisecondi, guarda dove arriverebbe in THROW secondi e si aggancia alla fermata più vicina. La rotella orizzontale fa lo stesso. Un tocco su una boccetta intera le dà una spinta su una molla del ripiano, e la sua accelerazione si somma a quella della mensola. Sul telefono la mensola arriva ai bordi dello schermo con la prima scheda allineata al titolo. Quando tutto è fermo il ciclo si spegne.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SLOSH | script.js | 0.3 | Quanto l’inchiostro sente la mensola che si muove: 0 per niente. |
WAVE | script.js | [1.5, 0.15] | L’inchiostro in una boccetta larga circa 110 pixel: quante volte al secondo dondola e quanto è frenato. Le boccette più larghe dondolano più piano, le più strette più in fretta. |
FILM | script.js | 0.9 | I secondi che la macchia d’inchiostro lasciata sul vetro impiega a colare giù. |
GLIDE | script.js | [7, 0.85] | La molla della mensola: quanto in fretta arriva a una scheda e quanto è frenata. |
THROW | script.js | 0.24 | I secondi che una mensola lanciata corre ancora prima di essere presa (quanto va lontano un lancio). |
INKS | script.js | [['Kingfisher', 'Teal blue', '50 ml', '€16', '#0f7f8a', 'pot'], …] | Gli inchiostri: nome, colore, misura, prezzo, il colore dell’inchiostro e la boccetta (pot, square, flask, cone, tall, classic). |
--card | style.css | 280px | La larghezza di una scheda (264 sul telefono). |
--gap | style.css | 16px | Lo spazio fra due schede (12 sul telefono). |
Quando usarla
Per i prodotti di un negozio che vende cose liquide in vetro: inchiostri, profumi, oli, sciroppi, salse, cosmetici, la carta dei cocktail di un bar. Dove il prodotto si guarda prima di comprarlo e un po’ di vita nella fila fa venire voglia di scorrerla.
Sul telefono
Le schede scendono a 264 pixel e la mensola arriva ai bordi dello schermo: la prima scheda si allinea al titolo, a 16 pixel dal bordo, e della seconda si vedono circa 90 pixel. Il dito trascina e lancia la mensola (su e giù scorre la pagina), l’inchiostro sciaborda come col mouse, i pulsanti sono di 44 pixel e un tocco su una scheda tagliata la porta dentro.
Con il movimento ridotto
La mensola non corre: si dissolve e ricompare già alla fermata nuova, e l’inchiostro resta piatto, senza onde né macchie; un tocco su una boccetta non la sposta. Trascinando, la mensola segue la mano, e lasciata si dissolve sulla fermata più vicina. Il componente entra solo in dissolvenza.
Trappole
- La pagina è una griglia che mette il componente al centro, e la sua colonna prendeva la larghezza minima della fila intera, 1700 pixel: sul telefono la pagina si allargava e il browser rimpiccioliva tutto. La colonna ora è minmax(0, 1fr) e il carosello ha min-width 0.
- In SVG l’asse y va in giù: la profondità dell’inchiostro va presa come fondo meno superficie. Col segno sbagliato tanh(k·h) è negativo, la radice della pulsazione dà NaN e i tracciati si rompono.
- Un lancio della mano dava accelerazioni di quattro o cinque g e l’inchiostro saliva dritto al tappo, a forma di U: la spinta è tenuta sotto due g con una tangente iperbolica e l’onda si affila di meno (KAPPA 0.6).
- Coi passi di scolo che cambiavano da un punto all’altro la macchia sul vetro diventava una fila di montagne a punta: ora il passo cambia con due seni lenti, il bordo si disegna smussato su cinque punti e la macchia è più leggera.
- I riflessi bianchi disegnati sulla parete del vetro, bianco su vetro chiaro, non si vedevano: stanno appena dentro, sopra l’inchiostro, dove si leggono come luce sul vetro.
- Col movimento ridotto la molla della mensola continuava a farla scivolare durante la dissolvenza: in quel modo il passo di fisica si ferma subito e la mensola cambia posto solo a metà della dissolvenza.
- Sul telefono la mensola arriva ai bordi dello schermo e l’anello del fuoco, disegnato fuori, finiva fuori dallo schermo: lì si disegna dentro, sopra le schede.
Librerie
GSAP 3.15.0, Alegreya (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 7 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.
