L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
Il termostato
Una manopola di metallo da girare col dito: la ghiera zigrinata segue la mano, la temperatura scatta ogni mezzo grado col segno bianco che salta di tacca in tacca e la cifra che rotola, e la scala si accende fra la stanza e la temperatura chiesta, calda se riscalda e fredda se raffresca, mentre la stanza ci arriva piano.
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 thermostat</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/saira@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the thermostat: a dial turned by hand with a click every half degree; the scale lights up between the room
and the temperature asked for, warm or cold, and the room slowly gets there -->
<section class="thermo" aria-label="Thermostat" data-thermo data-autoclic>
<div class="dial" role="slider" tabindex="0" aria-label="Temperature" aria-valuemin="10" aria-valuemax="30" data-dial>
<svg class="dial__svg" viewBox="-100 -100 200 200" aria-hidden="true" data-svg></svg>
<div class="dial__read" aria-hidden="true">
<p class="dial__mode"><span class="roll" data-mode></span></p>
<p class="dial__temp"><span class="roll" data-temp></span><span class="dial__deg">°</span></p>
<p class="dial__now">Now <span class="roll" data-now></span>°</p>
</div>
</div>
<div class="controls">
<button class="step" type="button" aria-label="Half a degree less" data-less><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 12h12"/></svg></button>
<div class="modes" role="radiogroup" aria-label="Mode" data-modes>
<span class="modes__pill" aria-hidden="true" data-pill></span>
</div>
<button class="step" type="button" aria-label="Half a degree more" data-more><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 12h12M12 6v12"/></svg></button>
</div>
<p class="sr" aria-live="polite" data-live></p>
</section>
</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.
16 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 «Il termostato» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una manopola rotonda: una ghiera di metallo zigrinata, una faccia scura con una scala di tacche su tre quarti di giro, un segno bianco sulla temperatura chiesta e un piccolo triangolo su quella della stanza; al centro Heating, 21° e Now 19.4°; sotto meno, Heat Cool Off e più. Girando la manopola col dito o col mouse la ghiera gira con la mano e ogni mezzo grado la temperatura scatta: il segno salta alla tacca dopo su una molla, la cifra rotola verso l'alto o verso il basso e fa un piccolo sobbalzo; oltre i 10 e i 30 gradi la ghiera cede appena, come contro un fermo, e lasciandola torna alla sua tacca con un rimbalzo. Le tacche fra la stanza e la temperatura chiesta si accendono d'arancio se riscalda e d'azzurro se raffresca, e in fondo alla faccia respira un alone dello stesso colore; ogni poco la stanza si scalda o si raffredda di un decimo, il triangolo avanza e Now rotola. Quando la stanza ci arriva la scritta diventa Holding; con Off tutto si spegne.
Come funziona
La manopola disegnata
La manopola è un SVG con l'origine al centro: la ghiera ha 96 scanalature che girano col gruppo, la scala ha una tacca ogni mezzo grado, più lunga ogni grado, distribuita su DEGREES gradi di giro per grado di temperatura. Il segno e il triangolo sono gruppi che ruotano attorno al centro (svgOrigin 0 0).
La mano e gli scatti
Sotto il dito si misura l'angolo con atan2 attorno al centro e si somma la differenza ridotta fra −180 e 180, così il passaggio in fondo non fa salti. La ghiera segue la mano senza interruzioni, la temperatura invece si arrotonda al mezzo grado: quando cambia, il segno corre alla tacca nuova su una molla (CLICK) calcolata sul ticker di GSAP e la cifra rotola nel verso del cambio.
Il fermo e il ritorno
Oltre gli estremi la ghiera mostra solo un quarto di quanto gira la mano, come contro un fermo; lasciandola, un tween con elastic.out la riporta alla tacca della temperatura chiesta. Il tween lavora su un oggetto qualunque, quindi va tenuto e fermato a mano quando il dito afferra di nuovo.
La stanza e i colori
Ogni DRIFT secondi, mentre riscalda o raffresca, la stanza si muove di un decimo verso la temperatura chiesta: il triangolo scivola e Now rotola. Le tacche fra le due temperature prendono il colore della variabile CSS --on, che GSAP porta dall'arancio all'azzurro o al grigio cambiando modo; lo stesso colore tinge l'alone in fondo alla faccia, che respira allargando il suo raggio.
Rotella, tasti e anteprima
La rotella e i pulsanti meno e più cambiano di mezzo grado; coi tasti la manopola è uno slider (frecce, pagina su e giù di due gradi, Home e Fine) e i modi sono un gruppo di scelte. Un clic da script (l'anteprima della libreria) è una mano finta che gira la manopola a un'altra temperatura, e ogni terza volta passa da Heat a Cool.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
RANGE | script.js | [10, 30] | La temperatura più bassa e la più alta che si possono chiedere. |
START | script.js | [21, 19.4] | La temperatura chiesta e quella della stanza all'inizio. |
DEGREES | script.js | 13.5 | Di quanto gira la manopola per un grado di temperatura. |
DRIFT | script.js | 2.5 | I secondi che la stanza impiega a scaldarsi o raffreddarsi di un decimo di grado. |
CLICK | script.js | [600, 0.42] | La molla del segno che salta di tacca in tacca: quanto è rigida e quanto è frenata. |
Quando usarla
Per l'app di una casa connessa, il pannello di un albergo o di un agriturismo, un configuratore, un mixer, qualunque valore che si regola girando una manopola.
Sul telefono
La manopola è larga al massimo 320 pixel; il dito la gira senza far scorrere la pagina (touch-action none sulla manopola), e meno e più sono pulsanti tondi di 44 pixel per chi preferisce toccare.
Con il movimento ridotto
Le cifre cambiano senza rotolare, il segno e la ghiera vanno subito al loro posto senza molla, l'alone non respira, e niente entrata.
Trappole
- atan2 salta da 180 a −180 in fondo alla manopola: si somma la differenza fra due letture, ridotta fra −180 e 180, mai l'angolo letto.
- La ghiera e la temperatura sono due cose: la ghiera segue la mano senza scatti, la temperatura si arrotonda e il segno salta di tacca in tacca.
- Il tween che riporta la ghiera lavora su un oggetto, non sulla ghiera: killTweensOf(ghiera) non lo ferma e combatterebbe col dito. Va tenuto e fermato a mano.
- La rotella va ascoltata con passive: false, sennò preventDefault non ferma lo scorrimento della pagina.
- Tacche, alone e scritta prendono il colore da una sola variabile CSS (--on): GSAP la cambia in un tween solo e nel gradiente SVG va letta come stile (stop-color: var(--on)).
Librerie
GSAP 3.15.0, Saira (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 3 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
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.
