Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
Il pulsante a tubo di Kundt
Il pulsante Tune speakers di un'app per gli altoparlanti, fatto come il tubo di Kundt delle lezioni di fisica: un tubo di vetro coi tappi d'ottone e, sul fondo, un letto di polvere dorata finissima. Al clic la frequenza sale e si ferma su una risonanza dopo l'altra: l'aria nel tubo diventa un'onda stazionaria, la polvere balla dove l'aria si muove di più e scorre ad ammucchiarsi dove l'aria è ferma, con le creste sottili fra un mucchio e l'altro. L'ultima risonanza lascia nove mucchi in fila: Tuned to room.
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 Kundt's tube button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/saira@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the Kundt's tube button: the Tune speakers button of a speaker app, made as a glass tube with brass caps and a
bed of fine golden powder along its bottom. The tuning sweeps the tube through its resonances: at each one the
air stands in a wave, the powder dances where the air moves most and gathers in heaps where it is still, with
fine ridges in between, until the last pattern stays: tuned -->
<div class="kundt" data-kundt>
<button class="kundt__btn" type="button" data-btn data-autoclic>
<span class="kundt__haze" aria-hidden="true"></span>
<canvas class="kundt__canvas" aria-hidden="true" data-canvas></canvas>
<span class="kundt__glass" aria-hidden="true">
<span class="kundt__glint" data-glint></span>
<span class="kundt__glint" data-sweep></span>
<span class="kundt__scale"></span>
</span>
<span class="kundt__cap kundt__cap--left" aria-hidden="true"></span>
<span class="kundt__cap kundt__cap--right" aria-hidden="true"></span>
<span class="kundt__print">
<span class="kundt__label" data-label>
<span class="kundt__icons" aria-hidden="true" data-icons>
<svg class="kundt__icon" viewBox="0 0 24 24" data-fork>
<path d="M8.6 2.6v7.6a3.4 3.4 0 0 0 6.8 0V2.6" data-prongs/>
<path d="M12 13.6v7.8"/>
</svg>
<svg class="kundt__icon kundt__icon--done" viewBox="0 0 24 24" data-check>
<path d="M5 12.6l4.4 4.3L19.2 7.2" data-tick/>
</svg>
</span>
<span class="kundt__words" data-words>Tune speakers</span>
<span class="kundt__hz" aria-hidden="true" data-hz></span>
</span>
</span>
</button>
<p class="sr" aria-live="polite" data-live></p>
</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.
28 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 pulsante a tubo di Kundt» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una pillola alta 60 pixel fatta come un tubo di Kundt, il tubo di vetro con cui a lezione di fisica si fa vedere il suono: vetro scuro con il riflesso della lampada lungo il bordo alto, due tappi d'ottone tornito alle estremità, con tre gole ciascuno, e sul fondo del vetro un letto di polvere dorata finissima, un poco più alta contro i tappi; sotto la polvere una scala stampata sul vetro, una tacca ogni 5 pixel. In alto, stampato sul vetro, Tune speakers con un diapason. Col mouse sopra, un riflesso scivola sul vetro verso il puntatore e il puntatore fa cantare il vetro come un dito bagnato sull'orlo di un bicchiere: sotto di lui la polvere frigge, si gonfia un poco e alza creste sottili che si riabbassano dietro di lui. Premendo, il vetro prende un colpetto: tutta la polvere saltella e la pillola si abbassa. Al clic parte la taratura: la scritta diventa Tuning con la frequenza che sale, 686 Hz, 1,029 Hz, 1,715 Hz, 2,744 Hz, e le punte del diapason vibrano. A ogni risonanza la frequenza si ferma e l'aria nel tubo diventa un'onda stazionaria: la polvere balla dove l'aria si muove di più, sbuffi di polvere salgono nella luce, strisciati dall'aria che va avanti e indietro, e la polvere scorre verso i nodi, dove l'aria è ferma, e lì si ammucchia; dove l'aria si muove di più si alzano le creste di Kundt, sottili e fitte. Fra una risonanza e l'altra la polvere si calma, e dove la frequenza passa sopra una risonanza senza fermarsi frigge un attimo. L'ultima risonanza suona più forte e raccoglie tutta la polvere: nove mucchi a cono, mezzo mucchio contro ogni tappo, lontani mezza lunghezza d'onda, con le creste fra loro. La scritta diventa Tuned to room con una spunta che si disegna, e un riflesso corre lungo il vetro. Dopo un momento il tubo prende un colpetto e trema, la polvere diventa fluida e torna in piano, e la scritta torna Tune speakers. Al telefono il dito che scorre sul vetro lo fa cantare e il tocco fa partire la taratura. Con la tastiera il fuoco mostra un anello dorato e il riflesso al centro del vetro; Invio o Spazio tarano.
Come funziona
Le risonanze del tubo
Un tubo chiuso ai due capi risuona a n volte c / 2L, con c = 343 m/s e L la lunghezza del tubo (TUBE): con 50 centimetri, 343 Hz per ogni n. Nella risonanza n la velocità dell'aria lungo il tubo va come sin(nπx/L), ferma ai due tappi. Ogni risonanza risponde alla frequenza con la sua campana, 1/√(1 + Q²(f/fn − fn/f)²) con Q = 13. Alla polvere importa la velocità al quadrato, in media: le risonanze vi si sommano ognuna per conto suo (le loro fasi vanno ognuna per la sua strada), così ogni figura viene simmetrica, e quando la frequenza passa sopra una risonanza su cui non si ferma la polvere frigge un attimo.
La polvere scorre verso i nodi
La forza dell'onda stazionaria spinge la polvere giù per il pendio della velocità al quadrato: per una risonanza sola −sin(2kx), verso i nodi, dove l'aria è ferma. Lo strato di sopra, profondo quanto lo scuotimento (MOBILE), scorre con quella spinta; il fondo compatto resta dov'è (PACK). È un flusso controvento fra colonne di mezzo pixel, in passi abbastanza corti che nessuna colonna dia più della metà dello strato che si muove, e niente si ammucchia oltre l'altezza massima, sotto le scritte.
Il mucchio di sabbia
Dopo ogni passo del flusso una passata del mucchio di sabbia: una colonna più ripida dell'angolo di riposo (REPOSE) dà alla vicina metà dell'eccesso. Scossa, la polvere regge pendii molto più bassi, come un liquido: i mucchi lasciati da una risonanza precedente, dove ora l'aria si muove, si sciolgono; nei nodi, dove l'aria è ferma, la polvere tiene il suo angolo e i mucchi stanno a cono. La taratura suona piano sulle prime risonanze e forte sull'ultima: il flusso va come la quarta potenza del volume, così ogni sosta mostra la sua figura ma solo l'ultima raccoglie tutta la polvere, in mucchi quasi uguali.
Granelli, polvere e creste
Dalle colonne scosse oltre una soglia partono granelli, tanti quanto lo scuotimento, con una spinta verso il nodo; uno su otto salta più in alto, e i granelli di polvere fine salgono nella luce e galleggiano. Atterrando portano la loro polvere nella colonna dove cadono: la polvere si conserva tutta (provato con trenta secondi di clic, uno ogni 2,8 secondi). Si disegnano come strisce lunghe quanto l'aria va avanti e indietro in quel punto. Le creste di Kundt sono uno strato a parte, una cresta ogni STRIAE pixel con lo stesso volume di polvere tolto ai lati: crescono dove l'aria si muove di più, si abbassano mentre la frequenza corre, restano quando il suono si spegne.
Il letto dipinto pixel per pixel
Il letto è un'ImageData a due pixel per pixel CSS, rifatta a ogni fotogramma in cui qualcosa si muove. Per ogni colonna la pendenza dice quanta luce prende dalla lampada, in alto un po' a sinistra: la superficie con la sua pendenza, la faccia di un mucchio con la pendenza del mucchio; sotto la superficie la polvere è più scura quanto più è in basso, le valli sono più scure, e una grana fissa, ancorata al fondo del vetro, attraversa tutto. I colori vengono da una tabella di 256 tinte fatta con le tre variabili della polvere. Scossa, la superficie luccica e si gonfia un poco.
Il vetro che canta e il ritorno a riposo
Il puntatore che scorre sul vetro lo scuote in una campana larga 15 pixel, tanto più quanto va veloce: la polvere frigge, si gonfia e alza creste che si riabbassano in mezzo secondo. La pressione è un colpetto su tutto il letto. Per tornare a riposo il tubo trema (keyframes di GSAP) e il letto diventa fluido: una diffusione risolta in modo implicito con l'algoritmo di Thomas, che può essere velocissima senza mai oltrepassare il segno, più un richiamo verso la forma del letto a riposo, ridimensionata a ogni fotogramma sulla polvere che sta sul fondo, così niente si perde. Quando niente si muove il canvas non si ridisegna.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BUSY | script.js | Tuning | La scritta mentre la frequenza sale, prima della frequenza. |
DONE | script.js | Tuned to room | La scritta quando la polvere si è posata. |
MODES | script.js | [2, 3, 5, 8] | Le risonanze su cui la taratura si ferma, in ordine: l'ultima è la figura che resta (con 8, nove mucchi). Con risonanze alte i mucchi sono tanti e piccoli. |
SWEEP | script.js | 3.6 | I secondi della taratura, dalla prima nota all'ultima. |
TUBE | script.js | 50 | La lunghezza del tubo, in centimetri: decide le frequenze scritte (con 50 centimetri, 343 Hz per ogni risonanza). |
POWDER | script.js | 7 | Quanto è alta la polvere a riposo, in pixel. |
REPOSE | script.js | 46 | Il pendio più ripido che la polvere regge, in gradi: più alto, mucchi più alti e stretti. |
DRIFT | script.js | 1 | Quanto l'onda stazionaria spinge la polvere verso i nodi: 0, la polvere balla ma resta dov'è. |
STRIAE | script.js | 3.2 | La distanza fra le creste sottili dove l'aria si muove di più, in pixel: 0, niente creste. |
DUST | script.js | 1 | Quanta polvere fine sale e galleggia nella luce: 0, niente. |
HUM | script.js | 1 | Quanto il puntatore che scorre sul vetro fa tremare la polvere: 0, per niente. |
HOLD | script.js | 2.4 | I secondi in cui il pulsante dice Tuned to room prima di tornare a riposo. |
Quando usarla
Per l'azione che misura o regola qualcosa col suono e prende qualche secondo: tarare gli altoparlanti alla stanza, il controllo del suono prima di una diretta, la calibrazione di un microfono o di un paio di cuffie, l'analisi di una traccia. Sta bene nelle app di musica, di audio e di casa connessa e nei siti di scienza e di strumenti; il fondo nero fa brillare la polvere. È un pulsante da far vedere, uno per pagina, non da mettere in una barra di comandi.
Sul telefono
La pillola è alta 60 pixel e larga 340, o lo schermo meno 32; i tappi restano di 30 pixel (26 sotto i 360) e la polvere riempie il vetro che resta, alla stessa scala, quindi con le stesse figure. Il dito che scorre lungo il vetro lo fa cantare come il mouse (touch-action: pan-y, così in su e in giù la pagina scorre ancora); il tocco dà il colpetto e fa partire la taratura. Il riflesso che segue il mouse, sul telefono, non c'è.
Con il movimento ridotto
Niente salti, niente flusso, niente polvere in aria, niente riflessi che si muovono e niente scossa. Al clic la frequenza passa per le risonanze come prima, e a ogni risonanza il letto si dissolve nella figura di quella risonanza, calcolata in una volta: mucchi sui nodi con la cima arrotondata e le creste fra loro, le prime figure solo in parte e l'ultima tutta. Le scritte cambiano in dissolvenza, la spunta è già disegnata, e il ritorno a riposo è una dissolvenza verso il letto piano. La pillola premuta si scurisce appena invece di rimpicciolire.
Trappole
- Sommando le risonanze con il loro segno, mentre la frequenza correva fra una risonanza pari e una dispari le due si sommavano su una metà del tubo e si toglievano sull'altra: la polvere scappava tutta verso il tappo di sinistra, in un mucchio enorme. Sommando i quadrati, come fa la media nel tempo quando le fasi vanno ognuna per la sua strada, ogni figura viene simmetrica.
- Coi soli granelli che saltano la polvere era troppo lenta: per fare un mucchio ci volevano più di tre secondi, e la risonanza dura mezzo secondo. Ora la maggior parte la porta il flusso dello strato di sopra, e i granelli in aria sono quello che si vede.
- Il flusso, in un fotogramma, versava fino a 6 pixel di polvere nella stessa colonna, sul bordo del mucchio, e il mucchio di sabbia passato una volta sola alla fine non ce la faceva: venivano mucchi con le pareti dritte. Ora dopo ogni passo del flusso c'è una passata del mucchio di sabbia.
- I mucchi della prima risonanza non sparivano più (la polvere non si perde), e alla fine due mucchi erano tre volte gli altri. Ora la polvere scossa regge pendii bassi, come un liquido, e la taratura suona piano sulle prime risonanze: il flusso va come la quarta potenza del volume, e solo l'ultima risonanza raccoglie tutta la polvere.
- Il richiamo verso la forma del letto a riposo partiva dalla polvere sul fondo in quell'istante, ma la polvere ancora in aria atterrava dopo: a ogni giro il tubo ne guadagnava un po', il 3% ogni quaranta secondi di clic. Ora la forma è ridimensionata a ogni fotogramma sulla polvere che sta sul fondo, e il totale non cambia di un millesimo.
- Col puntatore sopra i granelli saltavano di un pixel, contro l'orlo illuminato del letto dello stesso colore: non si vedeva niente. Ora la polvere scossa si gonfia un poco e sotto il puntatore si alzano creste sottili che si riabbassano dopo di lui; e la velocità del puntatore conta già a 260 pixel al secondo, quella di una mano tranquilla.
- La frequenza passava da 686 a 1,029 Hz e la scritta, centrata, si spostava di lato a ogni cifra in più: la frequenza tiene lo spazio delle sue cifre più larghe, allineata a sinistra.
Librerie
GSAP 3.15.0, Saira (font variabile, con l'asse della larghezza) 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.
