Il campo del codice

Moduli, TransizioniGSAPMediaPeso compresso: Demo 5,6 KBGSAP 28 KBGratisScarica lo zip

Sei caselle per un codice di verifica: le cifre entrano con uno scatto e un anello col cursore scivola sulla casella dopo; se il codice è giusto le caselle si fondono in una pillola verde, se è sbagliato diventano rosse, tremano e lasciano cadere le cifre.

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 verification code field</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/space-grotesk@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the field: six boxes over one real input (so pasting, the keyboard, screen readers and codes read from a text
         message all work). The figures pop in, a ring slides to the next box; a right code melts the boxes into a
         green pill, a wrong one shakes them red and the figures fall out -->
    <div class="code" data-code>
      <label class="code__label" for="code-input">Enter the 6-digit code we sent you</label>
      <div class="code__field" data-field data-autoclic>
        <input class="code__input" id="code-input" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" spellcheck="false" aria-describedby="code-status" data-input>
        <div class="code__boxes" aria-hidden="true" data-boxes>
          <span class="code__ring" data-ring><span class="code__caret" data-caret></span></span>
        </div>
        <div class="code__done" aria-hidden="true" data-done>
          <svg viewBox="0 0 24 24"><path d="M5 12.5l4.6 4.6L19 7.6" data-tick/></svg>
          <span>Verified</span>
        </div>
      </div>
      <p class="code__status" id="code-status" role="status" aria-live="polite" data-status></p>

      <!-- for the demo: the next code is wrong, to see the other answer -->
      <label class="fail">
        <input type="checkbox" data-fail>
        <span class="fail__box" aria-hidden="true"><svg viewBox="0 0 16 16"><path d="M3.5 8.5l3 3 6-7"/></svg></span>
        <span>Make the code wrong</span>
      </label>
    </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.

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

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco la scritta Enter the 6-digit code we sent you e sei caselle grigie chiare. Toccando le caselle, un anello nero con un cursore che lampeggia si posa sulla prima; ogni cifra scritta entra nella sua casella con uno scatto che va un poco oltre, la casella si fa bianca e l’anello scivola su quella dopo; una cifra cancellata cade fuori dalla casella. Un codice incollato entra tutto insieme, come una piccola onda. Con l’ultima cifra le caselle fanno un’onda mentre sotto si legge Checking…; se il codice è giusto, le caselle scivolano verso il centro, rimpiccioliscono e si fondono in una pillola verde dove si disegna una spunta accanto a Verified. Se è sbagliato (spuntando Make the code wrong) le caselle diventano rosse e tremano, sotto compare That code is not right. Try again., e le cifre cadono una dopo l’altra partendo da destra. Nella demo la pillola verde dopo un momento torna sei caselle vuote.

Come funziona

Un campo vero, sotto

Le caselle disegnano soltanto: il campo vero è un input solo, invisibile, steso sopra di loro, con inputmode numeric e autocomplete one-time-code. Così incollare un codice, la tastiera, gli screen reader e il codice letto dai messaggi sul telefono funzionano da soli; lo script tiene solo le cifre (al massimo LENGTH) e il cursore sempre in fondo.

Cifre dentro e fuori

A ogni cambio lo script confronta le cifre vecchie con le nuove e muove solo quelle diverse: una cifra nuova entra da scala 0,3 con back.out(POP), una tolta cade di 16 pixel svanendo. L’anello è un elemento solo che va alla casella giusta con back.out; il cursore dentro lampeggia con un’animazione CSS a scatti e si nasconde quando le caselle sono piene.

Il controllo, e il codice giusto

Con l’ultima cifra il campo diventa readOnly, le caselle fanno un’onda di 7 pixel in CHECK secondi e poi arriva la risposta. Giusto: ogni casella va verso il centro (la sua x è la distanza dal centro), rimpicciolisce e svanisce, e la pillola cresce da scaleX 0,25 con back.out mentre la spunta si disegna con stroke-dashoffset.

Il codice sbagliato

Le caselle prendono la classe dell’errore e diventano rosse, tutta la fila trema con dei keyframes di x, il campo prende aria-invalid e la riga di stato lo dice; poi le cifre cadono una alla volta da destra e il campo si svuota, pronto per un altro tentativo.

L’anteprima della libreria

Un clic che arriva da uno script (detail 0) fa scrivere al campo il codice SAMPLE da solo, una cifra ogni 0,11 secondi; i clic delle persone cadono sull’input e non arrivano mai con detail 0.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LENGTH`	script.js	`6`	Quante cifre ha il codice.
`POP`	script.js	`2.4`	Quanto va oltre una cifra mentre entra nella sua casella.
`CHECK`	script.js	`0.7`	I secondi del controllo prima della risposta.
`HOLD`	script.js	`2.6`	I secondi in cui resta la pillola verde prima che la demo ricominci.
`SAMPLE`	script.js	`'482915'`	Il codice che l’anteprima della libreria scrive da sola.

Provali nel Playground

Quando usarla

Per la verifica in due passaggi, la conferma di un’e-mail o di un numero di telefono, un codice di accesso: ovunque arriva un codice di poche cifre da scrivere.

Sul telefono

Le caselle si stringono sotto i 440 pixel. Il tocco apre la tastiera dei numeri, e su iPhone il codice arrivato per messaggio viene proposto sopra la tastiera e si inserisce con un tocco; il campo ha un carattere di 16 pixel, così la pagina non si ingrandisce toccandolo.

Con il movimento ridotto

Le cifre compaiono e spariscono senza scatti, niente onda, la pillola verde compare di colpo e le caselle sbagliate non tremano.

Trappole

Sei input separati sembrano più semplici, ma rompono l’incolla, i codici dai messaggi e gli screen reader: meglio un input solo sotto e le caselle solo disegnate.
L’input invisibile ha opacity 0 ma resta grande quanto le caselle e con un carattere di 16 pixel: più piccolo, iPhone ingrandirebbe la pagina al tocco.
Mentre si controlla il codice il campo è readOnly e ogni cambio viene rimesso com’era: una cifra cancellata a metà controllo lascerebbe le caselle e il campo diversi.
La pillola verde è centrata con la proprietà translate e GSAP le cambia la scala: un translate(-50%) scritto dentro transform nel CSS verrebbe cancellato dal transform di GSAP.

Librerie

GSAP 3.15.0, Space Grotesk (font variabile) 5.3.0.

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

Collaudo

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