Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
L’interruttore antirumore
L’interruttore Noise cancellation dell’app di un paio di cuffie: dentro il binario passa il suono, la musica sepolta nel rumore della strada. Acceso, il silenzio si allarga dal pomello come un’onda di colore, e sul suo bordo il rumore incontra la sua immagine allo specchio e le due si chiudono insieme: resta solo la musica, un’onda bianca e pulita.
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 noise cancelling switch</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 noise cancelling switch of a headphones app: the track shows the sound going by. Off, the music is buried
in the noise of the street; on, the silence spreads out of the knob, the noise meets its own mirror image and
the two cancel out, and only the music is left -->
<div class="anc" data-anc>
<label class="anc__label" for="anc-switch" data-label>Noise cancellation</label>
<button class="anc__switch" id="anc-switch" type="button" role="switch" aria-checked="false" data-switch data-autoclic>
<canvas class="anc__sound" aria-hidden="true" data-sound></canvas>
<canvas class="anc__sound anc__was" aria-hidden="true" data-was></canvas>
<span class="anc__shade" aria-hidden="true"></span>
<span class="anc__knob" aria-hidden="true" data-knob>
<span class="anc__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.
20 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 antirumore» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco la scritta Noise cancellation e accanto un interruttore a pillola grigio chiaro con un grosso pomello bianco. Nel binario scorre il suono: una linea grigia agitata che non sta mai ferma, con dentro un’onda lenta, la musica, e sopra il rumore della strada a folate. Accendendo, il pomello scatta all’altra estremità, sbatte contro il fondo e rimbalza un poco, allungandosi mentre corre. Poi dalla fine del binario, intorno al pomello, il blu oltremare si allarga verso l’altra parte a velocità costante, come un fronte d’onda. Sul suo bordo il rumore incontra la sua immagine allo specchio, una linea ambra, con una lente ambra tenue fra le due: si stringono una sull’altra e si annullano, e dietro il bordo resta solo la musica, un’onda bianca e calma che si fa un po’ più forte. Spegnendo, il pomello torna indietro e il rumore rientra dalla fine opposta, mentre il silenzio si ritira nel pomello. Sotto il mouse il pomello si sporge verso l’altra parte; premuto si allarga; si può anche trascinare, e il silenzio segue la mano. 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 due canvas (il suono, e una sua copia per la dissolvenza del movimento ridotto), un velo con l’ombra interna del binario e il pomello: un elemento che corre e si allarga, e dentro un disco che si schiaccia.
Il suono
La linea ha un punto ogni mezzo pixel e si ridisegna a ogni fotogramma. Il rumore è value noise in due dimensioni, lungo il binario e nel tempo, in tre ottave (il rombo del traffico, le voci, il fruscio) che scorrono insieme a FLOW pixel al secondo e intanto cambiano forma; una quarta, lentissima, fa le folate. La musica è un’onda e la sua ottava. Verso le estremità l’ampiezza va a zero e il colore della linea sfuma, così la linea non sporge mai accanto al pomello.
Il silenzio e lo specchio
Il silenzio è un raggio che cresce dal centro del pomello a SPREAD pixel al secondo (e si ritira RETURN volte più in fretta), e arriva fino in fondo al binario dalla parte del pomello. Dentro il suo fronte, per BAND pixel, il rumore scala da tutto a niente: la linea bianca è musica più rumore per (1 − g), quella ambra è musica meno rumore per (1 − g), le due immagini allo specchio che si chiudono una sull’altra; fra le due una lente ambra tenue, e la loro trasparenza viene da un gradiente che segue 4g(1 − g).
Il pomello su una molla
Il pomello è una massa su una molla (SPRING, smorzamento sotto il critico) con due pareti alle estremità: arriva in fondo veloce, rimbalza perdendo velocità (BOUNCE) e si schiaccia su una molla sua, dalla parte del muro. Mentre corre si allunga in larghezza, non con una scala, così le sue estremità restano tonde. La fisica fa quattro passi per fotogramma, col passo di tempo limitato a 1/30 di secondo.
Mano, tasti, mouse
Premuto, il pomello si allarga verso dove andrebbe. Trascinato oltre 5 pixel prende il puntatore, segue la mano su una molla più dura e il silenzio lo segue; lasciato, decide la direzione del lancio se è veloce, altrimenti la metà in cui si trova, e il clic che segue viene ignorato. Sotto il mouse si sporge di PEEK pixel verso l’altra parte; dopo un clic smette fino a quando il mouse esce. L’anello del fuoco si vede con la tastiera, non dopo un clic.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SPREAD | script.js | 115 | Quanto in fretta il silenzio si allarga dal pomello, in pixel al secondo. |
RETURN | script.js | 1.5 | Quante volte più in fretta torna il rumore quando si spegne. |
NOISE | script.js | 14 | Quanto è forte il rumore della strada: l’altezza della sua onda, in pixel. |
MUSIC | script.js | 5 | Quanto è forte la musica: l’altezza dell’onda che resta, in pixel. |
BAND | script.js | 30 | Quanto è largo il bordo dove il rumore e la sua immagine allo specchio si chiudono insieme, in pixel. |
FLOW | script.js | 34 | Quanto in fretta il suono scorre nel binario, in pixel al secondo. |
SPRING | script.js | 160 | Quanto forte la molla tira il pomello verso la sua estremità. |
BOUNCE | script.js | 0.32 | Quanta velocità tiene il pomello rimbalzando sul fondo (0, niente rimbalzo). |
STRETCH | script.js | 0.11 | Quanto si allunga il pomello con la velocità. |
PEEK | script.js | 4 | Quanto si sporge il pomello verso l’altra parte sotto il mouse, in pixel. |
Quando usarla
Per un’impostazione che cambia quello che si sente o si vede: la cancellazione del rumore delle cuffie, la soppressione del rumore in una videochiamata, una modalità concentrazione, un filtro. Il suono che scorre dice da solo a che cosa serve l’interruttore. In un elenco di impostazioni conviene usarlo per una sola voce, quella da far notare, accanto a interruttori normali.
Sul telefono
Stessa misura che sul computer, 140 per 56 pixel, e a 390 pixel la scritta e l’interruttore stanno ancora su una riga. Il tocco accende e spegne; il dito trascinato di lato porta il pomello e il silenzio con sé, mentre in su e in giù la pagina scorre ancora (touch-action: pan-y). Niente sporgenza sotto il mouse, che col dito non c’è.
Con il movimento ridotto
Il suono è un’immagine ferma: niente scorrimento, niente fronte che avanza, niente rimbalzo. Al clic l’immagine vecchia svanisce sopra quella nuova in poco più di un quarto di secondo, e il pomello svanisce da una parte e ricompare dall’altra. Premuto non si allarga e non si trascina; il clic e la tastiera funzionano come sempre.
Trappole
- Il silenzio nato intorno al pomello ancora in corsa era un anello blu tutto intorno a lui, proprio il cerchio con l’anello che non vogliamo: ora aspetta che il pomello arrivi in fondo, arriva fino alla fine del binario, compare in dissolvenza finché è piccolo come il pomello (e spegnendo svanisce prima, quando è ancora una pillola), e il pomello sta a 3 pixel dal bordo invece che a 6, così quel momento è un filo che sfuma.
- L’allungamento con una scala trasformava il pomello tondo in un uovo: ora il pomello si allunga in larghezza, e le sue estremità restano tonde.
- Dove l’onda si appiattisce verso le estremità la linea restava visibile, un trattino piatto accanto al pomello: il colore della linea, e quello dello specchio, sfumano a niente prima della curva del binario.
- A 210 pixel al secondo e con un bordo di 16 il rumore e lo specchio si chiudevano in un paio di fotogrammi e non si vedevano: il fronte va a 115, il bordo è largo 30, e la lente ambra fra le due linee rende la chiusura leggibile anche piccola.
- Nelle folate calme il rumore sembrava il grafico di un titolo in borsa: le folate non scendono più sotto il 72 per cento e una terza ottava di fruscio tiene la linea agitata.
- Il pomello riscritto a ogni fotogramma, anche fermo, faceva ricalcolare gli stili: larghezza e trasformazione si scrivono solo quando cambiano.
Librerie
GSAP 3.15.0, Host Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,9 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 5 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.
