La manopola del peso

Manopole, Fisica, TestoGSAPImpegnativaPeso compresso: Demo 10 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal: la manopola del peso del carattere nel pannello di un'app di grafica, un cerchio di tacche sottili e un indice vermiglio. Girandola, la parola sopra cambia peso dal vivo da 100 a 900 e il numero accanto, in cifre tabellari, non balla mai; a ogni centinaio la manopola si ferma un attimo e scatta, e lanciata continua per inerzia fino a posarsi su una tacca. Le tacche sono spesse quanto le aste del carattere a quel peso, misurate sul carattere stesso.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The weight knob</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/opsz.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter-tight@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the weight knob of a design app's type panel: a ring of hairline ticks and an index. Turned round, flung, with
         the wheel or with the keys, it sets the weight of the word above it live from 100 to 900, and clicks at every
         hundred. The ticks of the ring are as thick as the font's own stems at their weight. The knob is drawn by the
         script -->
    <section class="weight" aria-label="Font weight" data-weight data-autoclic>
      <div class="specimen" aria-hidden="true" data-specimen>
        <span class="guide" data-guide="x"></span>
        <span class="guide" data-guide="base"></span>
        <p class="specimen__line" data-line><span class="specimen__word" data-word>Handgloves</span><span class="specimen__probe" data-probe></span></p>
      </div>

      <div class="control">
        <div class="knob" role="slider" tabindex="0" aria-labelledby="weight-label" aria-valuemin="100" aria-valuemax="900" aria-valuenow="400" aria-valuetext="400, Regular" data-knob>
          <svg class="knob__svg" viewBox="-100 -100 200 200" aria-hidden="true" data-svg></svg>
        </div>
        <div class="read" aria-hidden="true">
          <p class="read__label" id="weight-label">Weight</p>
          <p class="read__value" data-value>400</p>
          <p class="read__name"><span class="read__roll" data-name>Regular</span></p>
        </div>
      </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.

21 valori da cambiare

Apri il Playground

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 peso» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero la parola Handgloves, la parola di prova dei disegnatori di caratteri, in Fraunces, appoggiata su due linee sottilissime, la linea di base e l'altezza della x. Sotto, una manopola: un cerchio di tacche su trecento gradi, una ogni 25 unità di peso e una più lunga e chiara a ogni centinaio, e dentro un disco scuro col filo del bordo e un indice vermiglio. Le tacche non sono tutte uguali: a sinistra, verso il 100, sono capelli; a destra, verso il 900, barrette piene, perché ognuna è spessa quanto l'asta della lettera l a quel peso. Accanto, Weight, il numero grande in cifre tabellari e il nome del peso (Thin, Light, Regular, Bold, Black…). Si gira trascinando in tondo col mouse o col dito: la parola prende peso dal vivo, il numero cambia senza ballare, l'indice si fa più spesso con la parola. A ogni centinaio la manopola viene tirata dentro la tacca e la tiene un attimo, poi la mano la strappa: lo scatto. La tacca raggiunta si allunga con un piccolo rimbalzo e si accende di vermiglio, l'indice dà un colpetto, il nome del peso si accende. Lanciata, la manopola continua da sola, rallenta e si posa su un centinaio, un pixel oltre e indietro; lasciata piano si posa sulla tacca più vicina. Oltre il 100 e il 900 cede appena, come contro un fermo. Anche con la rotella, le frecce, Pagina su e giù, Home e Fine; il doppio clic la riporta a Regular.

Come funziona

Le aste misurate sul carattere

Appena Fraunces è arrivato, lo script disegna la lettera l a 200 pixel su una tela nascosta, a ogni centinaio da 100 a 900, e legge una riga di pixel a metà dell'asta: sommando la copertura di ogni pixel, anche quelli coperti a metà, trova lo spessore dell'asta in em. Da quelle nove misure, interpolate in linea, nasce lo spessore di ogni tacca della scala e quello dell'indice, che cambia dal vivo col peso. Se il carattere non disegna (le misure non crescono col peso) resta una stima.

La mano su una molla, i centinaia come pozzi

Sotto il dito si misura l'angolo con atan2 attorno al centro e si somma la differenza ridotta fra −180 e 180; ogni grado vale 800 / SWEEP unità di peso. La manopola non segue la mano direttamente: è tirata da una molla rigida, smorzata sulla velocità della mano, e ogni centinaio è un pozzo largo 16 unità con una forza −DETENT · s · (1 − (s/16)²)². Arrivando la manopola viene risucchiata, il numero si ferma sul 500, e riparte solo quando la mano è abbastanza avanti: lo scatto vero, senza nessuna animazione scritta a mano. Il calcolo va a passi di 2 millesimi sul ticker di GSAP, col passo limitato a 1/30 di secondo.

Il lancio che sa dove si ferma

