Il pulsante gonfiabile
Pulsanti, Fisica, WebGL, 3D
NuovaGratis
Tutti i componenti
L’interruttore a levetta d’ottone
L’impostazione Studio monitor di un’app per registrare, e l’interruttore è una vecchia levetta da banco di regia: una leva d’ottone lucido che esce da una boccola filettata, stretta da un dado esagonale su una placca di bachelite rosso sangue di bue, con OFF e ON incisi e riempiti di vernice. Tutto è disegnato in 3D in uno shader: cliccata, il dito spinge la leva contro la sua molla fino al punto morto, poi la molla la butta dall’altra parte, batte sul fermo e rimbalza; i riflessi corrono sull’ottone e la sua ombra spazza la placca.
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 brass toggle switch</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the Studio monitor setting of a recording app, and the switch is an old brass toggle on a plate of bakelite,
the kind on a studio console: a bat handle lever in a threaded bushing with a hex nut, OFF and ON engraved
and filled with paint. The lever is drawn in 3D, ray marched in a shader: flicked or dragged, it is pushed
against its spring up to the dead centre, snaps over and knocks its stop with a little bounce, while the
reflections run along the brass and its shadow sweeps across the plate -->
<div class="tile" data-studio>
<span class="tile__text">
<label class="tile__name" for="monitor-switch" data-name>Studio monitor</label>
<span class="tile__state" id="monitor-state"><span class="tile__word" data-state>Speakers muted</span></span>
</span>
<button class="toggle" id="monitor-switch" type="button" role="switch" aria-checked="false" aria-describedby="monitor-state" data-switch data-autoclic>
<span class="toggle__drop" aria-hidden="true"></span>
<canvas class="toggle__art" aria-hidden="true" data-art></canvas>
</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.
26 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 a levetta d’ottone» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una tessera scura con la scritta Studio monitor e sotto, più piccola, Speakers muted; accanto c’è l’interruttore, alto 56 pixel: una placca di bachelite color sangue di bue vista un po’ dal basso, con le venature più scure della resina, il bordo smussato che prende la luce, un filo inciso tutto intorno, OFF a sinistra e ON a destra incisi e riempiti di vernice color crema, e a ogni capo una vite d’ottone a testa bombata col suo taglio. In mezzo, su una rondella, un dado esagonale nichelato con gli spigoli smussati stringe una boccola filettata, e dalla boccola esce la levetta: un’asta d’ottone lucido che si allarga verso la punta e finisce in una pallina. A riposo è piegata verso OFF e la sua ombra, morbida, si allunga sulla placca verso destra. Accendendo, la leva parte piano, come spinta da un dito contro la molla, raggiunge il punto morto al centro e lì scatta: la molla la butta verso ON, batte sul fermo, rimbalza un paio di volte sempre meno e la placca ha un piccolo sussulto. Mentre gira i riflessi dello studio corrono lungo l’asta e la pallina, e l’ombra spazza la placca, più lunga verso ON. Intanto la riga sotto il nome scorre via e torna come Speakers live, color ottone. Col mouse sopra la tessera la placca si gira un poco verso il puntatore, così i riflessi scivolano sul metallo e sulla bachelite, e sopra l’interruttore la leva si piega un poco verso l’altra parte, come sotto un dito. La leva si può anche trascinare: segue il dito duramente fino al punto morto e lì sfugge e scatta; lasciata prima, torna indietro da sola.
Come funziona
Un interruttore vero
La placca è un button con role switch e aria-checked, la label for col nome e aria-describedby sulla riga sotto, che cambia con lo stato. Invio e Spazio accendono e spengono, la freccia a destra accende e quella a sinistra spegne, il clic sul nome anche; una riga aria-live dice il nuovo stato. L’anello del fuoco si vede solo usando la tastiera.
Un oggetto fatto di distanze
Lo shader lancia un raggio per ogni pixel e avanza finché tocca qualcosa (ray marching): ogni pezzo è una funzione che dice quanto si è lontani da lui. La placca è un rettangolo arrotondato estruso con lo spigolo smussato, il dado un prisma esagonale tagliato da due coni, la boccola un tubo con un filetto a elica (il raggio cambia col seno dell’altezza più l’angolo), la leva un cono a punte tonde con una pallina, girato intorno al perno dell’angolo della leva. Lontano dalla leva basta la distanza dalla sua scatola, così i pixel della placca costano poco.
Uno studio fatto di luce
Intorno all’interruttore c’è uno studio che esiste solo come funzione della direzione: un softbox basso a sinistra (la luce principale), una striscia a destra, un pannello in alto, una fascia chiara bassa tutto intorno e un riflesso caldo da sotto. I metalli riflettono quello studio col termine di Fresnel, più sfocato quanto più sono ruvidi, e sotto l’orizzonte della placca riflettono la bachelite; la bachelite ha la sua luce diffusa e sopra una vernice lucida. L’ombra della leva si trova marciando dal punto verso la luce principale, ammorbidita da quanto il raggio le passa vicino, e i raggi che non incontrano la scatola della leva sono già in luce.
Le lettere incise
OFF, ON e il filo intorno sono scritti in bianco su nero su una tela grande quanto due potenze di due, un po’ sfocati, e lo shader li legge come profondità del solco: dentro c’è la vernice, sulle pareti la pendenza piega la normale e scurisce l’occlusione. La tela ha le mipmap, così il filo resta continuo anche con la placca vista di sbieco.
La molla oltre il punto morto
La leva ha un angolo e una velocità calcolati quattro volte a fotogramma su gsap.ticker, col passo limitato a 1/30 di secondo. La molla la spinge sempre via dal centro, poco al centro e di più verso i fermi (SPRING), quindi può stare ferma solo contro uno dei due; al fermo rimbalza tenendo BOUNCE della velocità e la placca ha un piccolo sussulto con un ritorno elastico. Il clic è un dito: un tween di GSAP che accelera fino al punto morto (PUSH), poi la molla da sola. Trascinando, la leva segue il dito con un po’ di resistenza e oltre il centro scappa.
Camera e quiete
La camera guarda la placca dal basso (VIEW) e il mouse la fa girare intorno all’interruttore sul suo asse verticale, così la placca non si inclina mai di lato; la leva si piega verso l’altra parte sotto il mouse (PEEK). Lo shader si ridisegna solo quando cambiano l’angolo della leva o la camera. Dove WebGL manca lo stesso interruttore è disegnato su una tela piatta con la stessa camera: gradienti, ombra e leva che gira.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
THROW | script.js | 34 | Di quanti gradi la leva è piegata da ogni parte. |
SPRING | script.js | 260 | Quanto forte la molla butta la leva oltre il punto morto: più alto, scatta più in fretta. |
BOUNCE | script.js | 0.42 | Quanta velocità tiene la leva quando batte sul fermo (0, si ferma lì). |
PUSH | script.js | 0.15 | I secondi che il dito impiega a spingere la leva fino al punto morto. |
PEEK | script.js | 5 | Di quanti gradi la leva si piega verso l’altra parte sotto il mouse. |
TILT | script.js | 7 | Di quanti gradi la placca si gira verso il puntatore. |
VIEW | script.js | 50 | Da quanto in basso si guarda la placca, in gradi: più alto, la leva si vede più di profilo. |
POLISH | script.js | 0.16 | Quanto è ruvido l’ottone: 0 uno specchio, 0,5 spazzolato. |
LABELS | script.js | ['OFF', 'ON'] | Le due parole incise nella placca, a sinistra e a destra. |
STATES | script.js | ['Speakers muted', 'Speakers live'] | La riga sotto il nome, spento e acceso. |
Quando usarla
Per un interruttore che deve avere peso: il monitor o il microfono in un’app per registrare o per la musica, la modalità notte di un sito di fotografia, l’impostazione di un’app di domotica, una scelta importante in un configuratore di prodotto, il pannello di controllo di un sito con un’aria d’epoca o industriale. Lo scatto e il metallo dicono acceso anche senza leggere. È un pezzo da mettere da solo, dove si nota, non in un elenco lungo di impostazioni.
Sul telefono
Stessa misura che sul computer: l’interruttore è 184 per 56 pixel e a 390 pixel il nome e la placca stanno su una riga; sotto i 360 pixel la placca si rimpicciolisce un poco, il disegno con lei. Il tocco accende e spegne con lo stesso scatto; appena il dito si appoggia la leva si piega un poco verso l’altra parte e la placca si gira verso il dito, come col mouse. Il dito può anche trascinare la leva di lato, mentre su e giù la pagina scorre.
Con il movimento ridotto
Niente movimento: la leva non gira, la placca non si volta e non sussulta. Accendendo o spegnendo il disegno sfuma per un attimo e torna con la leva dall’altra parte, e la riga sotto il nome cambia con una dissolvenza. Il clic, il tocco e la tastiera funzionano come sempre.
Trappole
- Con la camera poco sotto la placca la leva puntava quasi verso chi guarda e si vedeva come un mozzicone scuro. Ora la placca si guarda da 50 gradi in basso, il perno è più in basso sulla placca e la leva si vede di profilo, alta sopra la bachelite.
- Con la luce dall’alto l’ombra della leva cadeva verso chi guarda, fuori dalla placca. La luce principale è bassa a sinistra: l’ombra si stende sulla placca verso destra e, mentre la leva gira, si accorcia e si allunga.
- Una superficie piatta riflette quasi la stessa direzione in ogni punto: un softbox grande lì sopra imbiancava tutta la bachelite. Il pannello alto è stato spostato fuori da quel riflesso, così lo prendono solo gli spigoli smussati e la placca quando si gira.
- Girando la camera intorno alla verticale del mondo, con la camera così in basso, la placca si inclinava di lato nell’immagine. Ora gira intorno al proprio asse verso l’alto e non rolla mai.
- Il filo inciso intorno alla placca, visto di sbieco, si spezzava a tratti. La tela delle incisioni ora è di 2048 per 1024 con le mipmap, il filo è più spesso e la pendenza del solco si legge su quattro texel.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 16 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 17 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.
