Il campo col disco combinatore

Moduli, Fisica, SVGGSAPImpegnativaPeso compresso: Demo 15 KBGSAP 28 KBGratisScarica lo zip

Le sei caselle di un codice di accesso e sotto un disco combinatore da telefono anni Sessanta: si infila un dito in un foro e si gira fino al fermo cromato, poi il disco torna da solo alla velocità costante del regolatore, riempiendo una tacca per ogni impulso, e solo allora la cifra cade nella sua casella. Le cifre scritte con la tastiera si compongono da sole; con sei cifre il codice viene controllato e il cartellino al centro dice Verified.

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 code field</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 rotary dial code field: the six boxes of a sign-in code, and under them a 1960s telephone dial in sage
         enamel. A finger in a hole turns the clear wheel clockwise to the chrome stop; let go, it runs back on its own
         at the governor's steady speed, one tick filling by the stop for every pulse, and the digit drops into the
         next box. Typed digits dial themselves; six digits are checked and the centre card says Verified -->
    <section class="rd" aria-label="Verification code" data-rd>
      <!-- the boxes only show the code; the field a screen reader and the keys use is the input inside the dial -->
      <div class="rd__boxes" aria-hidden="true" data-boxes></div>

      <div class="rd__dial" data-dial>
        <!-- three layers: the still base and number card, the finger wheel (the only part redrawn as it turns), and on
             top the finger stop, the pulse ticks and the centre card -->
        <svg class="rd__art" viewBox="0 0 400 400" aria-hidden="true" data-art="base"></svg>
        <svg class="rd__art rd__art--wheel" viewBox="0 0 400 400" aria-hidden="true" data-art="wheel"></svg>
        <svg class="rd__art rd__art--top" viewBox="0 0 400 400" aria-hidden="true" data-art="top"></svg>
        <label class="sr" for="rd-code" data-label>Verification code, 6 digits</label>
        <input class="rd__input sr" id="rd-code" type="text" inputmode="numeric" autocomplete="one-time-code"
               spellcheck="false" aria-describedby="rd-hint" data-input>
      </div>
      <p class="sr" id="rd-hint">Rotary dial. Type the digits and the dial turns them for you, or put a finger in a hole
        and turn it clockwise to the metal stop. Backspace removes the last digit.</p>

      <div class="rd__actions">
        <button class="rd__quiet rd__quiet--sms" type="button" data-sms data-autoclic>
          <svg class="rd__icon" viewBox="0 0 20 20" aria-hidden="true" data-icon><path d="M4.5 3.5h11a2 2 0 0 1 2 2v6.5a2 2 0 0 1-2 2H9.2l-3.6 2.8V14H4.5a2 2 0 0 1-2-2V5.5a2 2 0 0 1 2-2z"/><path d="M6.4 7.4h7.2M6.4 10.2h4.6"/></svg>
          <span>Use code from SMS</span>
        </button>
        <button class="rd__quiet rd__quiet--clear" type="button" aria-disabled="true" data-clear>
          <svg class="rd__icon" viewBox="0 0 20 20" aria-hidden="true" data-icon><path d="M5.2 7.4a5.6 5.6 0 1 1-.8 4.8"/><path d="M4.6 3.6v4.2h4.2"/></svg>
          <span>Clear</span>
        </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.

