Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
L’interruttore del ventilatore
L’interruttore Desk fan dell’app di una casa intelligente, e la manopola è il ventilatore. Acceso, le pale prendono velocità e si sfocano in un disco, e tre nastrini di carta arricciati, nascosti dietro la manopola, si srotolano come una lingua di Menelik e sventolano lungo il binario. Spento, il ventilatore rallenta da solo e i nastri si riarrotolano dalla punta.
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 desk fan switch</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/rethink-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the switch of a desk fan in a smart home app. The knob is the fan: turned on, its blades get up to speed and
blur into a disc, and three curled paper ribbons tied behind it unroll in the air and stream along the track;
turned off, the fan winds down on its own and the ribbons spring back into their curls -->
<div class="fan" data-fan>
<label class="fan__label" for="fan-switch" data-label>Desk fan</label>
<button class="fan__switch" id="fan-switch" type="button" role="switch" aria-checked="false" data-switch data-autoclic>
<span class="fan__fill" aria-hidden="true" data-fill></span>
<canvas class="fan__air" aria-hidden="true" data-air></canvas>
<canvas class="fan__air fan__was" aria-hidden="true" data-was></canvas>
<span class="fan__shade" aria-hidden="true"></span>
<span class="fan__knob" aria-hidden="true" data-knob>
<span class="fan__puck" data-puck>
<canvas class="fan__rotor" data-rotor></canvas>
</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.
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 del ventilatore» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco la scritta Desk fan e accanto un interruttore a pillola grigio chiaro con una grossa manopola bianca: dentro la manopola le cinque pale grigie di un ventilatore, con il mozzo al centro. Accendendo, la manopola scatta all’altra estremità e rimbalza un poco, il binario si colora d’azzurro e le pale prendono velocità: prima si vedono girare, poi si sfocano in un disco azzurro chiaro, come un ventilatore vero che gira. Quando il ventilatore è a metà velocità, da dietro la manopola escono tre nastrini di carta bianca, arricciati come il nastro di un regalo: l’aria li srotola dal nodo verso la punta, uno dopo l’altro, come una lingua di Menelik, e poi sventolano lungo il binario, girandosi nel vento e mostrando ogni tanto il rovescio azzurrino. Spegnendo, la manopola torna indietro e il motore si stacca: le pale rallentano da sole, prima in fretta e poi sempre più piano, e il disco diventa d’acciaio spazzolato prima di tornare cinque pale ferme. L’ultimo soffio spinge i nastri dall’altra parte, e appena il ventilatore scende sotto metà velocità si riarrotolano dalla punta fino al nodo, dietro la manopola. Sotto il mouse la manopola si sporge verso l’altra parte e le pale ferme fanno un mezzo giro, come se sentissero arrivare la mano; premuta si rimpicciolisce; si può anche trascinare, e il ventilatore gira tanto più forte quanto più avanti la si porta. 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 il colore del binario acceso (la sua opacità segue la manopola), due canvas per i nastri (il secondo serve alla dissolvenza del movimento ridotto), un velo con l’ombra interna del binario e la manopola: un elemento che corre e dentro un disco che si schiaccia, con il canvas delle pale.
Il motore e la sfocatura
La velocità del ventilatore va da 0 a 1: il motore la tira verso 1 in SPIN_UP secondi; staccato, l’aria la frena con il quadrato della velocità e i cuscinetti con un attrito fisso, così da piena velocità si ferma in COAST secondi, in fretta all’inizio e piano alla fine. Le pale si disegnano fino a 32 volte sull’angolo che percorrono in un sessantesimo di secondo, ognuna con 1/32 di bianco sommato in modalità lighter: si somma solo quanta parte di ogni pixel coprono, e il colore si mette dopo con source-in. A velocità costante quell’immagine non cambia, gira soltanto: si ricalcola solo quando la sfocatura cambia di 0,02 radianti e si posa ogni fotogramma ruotata all’angolo del ventilatore.
I nastri
Ogni nastro è una catena di punti ogni 5,5 pixel (Verlet), legata al centro del ventilatore. A ogni fotogramma fa sei passi: l’aria spinge ogni pezzo di carta di traverso con il quadrato della velocità relativa e lo tira per il lungo, più piano, e lo tiene teso; una molla piega ogni giunto verso il suo ricciolo, rigida dove il nastro è ancora arrotolato e morbida dove è aperto; poi tre giri di vincoli tengono la lunghezza e la carta dentro il binario. L’aria esce dal ventilatore verso la parte libera del binario, rallenta allontanandosi e arriva a raffiche: onde lunghe una sessantina di pixel che viaggiano con lei.
La lingua di Menelik
Per ogni nastro un numero dice fin dove l’aria l’ha srotolato, dal nodo (0) alla punta (1): oltre quel fronte i giunti sono ancora arrotolati. Sopra il 42 per cento della velocità il fronte avanza (un nastro un attimo dopo l’altro); sotto la metà torna indietro, e la punta si riarrotola per prima. La parte arrotolata viaggia con la manopola, infilata dietro di lei, e il nodo sale un poco, così il rotolo resta al centro. Le raffiche e il giro della carta arrivano solo a nastro aperto.
La carta e la manopola
Il nastro si disegna come una striscia larga quanto lui, più stretta dove si gira di taglio e più azzurra dove mostra il rovescio: il giro segue un coseno che viaggia con l’aria, e il colore è un gradiente lungo il binario. La manopola è una massa su una molla (SPRING) con due pareti: rimbalza (BOUNCE) e si schiaccia dalla parte del muro. Trascinata oltre 5 pixel prende il puntatore e fa girare il ventilatore tanto quanto è avanti; lasciata, decide la direzione del lancio se è veloce, altrimenti la metà in cui si trova. Quando tutto è fermo e arrotolato i nastri smettono di calcolare e di disegnare.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SPEED | script.js | 16 | Quanto gira veloce il ventilatore a piena velocità, in giri al secondo. |
SPIN_UP | script.js | 0.9 | I secondi che il motore impiega a portare il ventilatore a piena velocità. |
COAST | script.js | 2.4 | I secondi che il ventilatore impiega a fermarsi da solo dopo che è stato spento. |
BLADES | script.js | 5 | Le pale del ventilatore. |
SHUTTER | script.js | 1 | Quanta parte di un sessantesimo di secondo trattiene l’occhio: la sfocatura delle pale che girano (0, niente sfocatura). |
WIND | script.js | 300 | Quanto corre l’aria a piena velocità, in pixel al secondo. |
GUSTS | script.js | 0.5 | Quanto l’aria arriva a raffiche e fa sventolare i nastri (0, una brezza ferma). |
RIBBONS | script.js | [84, 98, 72] | I nastri legati dietro il ventilatore: quanto è lungo ognuno, in pixel. |
CURL | script.js | 0.16 | Quanto stretti si arricciano i nastri quando l’aria si ferma: uno diviso il raggio del ricciolo. |
SPRING | script.js | 170 | Quanto forte la molla tira la manopola verso la sua estremità. |
BOUNCE | script.js | 0.3 | Quanta velocità tiene la manopola rimbalzando sul fondo (0, niente rimbalzo). |
PEEK | script.js | 4 | Quanto si sporge la manopola verso l’altra parte sotto il mouse, in pixel. |
Quando usarla
Per l’interruttore di un apparecchio che si muove o fa qualcosa di visibile: un ventilatore, un depuratore d’aria, la ventilazione di casa o dell’auto, la ventola di un portatile. Le pale e i nastri dicono da soli che cosa fa l’interruttore, e il ventilatore che rallenta da solo dice che non si ferma di colpo. In un elenco di dispositivi conviene usarlo per uno solo, accanto a interruttori normali.
Sul telefono
Stessa misura che sul computer, 156 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 la manopola e fa girare il ventilatore, mentre in su e in giù la pagina scorre ancora (touch-action: pan-y). Niente sporgenza sotto il mouse, che col dito non c’è. Su uno schermo a 120 hertz la sfocatura è la stessa, perché è calcolata su un sessantesimo di secondo e non sul fotogramma.
Con il movimento ridotto
Niente movimento: acceso, il ventilatore è un’immagine ferma di se stesso che gira, il disco sfocato con i nastri tesi nel vento; spento, cinque pale ferme e niente nastri. Al clic la manopola svanisce da una parte e ricompare dall’altra, il colore del binario cambia in dissolvenza e l’immagine vecchia dei nastri svanisce sopra quella nuova, in meno di mezzo secondo. Premuta non si rimpicciolisce e non si trascina; il clic e la tastiera funzionano come sempre.
Trappole
- Sommare le pale colorate in modalità lighter, ognuna con 1/16 dell’inchiostro, tingeva il disco grigio di verde e di lilla mentre il ventilatore rallentava: ogni passata arrotonda i tre canali a 8 bit in modo diverso e gli errori si sommano. Ora si somma solo la copertura, in bianco, e il colore si mette dopo con source-in.
- Il peso della carta srotolava la radice del ricciolo e il rotolo pendeva fino al fondo del binario, spuntando sotto la manopola: la carta arrotolata è più rigida, e il nodo sale di 8 pixel finché il nastro è arrotolato.
- I nastri si aprivano mentre la manopola stava ancora rimbalzando e diventavano un groviglio; e per inerzia i riccioli uscivano da sopra la manopola durante la corsa. Ora si srotolano solo sopra il 42 per cento della velocità, quando la manopola è arrivata, uno dopo l’altro, le raffiche arrivano solo a nastro aperto, e la parte arrotolata viaggia con la manopola.
- Spegnendo, la manopola correva sopra i nastri e li accartocciava contro il fondo: il riavvolgimento, il momento più bello, avveniva tutto nascosto. Ora il ventilatore soffia sempre verso la parte libera del binario, e i nastri si riarrotolano solo sotto metà velocità: l’ultimo soffio li porta a destra della manopola e lì si vede il ricciolo che torna.
- Le raffiche erano onde lunghe 38 pixel che passavano a 255 pixel al secondo: la carta si muoveva di 2 pixel e i nastri sembravano spaghetti. Ora le onde sono lunghe una sessantina di pixel e più forti, e la carta aperta è più morbida.
- Ridisegnare le pale 16 volte a ogni fotogramma costava 1,2 millisecondi: a velocità costante il disco sfocato è sempre la stessa immagine girata, e ora si calcola una volta e si posa ruotata. Il rotolo dietro la manopola tremava di un decimo di pixel per sempre e non andava mai a riposo: la carta arrotolata ha un attrito suo, e quando tutto è arrotolato e fermo entro mezzo pixel i nastri si fermano.
Librerie
GSAP 3.15.0, Rethink Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 12 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.
