L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
La manopola del forno
La manopola delle funzioni di un forno smaltato di blu cobalto: una manopola di bachelite a becco in un anello d'ottone, coi simboli stampati intorno. Si gira e scatta di funzione in funzione: cede un poco nella tacca, poi una molla la butta nella successiva, il segno si aggancia all'anello e il simbolo salta. Dietro il vetro il forno fa quello che dice la funzione: si accende la luce, la ventola parte e si sfoca, le resistenze si scaldano dal rosso cupo all'arancio, col colore calcolato dalla legge di Planck, e la loro luce cade dentro il forno mentre l'aria calda fa tremare la vista.
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 oven knob</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/encode-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the mode knob of an oven in cobalt enamel: a bakelite pointer knob that clicks from mode to mode, and above
it the oven itself, seen through the door, waking the elements, the fan and the lamp of the mode it is
turned to. The window and the printing round the knob are drawn by the script -->
<div class="wrap">
<section class="oven" aria-label="Oven" data-oven data-autoclic>
<div class="oven__window" aria-hidden="true">
<canvas class="oven__cavity" data-cavity></canvas>
</div>
<div class="oven__controls">
<div class="dial" role="slider" tabindex="0" aria-label="Oven mode" aria-valuemin="0" aria-valuemax="6" aria-describedby="oven-line" data-dial>
<svg class="dial__print" viewBox="-76 -76 152 152" aria-hidden="true" data-print></svg>
<div class="dial__hub" aria-hidden="true" data-hub>
<span class="dial__ring"></span>
<span class="dial__shade"></span>
<svg class="dial__knob" viewBox="-40 -40 80 80" data-knob></svg>
</div>
</div>
<div class="read">
<p class="read__name" aria-hidden="true" data-name><span></span></p>
<p class="read__line" id="oven-line" data-line></p>
</div>
</div>
<p class="sr" aria-live="polite" data-live></p>
</section>
</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.
19 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 del forno» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco il davanti di un forno smaltato di blu cobalto, largo 360 pixel: in alto la finestra della porta, vetro nero con dentro il forno visto in prospettiva (le pareti, la griglia sui suoi binari, la ventola sul fondo dentro la resistenza ad anello, la resistenza di sopra, quella del grill e quella di sotto, la lampadina in un angolo); in basso la manopola, una manopola di bachelite nera a becco in un anello d'ottone, e intorno i simboli delle sette funzioni stampati in bianco come su un forno vero: Off, la lampadina della luce, il fiocco di neve dello scongelamento, la ventola nell'anello del ventilato, il forno con sopra e sotto della cottura statica, il grill e la pizza. A destra il nome della funzione, grande, e una riga che dice cosa fa il forno. Aprendo la pagina la manopola sta su Off e una mano la gira fino a Bake: scatta su Light (si accende la luce), Defrost (parte la ventola), Fan bake, e si ferma su Bake, dove la resistenza di sopra e quella di sotto si scaldano e si accendono di arancio. Si gira prendendola e girando in cerchio, col dito o col mouse: nella tacca cede un poco, poi a metà strada una molla la butta nella tacca dopo e ci si posa con un piccolo rimbalzo; il segnetto sotto il simbolo nuovo si allunga fino all'anello d'ottone, il simbolo salta un poco verso l'esterno e torna, e il nome nuovo entra dal lato verso cui gira la manopola. Un tocco su un simbolo porta la manopola lì, scattando su tutte le funzioni in mezzo; funzionano anche la rotella e i tasti. Dentro il forno ogni funzione fa la sua parte: la luce si accende di colpo, la ventola prende velocità in mezzo secondo e diventa mossa, rallenta più piano; le resistenze ci mettono un momento a scaldarsi e diventano rosso cupo, poi arancio (il grill, più caldo, quasi giallo), e lasciate si spengono con una coda rossa. La loro luce colora le pareti, la griglia e la ventola, e il simbolo della funzione scelta si accende dello stesso colore. Quando l'aria è calda la vista trema un poco, come sopra una strada d'estate.
Come funziona
Una mira che salta e una molla
La mano non mette l'angolo della manopola: gira un angolo finto h (in cerchio si somma la differenza fra due letture di atan2 attorno al centro, ridotta fra −180 e 180, e vicino al centro non si usa). La manopola mira alla tacca più vicina, n·PITCH, più CREEP volte quello che la mano ha girato oltre: così nella tacca cede un poco. A metà strada fra due tacche la mira salta di PITCH·(1 − CREEP), e una molla, x'' = −k(x − mira) − 2ζ√k·x' con CLICK = [k, ζ], butta la manopola di là: con ζ = 0,5 arriva in 50 millesimi, va oltre di sei gradi e si posa in un quarto di secondo. La funzione cambia proprio a metà strada, quando la manopola scatta. Oltre la prima e l'ultima tacca la mira cede al massimo di 5 gradi, come contro un fermo.
Dito, rotella, tasti e simboli
Il quadrante è un role slider con aria-valuemin 0, aria-valuemax 6, aria-valuenow e aria-valuetext col nome della funzione, e la riga che la spiega in aria-describedby. Frecce, Pagina su e giù (tre funzioni), Inizio e Fine mettono la mira sulla tacca giusta; la rotella somma i suoi spostamenti e chiede una tacca ogni 50 pixel. Un tocco su un simbolo, ovunque nella sua fetta dell'anello, dall'ottone fino a un poco oltre il quadrante, fa girare la mira fin lì con un tween power2.out: veloce all'inizio, così il primo scatto arriva subito, e le funzioni in mezzo scattano tutte. Lasciata la manopola, o finito il giro, una regione aria-live dice il nome e la riga.
La mappa della luce
L'interno del forno è una scatola vista da un occhio un po' sotto il centro. Una volta sola, per ogni punto di una griglia di 152 per 80 si lancia un raggio dall'occhio attraverso il vetro fino alla parete che tocca, e per ognuna delle cinque sorgenti (quattro resistenze e la lampadina) si somma lungo la sorgente peso·cos/d²: cinque mappe. A ogni fotogramma si mescolano con la luce che ogni sorgente manda in quel momento, più una parte di luce rimbalzata che cala negli angoli, e diventano pixel con una spalla morbida (1 − e^(−x)) e la gamma, da una tabella letta con la radice quadrata della luce perché il buio non abbia gradini. La griglia, la ventola e ogni resistenza prendono la luce dei loro punti nello stesso modo.
Il colore del metallo caldo
Ogni resistenza ha una temperatura che va verso quella di lavoro (985–1060 K) o verso la stanza, con un tempo HEAT[0] per scaldarsi e HEAT[1] per raffreddarsi. Il suo colore viene dalla legge di Planck a 610, 549 e 465 nanometri, diviso per il rosso a 1000 K: sale così ripido che sotto i 700 K non si vede niente, a 900 è rosso cupo e a 1000 arancio, e la spalla morbida porta il grill, più caldo, verso il giallo invece di bruciarlo in bianco; la luce che il grill manda sulle pareti è tenuta al 42%, così il forno resta nella stessa gamma in ogni funzione. Il tubo si disegna a pezzi, più grosso davanti e più sottile in fondo, col bagliore come ombra sfumata (shadowBlur moltiplicato per la scala, perché non segue la trasformazione) in modo additivo, una riga più calda nel mezzo e un riflesso della lampadina sopra.
La ventola e l'aria calda
La ventola ha un'inerzia: prende velocità in mezzo secondo e rallenta in un secondo e mezzo. Le sei pale si disegnano mosse, ripetute fino a 22 volte sull'angolo che fanno in un fotogramma, come le vede l'occhio; il dado al centro è un esagono. L'aria si scalda dopo le resistenze, e quando è calda la finestra si ridisegna a righe sottili spostate di lato su due onde di seno che salgono, alte HAZE pixel: prima l'immagine ferma, poi sopra le righe, così al bordo non resta mai una fessura.
La manopola con la luce ferma
La manopola è un SVG: un corpo tondo con un gradiente radiale e sopra il becco, che gira. La luce viene dall'alto a sinistra e deve restare lì: l'ombra del becco è la stessa forma spostata di un passo fisso e poi girata (translate prima di rotate), tagliata dal corpo; i gradienti del becco sono in userSpaceOnUse e a ogni fotogramma girano all'indietro con gradientTransform rotate(−a), così il bordo illuminato resta a sinistra. A ogni scatto il segnetto sotto il simbolo si allunga fino all'ottone con elastic.out, il simbolo fa un salto verso l'esterno lungo il suo raggio e torna, e le sue parti (le righe sopra e sotto, lo zig-zag, l'anello) prendono il colore della resistenza che rappresentano.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
START | script.js | 4 | La funzione quando si apre la pagina: 0 è Off, 1 Light, 2 Defrost, 3 Fan bake, 4 Bake, 5 Grill, 6 Pizza. |
PITCH | script.js | 45 | I gradi fra due posizioni della manopola. |
CREEP | script.js | 0.3 | Quanto cede la manopola prima di scattare, come parte del giro della mano (0 = non cede). |
CLICK | script.js | [2400, 0.5] | La molla che butta la manopola nella tacca: quanto è rigida e quanto è frenata (1 = nessun rimbalzo). |
HEAT | script.js | [0.5, 2.6] | I secondi che una resistenza impiega a scaldarsi e a raffreddarsi. |
FAN | script.js | 4.5 | La velocità della ventola, in giri al secondo. |
HAZE | script.js | 0.6 | Quanto l'aria calda piega la vista, in pixel (0 = niente). |
Quando usarla
Per il pannello di un elettrodomestico in un'app per la casa, il configuratore di un forno o di una cucina, il sito di un marchio di elettrodomestici, e in generale per una scelta fra poche funzioni con un nome, dove ogni funzione cambia il comportamento di qualcosa che si vede.
Sul telefono
Il forno è largo 360 pixel e si stringe con lo schermo (a 390 è largo 358): tutte le misure seguono la sua larghezza con le unità del contenitore (cqw). Col dito si gira in cerchio sulla manopola senza far scorrere la pagina, perché touch-action none sta solo sul quadrante; un tocco su un simbolo porta la manopola lì, e ogni simbolo risponde in tutta la sua fetta dell'anello, così è un bersaglio grande. Lo stato al passaggio del mouse c'è solo con un mouse.
Con il movimento ridotto
La manopola va subito alla tacca, senza cedere, senza molla e senza rimbalzo, e i simboli non saltano; il nome cambia in dissolvenza. Dentro il forno la luce e le resistenze cambiano solo in dissolvenza, la ventola resta ferma col suo mosso e l'aria calda non trema. All'apertura la manopola è già sulla sua funzione e il forno compare in dissolvenza.
Trappole
- Una tabella del tono letta in modo lineare dava gradini nel buio, col primo passo già a 20 su 255: si legge con la radice quadrata della luce, e l'interno scuro ha tutti i suoi valori.
- Le righe spostate dall'aria calda lasciavano una fessura scura al bordo dell'apertura: prima si disegna l'immagine ferma, poi sopra le righe spostate.
- Una ventola a 11 giri al secondo, mossa su 1/45 di secondo, diventava un disco piatto che non sembrava girare: gira a 4,5 giri e il mosso è quello di un fotogramma, così le pale si vedono passare.
- L'acciaio freddo prendeva il colore della luce calda e sembrava rame: il metallo riflette la luce ma la ingrigisce, e il suo colore è mescolato al 65% con la sua luminanza.
- Un tocco su un simbolo con power2.inOut faceva il primo scatto dopo un quarto di secondo, e sembrava che il tocco non fosse arrivato: con power2.out lo scatto arriva subito.
- I simboli erano bersagli da 22 pixel: ognuno risponde in tutta la sua fetta dell'anello, e il quadrante prende il dito anche un poco oltre il bordo, con un ::before.
- Il grill, più caldo, mandava cinque volte la luce delle altre resistenze, e le parti d'acciaio fredde vicine diventavano bianche come se fossero accese: la sua luce sulle pareti è tenuta indietro, e un tubo prende la luce come media di otto punti lungo tutta la sua lunghezza, non in un solo punto che può stare proprio accanto al grill.
- Il nome che usciva di lato veniva tagliato a metà dall'overflow hidden della riga: la riga non taglia più, c'è lo spazio fra le colonne.
Librerie
GSAP 3.15.0, Encode Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 17 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 7 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.
