Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
La card della sabbia di Chladni
La card di una cassa da scaffale, con sopra una piastra di metallo scuro coperta di sabbia chiara: quando la cassa suona la piastra vibra, la sabbia salta dove la piastra si muove e si ferma dove sta immobile, e disegna la figura di quel suono, come sulle piastre di Ernst Chladni. Ogni profilo sonoro, Warm, Balanced e Bright, è un tono e una figura diversa: scegliendolo la sabbia corre sulla piastra dalla figura vecchia alla nuova mentre i hertz contano. Col puntatore sopra la piastra, o con un clic, il tono suona finché si vuole.
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 Chladni sand card</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the card of a bookshelf speaker. On top of it a square metal plate with fine pale sand: when the speaker plays
its tone the plate vibrates, the sand jumps where the plate moves and gathers where it stays still, and draws
the shape of the sound (a Chladni figure). Each sound profile is a different tone and a different figure:
choosing one, the sand runs across the plate into the new figure. With the pointer over the plate (or a press,
or the keyboard) the tone plays and the sand dances. Thousands of grains, moved by the script on a canvas -->
<article class="speaker" aria-labelledby="speaker-name" data-speaker>
<button class="plate" type="button" aria-pressed="false" data-plate data-autoclic>
<canvas class="plate__sand" aria-hidden="true" data-sand></canvas>
<span class="plate__bolt" aria-hidden="true"></span>
<span class="sr" data-plate-label>Play the tone</span>
</button>
<p class="meter" aria-hidden="true"><span class="meter__hz"><span data-hz>440</span> Hz</span><span class="meter__state" data-state>Hover to play</span></p>
<div class="info">
<div class="info__head">
<div>
<h2 class="info__name" id="speaker-name">Mora Two</h2>
<p class="info__kind">Bookshelf speaker · Walnut</p>
</div>
<p class="info__price">€490</p>
</div>
<div class="profiles" role="radiogroup" aria-label="Sound profile" data-profiles></div>
</div>
<p class="sr" aria-live="polite" data-live></p>
</article>
</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.
33 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 card della sabbia di Chladni» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una card quasi nera larga 340 pixel, con un filo grigio e gli angoli tondi. In alto una piastra quadrata di metallo anodizzato scuro, con un riflesso morbido e una vite al centro, coperta di settemila granelli di sabbia chiara. All’apertura la sabbia è sparsa a caso; poi la cassa suona il tono di Balanced e in tre secondi i granelli saltano via dalle zone che vibrano e si raccolgono in linee sottili e curve, la figura di Chladni di quel tono. Sotto la piastra, in caratteri a spaziatura fissa, 440 HZ in blu elettrico e a destra HOVER TO PLAY, che diventa PLAYING mentre la piastra suona. Poi il nome, Mora Two, Bookshelf speaker · Walnut, il prezzo e tre profili in una pista sottile, Warm, Balanced e Bright, con quello scelto in una pillola blu che scivola con un rimbalzo. Scegliendo un altro profilo i hertz contano fino al nuovo (180, 440, 1.200), la piastra suona da sola per tre secondi e la sabbia corre dalla figura vecchia alla nuova: Warm ha poche curve larghe, Bright una rosa di archi e una diagonale. Col puntatore sopra la piastra il tono suona e la sabbia si muove finché il puntatore resta; un clic la lascia suonare finché non si clicca di nuovo.
Come funziona
La vibrazione della piastra
Una piastra quadrata che vibra in un suo modo (n, m) ha la forma cos(nπx)·cos(mπy) − cos(mπx)·cos(nπy), con x e y da 0 a 1. Dove questa funzione vale zero la piastra sta ferma: sono le linee nodali, quelle che la sabbia disegna. Ogni profilo in PROFILES ha la sua coppia (n, m) e i suoi hertz.
Il salto di ogni granello
A ogni fotogramma ogni granello fa un salto in una direzione a caso, lungo quanto vibra la piastra sotto di lui (JUMP per il valore assoluto della funzione): dove la piastra si muove tanto salta lontano, sulle linee nodali quasi non si muove. Così, da soli, i granelli si fermano dove la piastra è ferma.
La spinta verso le linee
Coi soli salti la figura si formerebbe in mezzo minuto: a ogni granello si aggiunge una piccola spinta lungo la discesa del quadrato della vibrazione, f·∇f (PULL), che lo porta verso il punto fermo più vicino. Il gradiente si calcola esatto dalle stesse funzioni; ai bordi i granelli rimbalzano dentro.
Settemila punti su un canvas
I granelli sono due Float32Array; a ogni fotogramma un canvas alla densità dello schermo (al massimo 2) si pulisce e ogni granello è un fillRect di GRAIN pixel. L’intensità della vibrazione sale e scende morbida (in un quinto e in un terzo di secondo) e quando la piastra è ferma il ticker di GSAP si stacca e non si disegna più niente.
Tastiera e tocco
La piastra è un button con aria-pressed: Invio, Spazio, un clic o un tocco tengono il tono acceso o lo spengono, e il passaggio del mouse lo accende finché il mouse resta. I profili sono un radiogroup con frecce, Home e End, e un aria-live dice il profilo e i suoi hertz. Il clic dell’anteprima della libreria passa da un profilo all’altro.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PROFILES | script.js | [{ name: 'Warm', hz: 180, n: 1, m: 4 }, …] | I profili sonori: il nome, i hertz scritti sotto la piastra e il modo della piastra (n e m, due numeri diversi da 1 a 12: più sono alti, più la figura è fitta). Al massimo quattro. |
START | script.js | 'Balanced' | Il profilo scelto all’inizio (il nome, come in PROFILES). |
GRAINS | script.js | 7000 | Quanti granelli di sabbia ci sono sulla piastra. |
JUMP | script.js | 0.011 | Quanto salta un granello dove la piastra vibra di più, in frazione della piastra. |
PULL | script.js | 1.4 | Quanto forte i granelli scivolano verso le linee ferme (0 = solo i salti, la figura viene molto più lenta). |
BURST | script.js | 3 | Quanto suona la cassa da sola quando si sceglie un profilo, in secondi. |
GRAIN | script.js | 1.25 | Quanto è grande un granello, in pixel. |
Quando usarla
Per la scheda di una cassa, di una cuffia, di un giradischi o di uno strumento in un negozio di elettronica o di musica; anche per un equalizzatore o i preset di un’app audio, per un festival di musica elettronica o per un museo della scienza che vende un oggetto.
Sul telefono
La card è larga 340 pixel, o lo schermo meno 32, e il canvas si ridisegna sulla misura vera alla densità dello schermo. Il passaggio del mouse non c’è: un tocco sulla piastra accende il tono e un altro lo spegne, e la scritta dice TAP TO PLAY. Gli stessi granelli e la stessa fisica del computer.
Con il movimento ridotto
La sabbia non si muove mai: all’apertura è già nella sua figura (calcolata prima di mostrarla) e scegliendo un altro profilo la piastra sparisce in dissolvenza e torna con la figura nuova già fatta. I hertz cambiano senza contare.
Trappole
- Le scritte sopra la piastra (i hertz e lo stato) finivano sotto i granelli e non si leggevano: stanno in una riga sotto la piastra.
- Coi soli salti a caso la figura si formava in modo troppo lento e restava sfocata dopo tre secondi: serve la spinta lungo f·∇f, che porta ogni granello verso la linea ferma più vicina.
- Il clic dell’anteprima avrebbe acceso e spento la piastra a turno, sempre sulla stessa figura: un clic dello script (detail 0, senza tasto premuto) passa al profilo dopo, così nell’anteprima si vedono tutte le figure.
- Nei punti di sella, dove si incrociano due linee nodali, la piastra è ferma anche intorno: lì la sabbia resta in piccole nuvole invece che in linee. È così anche sulle piastre vere e l’abbiamo lasciato.
Librerie
GSAP 3.15.0, Geist (font variabile) 5.3.0, Geist Mono (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,6 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
