Il pulsante che copia
Pulsanti, Testo, SVG, Fisica
NuovaGratis
Tutti i componenti
La manopola del sintonizzatore
La manopola di sintonia di una radio: pesante, si gira in tondo e lanciata continua a girare e rallenta, mentre l'ago rosso corre sulla scala retroilluminata. Fra una stazione e l'altra lo schermo è tutto neve; vicino a una stazione la manopola viene tirata dentro come da una calamita, il rumore si pulisce, la luce della scala si scalda dal grigio freddo all'ambra e il nome della stazione si compone lettera per lettera.
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 tuning knob</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 tuning knob of a radio: a heavy knurled knob with a finger dimple, a backlit glass scale with the stations
printed on it and a red needle, and a small screen that shows the static between stations. The knob coasts
when flung, a station pulls it in like a magnet, the static clears and the light of the scale warms. The
scale, the screen and the knob are drawn by the script -->
<div class="wrap">
<section class="tuner" aria-label="Radio tuner" data-tuner data-autoclic>
<div class="scale" data-scale>
<canvas class="scale__canvas" aria-hidden="true" data-scale-canvas></canvas>
<div class="scale__marks" aria-hidden="true" data-marks></div>
</div>
<div class="tuner__low">
<div class="panel">
<div class="screen" aria-hidden="true" data-screen>
<canvas class="screen__noise" data-static></canvas>
<p class="screen__name" data-name></p>
</div>
<div class="read" aria-hidden="true">
<p class="read__freq"><span data-freq>87.5</span><span class="read__unit">MHz</span></p>
<svg class="read__bars" viewBox="0 0 23 14" data-bars>
<rect x="0" y="10" width="3" height="4" rx="0.8" data-bar/>
<rect x="5" y="7.5" width="3" height="6.5" rx="0.8" data-bar/>
<rect x="10" y="5" width="3" height="9" rx="0.8" data-bar/>
<rect x="15" y="2.5" width="3" height="11.5" rx="0.8" data-bar/>
<rect x="20" y="0" width="3" height="14" rx="0.8" data-bar/>
</svg>
<p class="read__line" data-line>No station</p>
</div>
</div>
<div class="knob" role="slider" tabindex="0" aria-label="Tuning" aria-valuemin="87.5" aria-valuemax="108" aria-valuenow="87.5" data-knob>
<canvas class="knob__canvas" aria-hidden="true" data-knob-canvas></canvas>
</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.
48 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 sintonizzatore» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero il frontale di una radio, largo 360 pixel, nero caldo con gli angoli arrotondati. In alto, dietro un vetro, la scala: un foglio illuminato da dietro con le frequenze FM da 88 a 108 e le tacche ogni mezzo MHz, e sotto, su due righe, i generi delle sette stazioni (Jazz, Soul, Ambient, Dub, City pop, Blues, Folk), ognuno con una linea sottile e una piccola punta sul suo punto della scala; fra le frequenze e i nomi scorre l'ago rosso. Sotto a sinistra uno schermo scuro col nome della stazione, la frequenza grande (100.4 MHz), cinque barre del segnale e il genere con la città (City pop · Osaka); a destra la manopola, larga 140 pixel: un bordo zigrinato scuro, uno smusso lucido, un cappello di alluminio tornito e una fossetta per il dito. Aprendo la pagina la radio è fra due stazioni e una mano la porta su Neon Avenue. La manopola si gira in tondo, col dito o col mouse, e serve circa un giro per ogni quattro MHz; ha un peso: lanciata continua a girare e rallenta piano, e l'ago la segue sul suo filo con un attimo di ritardo. Ogni stazione tira la manopola come una calamita, ma solo da vicino: se passa piano viene presa e si ferma lì con una piccola oscillazione, se passa veloce tira dritto e rallenta solo un poco; lontano dalle stazioni la manopola resta dove la si lascia. Fra una stazione e l'altra lo schermo è pieno di neve, con una striscia chiara che scende e qualche riga strappata; la scala ha una luce grigia e fredda e sotto la frequenza c'è scritto No station. Avvicinandosi a una stazione la neve si dirada, la luce della scala si scalda fino all'ambra, il genere sulla scala diventa rosso, le barre si riempiono e il nome sullo schermo si compone: ogni lettera arriva in un momento suo, e poco prima di arrivare sfarfalla fra lettere a caso. Col mouse sopra la manopola si alza un poco e la sua ombra si allunga; premuta si abbassa. Toccando un genere sulla scala la radio va a quella stazione, toccando la scala altrove va a quella frequenza. Con le frecce si passa alla stazione dopo o prima, con Inizio e Fine alla prima e all'ultima; la rotella dà una spinta alla manopola.
Come funziona
Una manopola con un peso
La manopola ha un angolo e una velocità, e la frequenza è l'angolo diviso TURN gradi per MHz: cinque giri da 87.5 a 108. Il conto si fa sul ticker di GSAP in passi di 2 millesimi, col fotogramma limitato a 1/30 di secondo: FRICTION toglie velocità in proporzione alla velocità, così lanciata la manopola rallenta piano, e ai due capi della banda due molle rigide la fermano cedendo di un grado. La mano non mette l'angolo: lo tira con una molla e smorza la differenza di velocità, così lasciandola la manopola tiene la velocità della mano e continua a girare.
Le stazioni come calamite
Ogni stazione aggiunge una forza −PULL·d·e^(−(d/W)²), dove d è la distanza in gradi e W è REACH in gradi: tira verso la stazione con una molla che si sente solo da vicino e sparisce in fretta. Dentro la stessa campana c'è uno smorzamento, così una manopola presa si ferma con una piccola oscillazione. Se arriva lenta non ha l'energia per uscire dalla buca e viene presa; se arriva veloce passa oltre, solo un po' frenata. Mentre la mano gira piano, vicino a una stazione la manopola resta indietro di qualche grado e poi scatta via: si sente la presa.
L'attrito di primo distacco
La coda della campana non arriva mai a zero: senza altro, una manopola lasciata a mezzo MHz da una stazione ci scivolerebbe dentro piano in due secondi. Allora una manopola quasi ferma, con una forza più debole di STICK (circa un decimo della forza massima), si ferma del tutto: lontano dalle stazioni resta dove la si lascia. Ferma, il conto non si fa più e nulla si ridisegna finché la mano non torna.
Il segnale, la luce e la neve
Il segnale è e^(−(d/CLEAR)²) con d la distanza in MHz dalla stazione più vicina, e lo schermo lo legge con 7 centesimi di ritardo, così una stazione passata di corsa appena sfarfalla. La luce della scala lo segue come una lampadina, svelta a scaldarsi e più lenta a raffreddarsi, e mescola il colore del foglio da --sheet-cold a --sheet-warm, con due lampadine dietro in basso (gradienti radiali sommati con lighter) e i bordi più scuri. Lo schermo è un canvas: la neve si calcola a ogni fotogramma in un ImageData di 115 per 62 punti, ogni punto un grigio a caso al quadrato, una striscia chiara che scende e righe strappate quando la stazione è a metà; si stende senza smussare, coperta dalle righe di scansione, con opacità (1 − segnale)^1.3 · SNOW.
Il nome che si compone
Il nome è fatto di span, uno per lettera, e ogni lettera ha la sua soglia, da 0.5 a 0.92, in un ordine mescolato. Sotto la soglia di poco la lettera mostra a ogni fotogramma un carattere a caso, semitrasparente; oltre, la lettera vera. Così, girando verso la stazione, il nome si compone in disordine, e tornando indietro si scompone. Il bagliore del testo cresce col segnale.
La manopola disegnata con la luce ferma
La manopola è un canvas ridisegnato solo quando si muove. Le 72 scanalature del bordo hanno ognuna una faccia chiara e una scura, e la loro luce dipende dall'angolo sullo schermo rispetto alla luce, in alto a sinistra: girando, le scanalature passano sotto un riflesso che resta fermo. Il cappello tornito è un gradiente conico con due strisce lungo la direzione della luce, che non girano, mentre i segni della tornitura sopra girano; la striscia in alto prende il colore caldo della scala. La fossetta è una conca: la parete lontana dalla luce è chiara e quella vicina in ombra, calcolate a ogni posizione.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
STATIONS | script.js | [[88.9, 'Harbor Jazz', 'Jazz', 'Lisbon'], …] | Le stazioni sulla scala: frequenza in MHz (fra 87.5 e 108), nome, genere (scritto sulla scala) e città. |
START | script.js | 100.4 | La frequenza su cui la radio è sintonizzata quando si apre la pagina, in MHz. |
TURN | script.js | 90 | Di quanti gradi gira la manopola per un MHz: più è alto, più giri servono per attraversare la banda. |
PULL | script.js | 360 | Con quanta forza una stazione vicina tira dentro la manopola (0 = nessuna calamita). |
REACH | script.js | 0.3 | Da quanto lontano si sente la calamita di una stazione, in MHz. |
FRICTION | script.js | 1.9 | Quanto in fretta rallenta la manopola lanciata. |
CLEAR | script.js | 0.2 | Quanto vicino a una stazione il rumore si pulisce e la luce si scalda, in MHz. |
SNOW | script.js | 1 | Quanto è forte la neve fra una stazione e l'altra. |
Quando usarla
Per un'app di radio in streaming o di podcast, il lettore di una stazione, il sito di un festival o di un'etichetta con le sue playlist, e in generale per scegliere fra pochi canali lungo una scala continua, quando girare e cercare fa parte del piacere.
Sul telefono
La radio è larga 360 pixel (meno su uno schermo più stretto) e la manopola 140. Col dito si gira in tondo e si lancia senza far scorrere la pagina: touch-action none sta solo sulla manopola. Al posto dell'hover si tocca un genere sulla scala, o la scala stessa, e la radio ci va.
Con il movimento ridotto
Niente inerzia né calamite: la manopola segue la mano e, lasciata, la radio va alla stazione più vicina; le frecce saltano di stazione in stazione. La neve non si muove, è un fotogramma fermo che sbiadisce col segnale, e la stazione nuova arriva sullo schermo con una dissolvenza; niente entrata.
Trappole
- La campana della calamita non arriva mai a zero e l'attrito agiva solo sulla velocità: una manopola lasciata a 0.65 MHz da una stazione ci scivolava dentro piano in due secondi. Serve un attrito di primo distacco: quasi ferma e con una forza piccola, la manopola si ferma.
- L'entrata partiva da START − 3.3 MHz, cioè esattamente da un'altra stazione (97.1): la radio si apriva già agganciata e la mano doveva strapparla via. Ora parte da un punto fra due stazioni.
- Con l'ago lungo tutta la scala, fermo su una stazione tagliava a metà il suo nome e le cifre vicine: le cifre sono andate in alto, i nomi in basso, e l'ago corre solo nella fascia in mezzo.
- Un solo gradiente per scurire i bordi del foglio, con una fermata al 12%, lasciava sulla luce fredda due bande verticali ben visibili: ora è una curva di diciassette fermate.
- atan2 salta da 180 a −180, e vicino al centro l'angolo è solo rumore: si somma la differenza fra due letture ridotta fra −180 e 180, e a meno di 10 pixel dal centro si legge senza usarla.
- Uno span con dentro solo uno spazio, in inline-block, non ha larghezza: le lettere del nome hanno white-space pre, sennò Neon Avenue diventava NeonAvenue.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 14 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 8 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.
