Il menu a ghiera

Menu, Fisica, TransizioniGSAP, Solo CSSImpegnativaPeso compresso: Demo 9,3 KBGSAP 28 KBGratisScarica lo zip

Le voci di un sito incise intorno alla ghiera nera di una macchina fotografica: si gira con la mano, si lancia e continua da sola, rallenta e scatta su una tacca con una molla, mentre una lente sopra l'anello ingrandisce la voce scelta. Funziona anche con le frecce e con la rotellina.

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 rotary dial menu</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 menu: a dial to turn like the dial of a camera. The sections are engraved round its ring; it is thrown
         with inertia, clicks into its notches on a spring, and a magnifying window shows the section at the top -->
    <nav class="dial" aria-label="Sections" data-dial data-autoclic>
      <span class="dial__well" aria-hidden="true"></span>
      <div class="dial__body" data-body>
        <svg class="dial__knurl" viewBox="-180 -180 360 360" aria-hidden="true" data-knurl></svg>
        <span class="dial__rimlight" aria-hidden="true"></span>
        <span class="dial__chamfer" aria-hidden="true"></span>
        <span class="dial__face" aria-hidden="true"></span>
        <div class="dial__turn" data-turn>
          <svg class="dial__ticks" viewBox="-180 -180 360 360" aria-hidden="true" data-ticks></svg>
          <ul class="dial__items">
            <li><a class="dial__item" href="#develop" data-item>Develop</a></li>
            <li><a class="dial__item" href="#scan" data-item>Scan</a></li>
            <li><a class="dial__item" href="#print" data-item>Print</a></li>
            <li><a class="dial__item" href="#film" data-item>Film</a></li>
            <li><a class="dial__item" href="#repair" data-item>Repair</a></li>
            <li><a class="dial__item" href="#journal" data-item>Journal</a></li>
            <li><a class="dial__item" href="#studio" data-item>Studio</a></li>
            <li><a class="dial__item" href="#visit" data-item>Visit</a></li>
          </ul>
        </div>
        <!-- the silver middle, with an aperture engraved in it: it stops down while the dial spins -->
        <div class="dial__hub" aria-hidden="true">
          <svg class="dial__iris" viewBox="-50 -50 100 100" data-iris></svg>
        </div>
      </div>
      <!-- the window: a lens over the ring at the top, with a magnified copy of the dial inside -->
      <div class="dial__lens" aria-hidden="true" data-lens>
        <div class="dial__zoom" data-zoom></div>
        <span class="dial__glass"></span>
      </div>
      <span class="dial__pawl" aria-hidden="true" data-pawl></span>
    </nav>
    <p class="sr" aria-live="polite" data-live></p>
  </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 «Il menu a ghiera» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero una ghiera di metallo come quella di una macchina fotografica: il bordo zigrinato, una smussatura lucida, l'anello nero con le tacche e otto voci incise in maiuscolo (Develop, Scan, Print, Film, Repair, Journal, Studio, Visit), e in mezzo un disco d'argento tornito con un diaframma inciso. In cima, sopra l'anello, una lente a pillola ingrandisce la voce che sta sotto la tacca rossa, e quella voce è accesa di bianco mentre le altre restano più tenui. Prendendo l'anello e girandolo, la ghiera segue la mano trattenendosi un poco su ogni tacca; lasciandola andare con slancio continua a girare, rallenta e scatta sull'ultima tacca con un piccolo rimbalzo, mentre la tacca rossa sobbalza a ogni scatto e il diaframma inciso al centro si chiude finché la ghiera corre e si riapre quando si ferma. Toccando una voce la ghiera gira fino a lei per la via più corta; la rotellina e le frecce la fanno scattare di una tacca alla volta, e col tasto Tab la lente prende un bordo rosso.

Come funziona

La ghiera disegnata

Il bordo zigrinato è un SVG di 96 denti, l'anello ha 40 tacche, e le voci sono link messi ognuno al suo angolo con rotate(a) translateY(-130 unità). Tutte le misure stanno in unità di un disegno largo 360, una variabile CSS, così la ghiera resta uguale a ogni misura. Girano solo le parti incise e il bordo: la luce sul metallo (gradienti conici sulla smussatura, sull'anello e sul disco tornito) resta ferma, come in una ghiera vera.

La fisica delle tacche

L'angolo della ghiera è un numero mosso a ogni fotogramma, in quattro piccoli passi. Lanciata, la ghiera sente un attrito (FRICTION) e la spinta della tacca più vicina, -K·s·sin(θ/s) con s = passo/2π: una buca per ogni tacca. Finché gira veloce domina l'attrito, da lenta lo smorzamento delle tacche (DETENT), e così rallenta e cade nella tacca giusta con un rimbalzo.

