Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
La manopola della lampada
Il variatore di una lampada da lettura, illuminato dalla lampada che regola: una manopola di metallo tornito che ha un peso, scatta di tacca in tacca, lanciata scorre finché una tacca la ferma e spegne con uno scatto più duro. Girandola la luce cala e si scalda come un filamento, dal bianco caldo all'ambra di una candela, e con lei cambiano i riflessi del metallo, la placca, le scritte e l'ombra; spenta, resta il chiaro freddo di una finestra.
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 lamp dimmer</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jost@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the dimmer of a reading lamp: a fluted metal knob on a dark wall plate, and everything on the plate is seen
by the light of the lamp it dims. The knob clicks from notch to notch, coasts when flung and turns the lamp
off with a firmer click; the light warms as it dims. The plate and the knob are drawn by the script -->
<div class="dimmer" data-dimmer data-autoclic>
<canvas class="dimmer__plate" aria-hidden="true" data-canvas></canvas>
<div class="dimmer__knob" role="slider" tabindex="0" aria-labelledby="dimmer-name" aria-valuemin="0" aria-valuemax="100" data-knob></div>
<div class="dimmer__read">
<p class="dimmer__name" id="dimmer-name" data-name>Reading lamp</p>
<p class="dimmer__warmth" aria-hidden="true" data-kelvin></p>
<p class="dimmer__level" aria-hidden="true" data-level><span data-value></span><span class="dimmer__pct" data-pct>%</span></p>
</div>
<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.
17 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 manopola della lampada» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una placca da muro scura con gli angoli arrotondati e, in mezzo, una manopola di metallo larga 176 pixel: il bordo è scanalato, poi uno smusso lucido e la faccia tornita a cerchi, con una tacca incisa che segna il livello. Intorno è stampata una scala che si allarga dalla prima tacca all'ultima, con Off all'inizio; in basso Reading lamp, la temperatura della luce (2550 K) e il livello, 70%. Tutto si vede alla luce di due sorgenti: la lampada, calda, che arriva dall'alto a sinistra e lascia sulla placca una pozza di luce e, dietro la manopola, un'ombra lunga; e una finestra, fredda, sempre accesa da destra. Aprendo la pagina la manopola sta su Off e una mano la gira al 70%: la lampada si accende. Si gira prendendola dal bordo e girando in cerchio, oppure dal mezzo trascinando in su e in giù; la manopola ha un peso: resta un attimo nella tacca e poi ci scatta dentro, lasciata con forza continua a girare e una tacca la ferma con un piccolo rimbalzo. Ogni tacca è il 5%; sotto il 5% c'è uno scatto più duro e la lampada si spegne. Mentre gira, le scanalature passano sotto la luce e i riflessi corrono lungo il bordo, mentre le strisce di luce sulla faccia tornita restano ferme, come su un metallo vero. Abbassando la luce la lampada si scalda come un filamento: dal bianco caldo all'ambra di una candela, e la manopola, la placca, le scritte e l'ombra prendono quel colore; la cifra del livello si fa più sottile. Spenta, la luce cala con una coda ambra e resta solo il chiaro azzurro della finestra. Col mouse sopra, i riflessi scivolano un poco sul metallo, come muovendo la testa. Funziona anche con la rotella e con i tasti.
Come funziona
Le tacche come una forza
La manopola ha un angolo e una velocità, e su di lei agisce una forza che dipende dall'angolo: −DETENT·sin(2π·(a − a1)/passo), che spinge verso la tacca più vicina e ha una gobba fra due tacche. La tacca di Off è più larga e quasi due volte più profonda; oltre Off e oltre il massimo i fermi sono molle rigide che cedono di un grado o due. Il conto si fa sul ticker di GSAP, in passi di 2 millesimi e col fotogramma limitato a 1/30 di secondo, perché i fermi rigidi su un fotogramma lento esploderebbero.
La mano è una molla
La mano non mette l'angolo: tira la manopola con una molla (HAND_K) e la frena sulla differenza fra la sua velocità e quella della manopola. Siccome le tacche sono più rigide della mano, la manopola resta indietro di qualche grado e poi scatta nella tacca dopo: lo scatto si vede. Lasciata, la manopola tiene la sua velocità, FRICTION la rallenta e quando non ha più la forza di superare una gobba una tacca la ferma, con un piccolo rimbalzo. Lanciata con forza verso il basso si ferma al 5%: lo scatto di Off è più duro, e la lampada non si spegne per sbaglio.
In cerchio, in verticale, rotella e tasti
Preso dal bordo (oltre metà del raggio) l'angolo della mano si legge con atan2 attorno al centro e si somma la differenza fra due letture ridotta fra −180 e 180; proprio sopra il centro l'angolo non vuol dire niente e si legge senza usarlo. Preso dal mezzo, ogni pixel in su o in giù gira di SWEEP/230 gradi. La rotella somma i suoi spostamenti e ogni 40 pixel chiede una tacca (un trackpad ne manda tanti piccoli); frecce, Pagina su e giù, Inizio e Fine mettono la mano sulla tacca giusta e la lasciano quando la manopola ci è arrivata.
Il filamento e il colore della luce
La luce della lampada segue la tacca con un ritardo: FILAMENT[0] secondi per accendersi, FILAMENT[1] per calare. La sua temperatura va da WARMTH[0] a WARMTH[1] kelvin con la radice del livello, come le lampadine che si scaldano abbassandole; il colore viene dal corpo nero (l'approssimazione di Tanner Helland) in luce lineare, diviso per il bianco di una lampadina a 4000 K, che è il bianco dell'occhio. Tutti i colori si sommano in luce lineare e diventano pixel con una spalla morbida (1 − e^(−x)) e la gamma; al buio l'occhio si apre un poco.
La luce calcolata sul metallo
La manopola è disegnata su un canvas a ogni fotogramma in cui qualcosa si muove. Ognuna delle 48 scanalature è una conca divisa in sei strisce, ognuna con la sua normale: il colore è quello che il riflesso vede, le due luci (Phong) e la stanza. Lo smusso è un gradiente conico di 96 colori calcolati allo stesso modo. Sulla faccia tornita i solchi sono cerchi, e la luce si calcola lungo il solco (Kajiya-Kay): ogni luce disegna una striscia attraverso il centro che non dipende dall'angolo della manopola, quindi resta ferma mentre i segni della tornitura, una texture sopra, girano. Delle due pareti della tacca prende luce quella rivolta verso una luce.
La placca, l'ombra e le scritte
La vernice è opaca: la luce di una lampada vicina cala col coseno e col quadrato della distanza, e diventa un gradiente radiale con dieci colori calcolati; in più una lucentezza satinata verso la lampada. Le ombre sono la manopola proiettata dalle due luci (due cerchi e la fascia fra loro), sfumate con shadowBlur e scure quanto la parte di luce che tolgono. La scala stampata e le scritte prendono la luce del punto in cui stanno, e la cifra del livello passa da un peso 300 a 560 con la lampada.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LEVEL | script.js | 70 | La luce quando si apre la pagina, in percentuale. |
STEP | script.js | 5 | La percentuale fra due scatti della manopola. |
SWEEP | script.js | 290 | Di quanti gradi gira la manopola da Off al massimo. |
WARMTH | script.js | [1800, 2700] | Il colore della luce in kelvin, quasi spenta e al massimo: abbassandola si scalda. |
DETENT | script.js | 6000 | Con quanta forza ogni tacca tira dentro la manopola (0 = niente scatti). |
FRICTION | script.js | 14 | Quanto in fretta rallenta la manopola lanciata. |
FILAMENT | script.js | [0.09, 0.34] | I secondi che la lampadina impiega ad accendersi e a calare. |
Quando usarla
Per l'app di una casa connessa o di un albergo, il configuratore di una lampada, il pannello delle luci di una sala o di un palco, e in generale per un valore che si regola girando e che cambia la luce.
Sul telefono
La placca è larga 300 pixel (meno, su uno schermo più stretto) e la manopola 176. Col dito si gira dal bordo in cerchio o dal mezzo in su e in giù, senza far scorrere la pagina: touch-action none sta solo sulla manopola, fuori la pagina scorre. I riflessi che seguono il mouse sul telefono non ci sono.
Con il movimento ridotto
La manopola va subito alla tacca, senza molla, senza rimbalzo e senza lancio; i riflessi non seguono il mouse e non c'è entrata. La luce cambia solo con una dissolvenza, quella del filamento.
Trappole
- Visto dall'alto un fianco dritto riflette il pavimento, non la lampada: il bordo è un cono con la normale alzata di 57 gradi e lo smusso di 62, così il riflesso di una lampada alta 32 gradi ci cade dentro.
- Senza un bianco dell'occhio la luce a 2700 K su una vernice scura viene color kaki e le scritte, fra luce calda e finestra fredda, rosa: si divide il colore della lampada per quello di una lampadina a 4000 K.
- shadowBlur e shadowOffset del canvas non seguono la trasformazione: si disegna la forma lontano, fuori dal canvas, e si riporta l'ombra con un offset moltiplicato per scala e densità dei pixel.
- L'ombra è l'unione di due cerchi e della fascia fra loro in un tracciato solo: la fascia va disegnata nello stesso verso dei cerchi, sennò il riempimento nonzero lascia un buco.
- Con le scanalature fatte di facce piatte il bordo sembra un ingranaggio: ogni scanalatura è una conca di sei strisce, più scure sul fondo.
- atan2 salta da 180 a −180, e vicino al centro l'angolo è solo rumore: si legge sempre, così l'ultima lettura è giusta, ma si usa solo oltre 12 pixel dal centro.
- La rotella di un trackpad manda tanti spostamenti piccoli: si sommano e si chiede una tacca ogni 40 pixel. E va ascoltata con passive: false, sennò la pagina scorre.
Librerie
GSAP 3.15.0, Jost (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.