Lasciata più veloce di 250 unità al secondo, si calcola subito dove l'attrito FRICTION la fermerebbe (v + w / FRICTION) e il centinaio più vicino diventa il traguardo. La corsa è un'esponenziale v(t) = T + (v₀ − T)·e^(−kt) con k = w / (T − v₀): parte esattamente alla velocità della mano e finisce esattamente sulla tacca. Negli ultimi 12 unità la prende una molla un po' elastica (SETTLE), che la porta un pixel oltre e indietro. Lasciata piano, la molla la posa sulla tacca più vicina, ogni STEP unità.

Lo scatto si vede

A ogni fotogramma si guarda quali centinaia la manopola ha attraversato fra la posizione di prima e quella di adesso (anche cinque in un fotogramma durante un lancio), e ognuno scatta una volta sola finché la manopola non se ne allontana di 8 unità. Lo scatto allunga la tacca di 6 unità e la lascia tornare con elastic.out, la accende di vermiglio e la fa sfumare, e dà un colpetto all'indice. Il nome del peso è quello più vicino, con un margine di 4 unità oltre la metà (così sul 650 non trema), rotola nel verso della rotazione ed è chiaro solo quando la manopola sta proprio sul centinaio.

La parola, le guide e l'anteprima

La parola prende font-weight col decimale a ogni fotogramma, e la sua dimensione è scelta perché ci stia anche a 900, misurandola a 900 e riportandola; la linea di base si legge dal fondo di una scatola vuota allineata alla base, l'altezza della x da measureText sulla tela. Tutto si ricalcola al resize. Un clic da script (l'anteprima della libreria) fa partire un giro intero in una timeline GSAP: un giro lento oltre il 500 e il 600, un lancio fino a Black, una lunga rotazione fino a Light, e il ritorno a Regular.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORD`	script.js	`'Handgloves'`	La parola scritta nel peso che si sceglie (al massimo 18 lettere).
`START`	script.js	`400`	Il peso all'apertura della pagina, da 100 a 900.
`STEP`	script.js	`25`	Ogni quante unità di peso c'è una tacca su cui la manopola lasciata si posa.
`SWEEP`	script.js	`300`	Di quanti gradi gira la manopola da 100 a 900.
`DETENT`	script.js	`3000`	Quanto forte ogni centinaio trattiene la manopola mentre la si gira oltre: a 0 niente scatti.
`FRICTION`	script.js	`4.5`	Quanto presto rallenta una manopola lanciata: più basso, più lontano arriva.
`SETTLE`	script.js	`[700, 0.55]`	La molla che posa la manopola sulla sua tacca: quanto è rigida e quanto è frenata (sotto 0,5 oltrepassa di più).

Provali nel Playground

Quando usarla

Per il pannello dei caratteri di un'app di grafica, il sito di una fonderia di caratteri che fa provare i suoi caratteri variabili, un configuratore, l'editor di un sito o di una newsletter, e in generale per ogni valore da 100 a 900 con dei punti fermi: si cambiano WORD, i nomi e i limiti, e diventa la manopola di qualunque asse.

Sul telefono

Sotto i 560 pixel la manopola è larga 150 e la parola si rimpicciolisce da sola perché ci stia anche a 900 (circa 50 pixel a 390). Il dito la gira senza far scorrere la pagina (touch-action none sulla manopola), con gli stessi scatti e lo stesso lancio; il tocco al posto dell'hover è la pressione, che stringe appena il disco e ne schiarisce il bordo.

Con il movimento ridotto

Niente molle né lanci: la manopola segue il dito senza scatti e lasciata va subito sulla tacca, i tasti e la rotella la portano direttamente al valore, il nome cambia senza rotolare e la tacca del centinaio si accende e sfuma senza allungarsi. L'entrata è una dissolvenza, già a Regular.

Trappole

Con una forza a seno su tutta la scala (come nelle manopole a tacche) la manopola non può stare fra due centinaia: i pozzi sono locali, larghi 16 unità, e fuori la manopola è libera e si posa ogni STEP.
La mano finta (Home, Fine, il doppio clic) prendeva la manopola come se fosse l'anteprima e la regione letta ad alta voce non diceva più il peso: la mano finta porta con sé chi l'ha chiesta, e solo i gesti veri vengono annunciati.
Durante un lancio la manopola passa anche cinque centinaia in un fotogramma: lo scatto si cerca fra la posizione di prima e quella di adesso, mai controllando solo se è vicina a un centinaio.
Fermandosi su 650, esattamente a metà fra Semi Bold e Bold, il nome tremava fra i due a ogni mezzo decimo della molla: ci vogliono 4 unità di margine oltre la metà prima di cambiarlo.
La parola si allarga col peso: la sua dimensione si misura a 900, non al peso del momento, sennò a Black esce dai bordi del telefono.
L'anteprima del sito clicca la manopola quando l'entrata non è ancora finita: il clic viene messo da parte e il giro parte appena l'entrata si ferma.

Librerie

GSAP 3.15.0, Fraunces (font variabile, coi pesi da 100 a 900 e la dimensione ottica) 5.3.0, Inter Tight (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 10 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 16 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.