40 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 campo col disco combinatore» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco, sei caselle grigie chiare divise in due gruppi da tre, e sotto un disco combinatore da telefono: una base smaltata color salvia con il suo incavo, un cartoncino crema con i numeri da 1 a 9 e lo 0 (sopra, in piccolo, le lettere ABC, DEF fino a OPER), una ruota di plastica trasparente appena verde con dieci fori smussati, un fermo cromato avvitato sul bordo verso le quattro e mezza e al centro un cartellino crema in un anello cromato con scritto DIAL. Passando sopra un foro col mouse compare un anello sottile e la manina per afferrare. Si infila il dito (o il puntatore) in un foro e si trascina in senso orario: la ruota gira insieme al dito, mai all’indietro oltre il riposo e mai oltre il fermo; quando il foro batte sul fermo la ruota rimbalza appena e il fermo si piega un poco, e sul telefono vibra. Lasciata lì, la ruota torna indietro da sola sempre alla stessa velocità, come quella di un telefono vero; accanto al fermo si riempie una tacca color ambra per ogni impulso (il 7 ne manda sette, lo 0 dieci), la ruota si assesta a casa con un piccolo rimbalzo e la cifra cade dall’alto nella casella successiva. Lasciata prima del fermo, la ruota torna e non succede niente. Con il disco attivo da tastiera (un anello verde scuro gli gira intorno) le cifre scritte si compongono da sole una dopo l’altra, un poco più in fretta di una mano, e Backspace solleva l’ultima cifra dalla sua casella. Use code from SMS compone da solo il codice 481 592. Con la sesta cifra le cifre ondeggiano mentre al centro un arco rosso gira intorno alla scritta Checking; poi le caselle diventano verdi e nel cartellino si disegna una spunta su un tondo verde sopra VERIFIED. Dopo qualche secondo il codice si cancella da solo; Clear lo cancella subito.

Come funziona

Il disco in tre strati

Il disegno è SVG in tre strati sovrapposti: sotto la base, l’incavo e il cartoncino dei numeri, disegnati una volta; in mezzo la ruota, l’unica che si ridisegna; sopra il fermo, le tacche e il cartellino. La ruota è un percorso solo con fill-rule evenodd (il cerchio esterno, quello interno e i dieci fori), riscritto a ogni fotogramma dall’angolo; lo smusso e l’ombra di ogni foro sono un gruppo che si sposta senza girare, così la luce resta in alto a sinistra mentre la ruota gira.

Il dito nel foro

Al pointerdown si cerca il foro sotto il puntatore e si cattura il puntatore. A ogni movimento si misura l’angolo intorno al centro con atan2 e si somma la differenza dall’ultimo, riportata fra -180 e 180, così il passaggio dalle sei non fa salti; vicino al centro l’angolo non si legge. L’angolo della ruota è quella somma, stretta fra 0 e il fermo del foro: (n + 1) × 30 gradi per la cifra n, 330 per lo 0. Arrivando al fermo un colpo: la ruota torna indietro di 1,8 gradi e il fermo ruota di un grado intorno alla sua vite.

Il regolatore e gli impulsi

Lasciata al fermo, la ruota torna su gsap.ticker a velocità costante (GOVERNOR gradi al secondo, passo limitato a 1/30 s), senza curve. Come in un disco vero manda un impulso ogni 30 gradi dopo i primi 15, e gli ultimi 45 sono la pausa fra due cifre: a ogni impulso si riempie la tacca successiva. A casa un rimbalzo di 1,3 e poi 0,35 gradi, sommato all’angolo, e la cifra entra nella casella con back.out. Quando niente si muove non si ridisegna.

Le cifre scritte e il dito automatico

Il campo vero è un input nascosto dentro il disco, con inputmode numeric e autocomplete one-time-code: le cifre premute, incollate o proposte dal telefono vanno in una coda, e un dito automatico le compone. Un valore finger va con sine.inOut un poco oltre il fermo, e la ruota lo segue fino al fermo, così ci arriva ancora in movimento e il colpo si sente. Il ritorno usa AUTO_GOVERNOR, e la cifra dopo parte mentre la ruota si assesta ancora, perché il rimbalzo è sommato a parte.

Il controllo e la verifica

