Il pulsante gonfiabile
Pulsanti, Fisica, WebGL, 3D
NuovaGratis
Tutti i componenti
Il cursore di ferrofluido
Il cursore dei bassi di una cassa fatto con una pozza di ferrofluido su una mensola di vetro: sotto il vetro una calamita segue la mano, e più bassi vuol dire un campo più forte, così il liquido nero si alza da una pozza lucida in una corona di punte. Trascinato in fretta resta indietro, si allunga e le punte si sciolgono e si piegano all'indietro; quando la calamita si ferma la raggiunge e le punte rispuntano, prima quelle in mezzo. Il liquido è una forma 3D disegnata da uno shader WebGL.
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 ferrofluid slider</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/host-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the bass of a speaker, set with a puddle of ferrofluid on a glass shelf: a magnet under the glass goes where
the hand takes it, and the stronger its field, the spikier the fluid. The fluid is drawn by a WebGL shader on
the canvas; the glass, its film and the magnet's mark are plain HTML -->
<div class="bass" data-bass>
<div class="bass__head">
<span class="bass__label" id="bass-label">Bass</span>
<span class="bass__value" aria-hidden="true"><span class="bass__number" data-number>+9.0</span><span class="bass__unit">dB</span></span>
</div>
<div class="bass__track" role="slider" tabindex="0" aria-labelledby="bass-label" aria-orientation="horizontal" aria-valuemin="0" aria-valuemax="12" aria-valuenow="9.0" aria-valuetext="+9.0 dB" data-track data-autoclic>
<span class="bass__shelf" aria-hidden="true">
<span class="bass__top"></span>
<span class="bass__edge"></span>
</span>
<span class="bass__film" aria-hidden="true" data-film></span>
<span class="bass__mark" aria-hidden="true" data-mark></span>
<canvas class="bass__fluid" aria-hidden="true" data-canvas></canvas>
</div>
<!-- the two ends of the range: the script writes them from RANGE -->
<div class="bass__scale" aria-hidden="true">
<span data-low></span>
<span data-high></span>
</div>
</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.
27 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 cursore di ferrofluido» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco la scritta Bass e a destra il valore, +9.0 dB. Sotto, una mensola di vetro chiara vista un poco dall'alto, col bordo verdino del vetro, e sopra una pozza di ferrofluido nero e lucido coronata di punte, con una riga di luce calda o fredda lungo ognuna; dal capo sinistro della mensola alla pozza corre la pellicola sottile che il liquido lascia sul vetro. Ai due capi, sotto, Flat e +12 dB. Aprendo la pagina la pozza è piatta e la pellicola corre fino a lei, poi la calamita si accende: le punte spuntano dal mezzo verso fuori mentre il numero conta. Più bassi vuol dire un campo più forte: a 0 dB la pozza è una lente liscia, poi spunta una punta in mezzo, poi l'anello intorno, e in cima le punte sono alte e aperte a ventaglio. Trascinando, la calamita sotto il vetro va esattamente dove va la mano (un piccolo segno d'acciaio sotto la mensola la mostra finché il liquido non l'ha raggiunta), ma il liquido è pesante: andando in fretta resta indietro, si allunga dietro di lei, si abbassa, e le sue punte si sciolgono e si piegano all'indietro lungo il campo, come erba nel vento; quando la calamita si ferma il liquido la raggiunge, dondola un poco e le punte rispuntano con un piccolo rimbalzo, prima quelle in mezzo. Col mouse sopra le punte si alzano appena, premendo ancora un po'. Tirando oltre +12 dB le punte si tendono e tremano; oltre lo 0 la pozza si allarga piatta. Ai capi del vetro il liquido si ferma e non cade. Premendo sulla mensola lontano dalla pozza la calamita corre lì e il liquido la segue scorrendo. Le frecce, Pagina su e giù, Inizio e Fine la muovono da tastiera.
Come funziona
Una forma 3D fatta di distanze
Il liquido non è un'immagine: per ogni pixel uno shader WebGL lancia un raggio da una camera che guarda la mensola dall'alto di 14 gradi, e lo fa avanzare ogni volta della distanza dalla forma più vicina finché la tocca (ray marching). La forma è un ellissoide schiacciato, il corpo della pozza, più un cono a fianchi concavi per ogni punta, uniti con un minimo morbido: le punte si fondono fra loro solo ai piedi (il raccordo si stringe salendo) e tutte nel corpo; il vetro la taglia sotto. Lo shader salta i pixel fuori dal riquadro in cui sta il liquido.
Le punte del ferrofluido
Come nel ferrofluido vero le punte stanno su una griglia di esagoni: quella in mezzo, un anello di 6 e uno di 12 (SPIKES). Ognuna punta lungo il campo, lontano dal polo della calamita sotto il vetro, così si aprono a ventaglio. La sua altezza è una molla che insegue quella che il campo le chiede, TALL per il campo elevato a 0,85, più alta in mezzo; le punte di fuori nascono solo in un campo più forte. Salgono su una molla poco frenata (ERUPT) e sorpassano; scendono in fretta e senza rimbalzo, come le richiama la tensione superficiale.
La calamita e il liquido pesante
La calamita segue la mano esattamente; il liquido è tirato da lei con una molla smorzata (DRAG), calcolata sul ticker di GSAP a passi di 1/240 di secondo col fotogramma limitato a 1/30. Il campo che sente cala con la distanza dalla calamita, e^(−(d/REACH)²): trascinato in fretta il liquido resta indietro, si allunga dalla parte della calamita, si abbassa e perde le punte, che si piegano all'indietro; quando la calamita si ferma la raggiunge, il campo torna e le punte rispuntano. Ai capi del vetro una molla dura lo ferma: un liquido si arresta sullo spigolo e non lo scavalca.
La luce di uno studio
Trovato il punto, la normale viene dalla pendenza della distanza; il colore è il riflesso di uno studio fatto di numeri (un softbox tondo e caldo in alto a sinistra, due strisce alte, calda a sinistra e fredda a destra, il soffitto, la stanza bianca e il tavolo chiaro all'orizzonte), pesato con la formula di Fresnel: il liquido è nero di fronte e lucido di lato, con una riga di luce lungo ogni punta. Sul vetro, intorno al piede, un'ombra morbida e il riflesso scuro del liquido, trovato con un secondo raggio. I colori delle luci vengono dal CSS, resi lineari.
Il cursore, i tasti e l'anteprima
Lo slider è tutta la striscia, con role slider, aria-valuenow e aria-valuetext. La mano tiene la calamita: oltre i capi cede al massimo di RUBBER pixel e le punte si tendono e tremano, o la pozza si allarga; premuta lontano dalla pozza ci corre su una molla rigida. Le frecce muovono il valore di KEYS[0], con Maiuscolo o coi tasti Pagina di KEYS[1], Inizio e Fine vanno ai capi. Un clic da script (detail 0, quello dell'anteprima della libreria) fa da mano finta e porta la calamita lontano. Quando niente si muove il ciclo si spegne, e con la mano ferma la tela non si ridisegna.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
START_AT | script.js | 9 | I bassi all'apertura della pagina, in dB. |
RANGE | script.js | [0, 12] | I bassi più bassi e più alti, in dB. |
STEP | script.js | 0.5 | Di quanto si muovono i bassi alla volta. |
KEYS | script.js | [0.5, 3] | Di quanto sposta i bassi una freccia, e con Maiuscolo o coi tasti Pagina. |
SPIKES | script.js | 19 | Quante punte può avere il liquido: 7, 19 o 37. |
TALL | script.js | 46 | Quanto cresce la punta di mezzo in cima alla scala, in pixel. |
DRAG | script.js | [140, 0.6] | Come il liquido segue la calamita: quanto è rigida la molla e quanto è frenata. |
REACH | script.js | 26 | Quanto il liquido può restare indietro dalla calamita, in pixel, prima che le punte si sciolgano. |
ERUPT | script.js | [320, 0.28] | La molla delle punte: quanto è rigida e quanto è frenata (poco, così sorpassano). |
RUBBER | script.js | 8 | Quanto cede la calamita tirata oltre i due capi, in pixel. |
Quando usarla
Per i bassi o il volume di una cassa o di un'app di musica, l'intensità di un effetto, la potenza di un aspirapolvere o di una vibrazione, una forza qualsiasi: ovunque un valore vuol dire «più energia» e toccarlo deve sorprendere. Sta bene nei siti di audio, di design industriale, di laboratori e di gadget.
Sul telefono
La mensola prende la larghezza dello schermo meno i margini (358 pixel a 390) e il liquido resta della stessa misura. Sulla striscia il dito trascina la calamita senza far scorrere la pagina (touch-action: none); fuori la pagina scorre. Al tocco il campo cresce come alla pressione del mouse; il sollevarsi delle punte al passaggio del mouse, sul telefono, non c'è.
Con il movimento ridotto
Niente ritardo, niente allungamento, niente rimbalzi né tremito: il liquido sta sempre sulla calamita con le punte già alte quanto chiede il valore, salta dove si preme e va dritto al valore scelto coi tasti; all'apertura niente cresce e il numero non conta. Restano la forma e la luce.
Trappole
- Per fare prima, le punte lontane dal raggio venivano saltate nel calcolo della distanza: restava la distanza del corpo, molto più grande, il raggio scavalcava le punte e la cima di alcune restava staccata, sospesa sopra la corona. Ora una punta lontana conta come la sfera che la contiene: una distanza che non dice mai più di quella vera.
- Col minimo morbido fra tutte le punte due cime vicine facevano un ponte, un puntino nero sopra la corona: il raccordo fra le punte si stringe salendo, da 2 pixel ai piedi a un quarto di pixel in cima.
- Un softbox rettangolare grande si rifletteva nelle conche fra le punte come toppe grigie piatte, e il tavolo bianco faceva grigio tutto il basso della pozza: il softbox è tondo e più piccolo, le luci lunghe sono strisce sottili e il tavolo è chiaro solo all'orizzonte.
- Con 37 punte il liquido sembrava una spazzola, e le cime di quelle davanti, viste di punta, diventavano puntini: a questa misura 19 punte più grosse si leggono meglio come ferrofluido.
- Mandato a un capo, il liquido sorpassava la calamita e usciva dal vetro: ai capi ora una molla dura lo ferma, come lo spigolo ferma una goccia.
- Con la mano ferma sulla calamita lo shader ridisegnava la stessa immagine a ogni fotogramma: se le punte e il liquido non si sono mossi la tela resta com'è.
Librerie
GSAP 3.15.0, Host Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 14 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.
