Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
L’interruttore della vibrazione
L’interruttore Haptic feedback delle impostazioni di un telefono, e il binario è una lastra di Chladni: acciaio nero con un velo di sabbia sopra. Acceso, la manopola vibra come il telefono e la lastra suona: in un secondo la sabbia scappa da dove la lastra si muove, si raccoglie dove sta ferma e disegna una delle sue figure. Spento, la manopola batte sul fondo e la sabbia salta e ricade sparsa.
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 haptics switch</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/schibsted-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the Haptic feedback switch of a phone's settings, and the track is a Chladni plate: a slab of black steel with
a little sand scattered on it. Turned on, the plate buzzes the way the phone would, and the sand runs off
where the plate moves and gathers where it stays still, drawing one of the plate's figures; turned off, the
knob knocks the end of the track and the sand jumps and lands scattered -->
<div class="hap" data-hap>
<label class="hap__label" for="hap-switch" data-label>Haptic feedback</label>
<button class="hap__switch" id="hap-switch" type="button" role="switch" aria-checked="false" data-switch data-autoclic>
<span class="hap__plate" aria-hidden="true"></span>
<span class="hap__plate hap__fill" aria-hidden="true" data-fill></span>
<canvas class="hap__sand" aria-hidden="true" data-sand></canvas>
<canvas class="hap__sand hap__was" aria-hidden="true" data-was></canvas>
<span class="hap__shade" aria-hidden="true"></span>
<span class="hap__knob" aria-hidden="true" data-knob>
<span class="hap__puck" data-puck></span>
</span>
</button>
</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.
21 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 «L’interruttore della vibrazione» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco la scritta Haptic feedback e accanto un interruttore a pillola di acciaio nero satinato, con una grossa manopola bianca e sulla lastra un velo di sabbia color avorio, sparsa a caso. Quando la pagina si apre la sabbia viene versata sulla lastra da sinistra a destra, granello per granello. Accendendo, la manopola scatta all’altra estremità e rimbalza un poco, la lastra si fa blu cobalto e la manopola vibra: la sabbia trema dove la lastra si muove e scivola verso dove sta ferma, e in meno di un secondo disegna una figura di Chladni, un ovale al centro con due archi per parte. Lungo il bordo della manopola, che è il motore, la lastra trema più forte: lì non resta nessuna linea e la sabbia viene buttata fuori. Poi la vibrazione si ferma e la figura resta. Spegnendo, la manopola torna indietro e scopre la figura che continuava sotto di lei, la lastra torna nera e la manopola batte sul fondo: il colpo corre nella lastra come un’onda e la sabbia salta, prima vicino alla manopola e poi sempre più lontano, e ricade sparsa e uniforme. Trascinando la manopola col dito o col mouse la lastra suona a frequenze diverse: a un terzo della corsa la sabbia disegna tre onde, a due terzi un ovale tagliato in due, in fondo la figura dell’acceso. Sotto il mouse la manopola si sporge verso l’altra parte; premuta affonda un poco. Anche un clic sulla scritta accende e spegne.
Come funziona
Un interruttore vero
È un button con role switch e aria-checked, con la sua label for: Invio e Spazio lo accendono e lo spengono, il clic sulla scritta anche, e il nome per chi legge con lo screen reader è la scritta. Dentro ci sono la lastra due volte, spenta e accesa (l’opacità della seconda segue la manopola lungo il binario), due canvas per la sabbia (il secondo serve alla dissolvenza del movimento ridotto), un velo con l’ombra interna e la manopola: un elemento che corre e vibra, e dentro un disco che si schiaccia sul fondo e affonda sotto il dito.
La lastra che suona
La lastra suona come due suoi modi sommati, cos(n π x) cos(m π y) più MIX volte il secondo, sulla parte libera della lastra, quella a sinistra della manopola accesa: è una figura di Chladni. Ogni figura si calcola una volta sola su una griglia di un pixel, con le sue pendenze esatte, normalizzata a 1; poi si legge fra un pixel e l’altro con l’interpolazione bilineare. Il punto dove vale zero è una linea nodale: lì la lastra non si muove.
La sabbia
3200 granelli (GRAINS). A ogni fotogramma ognuno fa un salto a caso grande KICK volte quanto si muove la lastra sotto di lui (mai meno di LINE, che dà lo spessore alle linee) e scivola giù per la pendenza di u², verso la linea più vicina: è una passeggiata a caso il cui passo si annulla sulle linee, e la sabbia ci si ferma da sola. Il salto cresce con la radice del passo di tempo e lo scivolare col passo, così la velocità non dipende dagli hertz dello schermo. Lungo il bordo della manopola la lastra trema al massimo e nessuna linea ci resta; con la manopola ferma in fondo la sabbia viene buttata fuori dal bordo, e quella nella striscia dietro scivola sotto. Si disegnano tre gruppi di quadratini in tre toni, sopra le loro ombre, e tremano nel disegno quanto la lastra sotto di loro.
Il colpo
Al fondo spento la velocità d’arrivo della manopola dà la forza del colpo, che corre nella lastra a 650 pixel al secondo: ogni granello che raggiunge salta lungo una parabola (in aria è disegnato più in alto e più grande, e la sua ombra resta sulla lastra) e ricade più lontano quanto più è vicino. Un colpo forte rimette anche la sabbia in pari lungo il binario: i granelli, ordinati lungo x, prendono uno a uno i posti, ordinati, di una sabbia sparsa da capo, il trasporto ottimo in una dimensione. Chi supera il bordo rimbalza dentro.
La manopola e la mano
La manopola è una massa su una molla (SPRING, smorzamento sotto il critico) con due pareti: rimbalza (BOUNCE) e si schiaccia dalla parte del muro. Trascinata oltre 5 pixel prende il puntatore e segue la mano su una molla più dura, e la lastra vibra con una frequenza che dipende da dove si trova: le tre figure hanno ognuna una risonanza lungo la corsa, a 0,36, a 0,68 e in fondo, e il loro peso è una curva di Lorentz. Lasciata, decide la direzione del lancio se è veloce, altrimenti la metà in cui si trova, e il clic che segue viene ignorato. L’anello del fuoco si vede con la tastiera, non dopo un clic.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
GRAINS | script.js | 3200 | I granelli di sabbia sulla lastra. |
MODES | script.js | [4, 2, 6, 0] | La figura che disegna la sabbia: due modi in cui suona la lastra, ognuno come onde per il lungo e per l’alto. |
MIX | script.js | 0.65 | Quanto del secondo modo suona insieme al primo: sotto lo zero la figura si rovescia. |
BUZZ | script.js | 1.2 | I secondi di vibrazione quando si accende. |
KICK | script.js | 2.6 | Quanto lontano la vibrazione butta un granello dove la lastra si muove di più, in pixel a fotogramma. |
LINE | script.js | 0.07 | Quanto sono spesse le linee di sabbia: il poco di tremito che resta dove la lastra sta ferma. |
KNOCK | script.js | 14 | Quanto lontano il colpo al fondo spento butta la sabbia, in pixel. |
SPRING | script.js | 170 | Quanto forte la molla tira la manopola verso la sua estremità. |
BOUNCE | script.js | 0.3 | Quanta velocità tiene la manopola rimbalzando sul fondo (0, niente rimbalzo). |
PEEK | script.js | 4 | Quanto si sporge la manopola verso l’altra parte sotto il mouse, in pixel. |
Quando usarla
Per un’impostazione che si sente sotto le dita: la vibrazione e il feedback aptico di un telefono, di un orologio o di un controller, i suoni della tastiera, un metronomo. La sabbia che si mette in ordine dice da sola che cosa fa l’interruttore. In un elenco di impostazioni conviene usarlo per una voce sola, accanto a interruttori normali.
Sul telefono
Stessa misura che sul computer, 168 per 56 pixel: a 390 pixel la scritta e l’interruttore stanno ancora su una riga, e su uno schermo più stretto la scritta va sopra l’interruttore. Il tocco accende e spegne; il dito trascinato di lato porta la manopola e fa suonare la lastra, mentre in su e in giù la pagina scorre ancora (touch-action: pan-y). Niente sporgenza sotto il mouse, che col dito non c’è. La sabbia si disegna alla densità dello schermo (fino a 2) e si calcola solo mentre qualcosa si muove.
Con il movimento ridotto
La sabbia è un’immagine ferma: sparsa da spento, la figura già fatta da acceso (calcolata in anticipo senza disegnarla). Al clic l’immagine vecchia svanisce sopra quella nuova in tre decimi di secondo, il colore della lastra cambia in dissolvenza e la manopola svanisce da una parte e ricompare dall’altra. Niente sabbia versata all’arrivo, niente vibrazione e niente colpo; premuta non affonda e non si trascina; il clic e la tastiera funzionano come sempre.
Trappole
- Dopo qualche giro di acceso e spento tutta la sabbia stava nei due terzi a sinistra: la figura la tira lì e il colpo la spostava solo di qualche pixel. Ora un colpo forte porta i granelli, nel loro ordine lungo il binario, sui posti di una sabbia sparsa da capo: a ogni spento la sabbia torna uniforme, anche dopo dodici giri dell’anteprima.
- Una linea di sabbia lungo il bordo della manopola, in fondo al binario, era un anello intorno a lei, proprio il pallino con l’anello che non vogliamo: lungo il bordo la lastra trema al massimo e nessuna linea ci resta, e con la manopola ferma in fondo la sabbia della striscia dietro di lei le scivola sotto.
- Svuotare tutta la zona sotto la manopola lasciava, spegnendo, un buco grande come lei e una linea troppo carica accanto; trascinandola, la sabbia spinta via lasciava una scia vuota e la figura veniva senza mezzo ovale. Ora trema solo il bordo, sotto la manopola la figura continua (e si vede quando lei se ne va), e in corsa sotto la mano la manopola non spinge la sabbia.
- Anche l’arrivo all’estremità accesa dava un colpo: i granelli in aria non sentivano la vibrazione e la figura partiva mezzo secondo dopo. Ora batte solo l’estremità spenta.
- Con MIX a 1 la figura toccava lo zero in punti isolati, sulla punta sinistra e in cima all’ovale, e lì la sabbia faceva dei grumi tondi come pallini: con MIX a 0,65 l’ovale si chiude e galleggia al centro.
- Col dito il trascinamento si fermava dopo pochi pixel: il tocco cattura il puntatore sull’elemento toccato, la lastra dentro il pulsante, e passando la cattura al pulsante la lastra riceveva lostpointercapture, che risale fino al pulsante e chiudeva il trascinamento. Ora la lastra non riceve il puntatore e conta solo la cattura persa dal pulsante stesso.
- Il secondo colpo del rimbalzo puntava i granelli ancora in aria su dove si trovavano in volo, e la sabbia rimessa in pari si fermava a metà strada: ora un granello in aria tiene il suo punto d’arrivo e riceve solo un po’ di scarto. I granelli buttati oltre il bordo si ammucchiavano lungo il contorno della lastra: ora rimbalzano dentro.
Librerie
GSAP 3.15.0, Schibsted Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 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.