La mano che si trattiene

Girata a mano, la ghiera non segue esattamente il dito: l'angolo mostrato è x − STICKY·s·sin(x/s) dell'angolo della mano, quindi vicino a una tacca resta un po' indietro e fra due tacche recupera. Al rilascio la velocità è quella dell'ultimo decimo di secondo, e se la mano si era fermata prima di lasciare non c'è slancio.

La lente e il diaframma

La finestra è una copia della ghiera (clonata, senza link né focus) dentro una pillola con overflow nascosto, ingrandita ZOOM volte intorno al punto della tacca; ruota con lo stesso angolo. Sopra c'è il vetro: una luce curva in alto, i bordi più scuri e il filo rosso dell'indice. Al centro il disco d'argento ha inciso un diaframma a sei lamelle, ridisegnato in SVG: la sua apertura segue la velocità della ghiera, chiusa a un terzo quando corre forte e tutta aperta da ferma.

Tasti e rotellina

Le frecce, la rotellina (uno scatto a clic, o WHEEL pixel di trackpad) e un tocco su una voce usano una molla verso una tacca scelta, che si somma se si preme ancora prima dell'arrivo. Il focus va con la voce, e quando la ghiera si ferma la voce scelta viene letta ai lettori di schermo, una volta sola e non a ogni voce che passa. Un clic da script sulla ghiera la lancia di un numero di tacche calcolato cercando la velocità giusta.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`FRICTION`	script.js	`1.6`	Quanto in fretta rallenta la ghiera lanciata: la parte di velocità che perde ogni secondo.
`DETENT`	script.js	`[420, 0.55]`	Le tacche: quanto forte una tacca tira dentro la ghiera, e quanto è smorzato lo scatto (1 = nessun rimbalzo).
`STICKY`	script.js	`0.5`	Quanto la ghiera si trattiene su una tacca mentre la mano la gira, da 0 a 0,9.
`ZOOM`	script.js	`1.8`	Quanto ingrandisce la lente sopra l'anello.
`WHEEL`	script.js	`70`	I pixel di scorrimento del trackpad che girano la ghiera di una tacca (uno scatto della rotellina è una tacca).

Provali nel Playground

Quando usarla

Per il menu di un sito che vuole un carattere fisico: un negozio di macchine fotografiche o di orologi, un laboratorio, un'azienda di strumenti audio, un portfolio. Da cinque a dodici voci brevi; con meno la ghiera è vuota, con di più le parole non ci stanno sull'anello.

Sul telefono

Sotto i 760 pixel la ghiera è larga 340 pixel, o lo schermo meno 48. Si gira col dito come col mouse (touch-action: none sulla ghiera, così il dito non fa scorrere la pagina), e un tocco su una voce la porta in cima. Le parti che girano hanno un loro strato sulla scheda grafica, perché sul telefono ridisegnarle a ogni fotogramma era troppo.

Con il movimento ridotto

La ghiera non scivola e non rimbalza: segue la mano esattamente e, lasciata, si posa subito sulla tacca più vicina; le frecce, la rotellina e i tocchi la mettono al suo posto senza viaggio. Il diaframma al centro resta aperto e la tacca rossa resta ferma.

Trappole

Una molla sola verso la tacca più vicina, decisa al rilascio, si sente finta: la ghiera si ferma dove la molla vuole. Con un campo di tacche (un seno) la ghiera rallenta per l'attrito e cade da sola nella buca in cui si trova, e se è ancora veloce la scavalca come una ghiera vera.
Le tacche sono rigide: con un passo di un fotogramma intero la ghiera vibrava. Quattro piccoli passi per fotogramma, con il passo limitato a 1/30 di secondo, la tengono ferma.
Una rotellina vera manda 100 pixel a scatto, un trackpad tanti passi piccoli: sommando tutto, tre scatti facevano quattro tacche. Uno scatto grande è una tacca, i passi piccoli si sommano WHEEL alla volta.
Nella lente la ghiera è una copia: va tolta dal giro del tasto Tab (inert, link senza indirizzo) o i lettori di schermo leggerebbero le voci due volte.
Al telefono la ghiera girava a scatti: ogni fotogramma ridisegnava il testo inciso e le ombre. Con will-change sulle parti che girano diventa una sola immagine ruotata dalla scheda grafica.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Collaudo

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