Con l’ultima cifra il disco si ferma, un arco rosso gira intorno al cartellino e le cifre fanno un’onda di opacità; dopo CHECKING secondi le caselle diventano verdi, il cartellino passa a VERIFIED con una spunta che si disegna con stroke-dashoffset e dopo RESET secondi le cifre si sollevano e il campo si svuota. Una regione aria-live dice ogni passo, per esempio «3 dialled, 4 of 6».

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LENGTH`	script.js	`6`	Quante cifre ha il codice.
`SAMPLE`	script.js	`'481592'`	Il codice che compone il pulsante Use code from SMS.
`GOVERNOR`	script.js	`330`	La velocità con cui la ruota torna a casa dopo una mano, in gradi al secondo (un disco vero fa circa 300).
`AUTO_GOVERNOR`	script.js	`720`	La velocità del ritorno quando il disco gira da solo, per le cifre scritte e il codice dall’SMS.
`FINGER`	script.js	`1000`	La velocità del dito automatico che porta la ruota al fermo, in gradi al secondo.
`HOLD`	script.js	`0.06`	Quanti secondi il dito automatico resta contro il fermo.
`CHECKING`	script.js	`0.8`	Quanti secondi dura il controllo del codice.
`RESET`	script.js	`3.8`	Quanti secondi resta verificato prima di cancellarsi da solo.
`WORD`	script.js	`'DIAL'`	La parola stampata sul cartellino al centro (una lunga diventa più piccola).

Provali nel Playground

Quando usarla

Nel passo del codice di un accesso in due passaggi, nella conferma di un numero di telefono o nel codice di un invito, in un sito che ha un’anima d’epoca: una radio, un bar o un albergo anni Sessanta, un negozio di modernariato, un museo, un servizio di telefonia. Resta un campo vero: la tastiera, l’incolla e il codice proposto dal telefono funzionano, e il disco li compone da solo.

Sul telefono

Su un telefono di 390 pixel il disco è largo quanto lo schermo meno i margini (358 pixel), i fori restano grandi come un polpastrello e si girano col dito; sotto il disco il dito non fa scorrere la pagina (touch-action none), il resto sì. Toccare il disco non apre la tastiera, che coprirebbe il disco; il campo nascosto ha un carattere di 16 pixel, così con una tastiera esterna o lo screen reader la pagina non si ingrandisce. Dove esiste, il colpo al fermo fa vibrare il telefono.

Con il movimento ridotto

Il disco si gira ancora col dito, ma non corre indietro: lasciato al fermo svanisce un attimo ed è già a casa, le tacche si riempiono tutte insieme e la cifra compare in dissolvenza. Le cifre scritte e il codice dall’SMS non girano il disco: il foro si accende e la cifra compare nella sua casella. Niente rimbalzi, niente entrata, e durante il controllo l’arco non gira.

Trappole

Con la ruota trasparente sopra il cartoncino crema, fori e plastica avevano lo stesso colore e i fori sembravano bottoni in rilievo. La plastica ora ha una tinta verde menta leggera e ogni foro una mezzaluna d’ombra in alto a sinistra, sul cartoncino: si leggono come buchi.
Girando i gruppi dei fori insieme alla ruota, i riflessi degli smussi giravano anche loro e la luce sembrava muoversi. Ora il percorso della ruota si riscrive a ogni fotogramma e i gruppi dei fori si spostano soltanto: la luce resta ferma in alto a sinistra.
atan2 salta da 180 a -180 gradi alle sei: sommando gli angoli la ruota faceva un giro di colpo. Si somma la differenza fra due letture, riportata fra -180 e 180, e vicino al centro il puntatore non conta.
Al regolatore vero (330 gradi al secondo) il codice dall’SMS arrivava a Verified dopo 9,8 secondi, e il video dell’anteprima ne registra 6,4. Il disco automatico ha il suo regolatore, più veloce ma sempre costante, e la cifra dopo parte mentre la ruota si assesta ancora: Verified arriva a 5 secondi, e una mano resta alla velocità vera.
L’anteprima della libreria clicca Use code from SMS ogni 2,8 secondi: ogni clic ricominciava il codice a metà. Ora il pulsante riposa (aria-disabled) mentre compone, controlla e mostra il codice verificato.
Col mouse, dopo un clic sul disco le cifre scritte non arrivavano: il mousedown spostava il fuoco sul body. Ora il mousedown sul disco è annullato e il pointerdown del mouse dà il fuoco all’input nascosto; col dito no, se no la tastiera del telefono coprirebbe il disco.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Collaudo

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