L’accesso della cassaforte

Moduli, Fisica, SVG, 3DGSAP, Solo CSSImpegnativaPeso compresso: Demo 17 KBGSAP 28 KBGratisScarica lo zip

L’accesso di una banca privata come una porta blindata rotonda col meccanismo sotto un vetro fumé: ogni carattere della password fa girare la manopola della combinazione, che corre, supera il suo numero, torna indietro e scatta di tacca in tacca. Con la password giusta la manopola torna a zero e muove un treno di ingranaggi planetario che ritira gli otto chiavistelli, poi la porta pesante si apre in 3D sui cardini, col suo spessore, e dentro si accende il caveau. Con quella sbagliata i chiavistelli sbattono contro il blocco e la porta trema nel telaio.

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 vault sign-in</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/hanken-grotesk@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the sign-in of a private bank as a round vault door under glass: every character of the passphrase turns the
         combination dial, the right one draws the eight bolts through a planetary gear train and swings the door
         open, a wrong one makes the door tremble on its locked bolts. The sign-in is pretended: see signIn() in
         the script -->
    <form class="vault" action="#" novalidate aria-labelledby="vault-title" data-vault data-autoclic>
      <div class="wall" aria-hidden="true">
        <span class="wall__spill" data-spill></span>
        <div class="bay" data-bay>
          <div class="inside" data-inside>
            <div class="inside__boxes" data-boxes></div>
            <span class="inside__lamp" data-lamp></span>
          </div>
          <svg class="frame" viewBox="-128 -128 256 256" data-frame></svg>
          <div class="door" data-door>
            <div class="door__face" data-face>
              <span class="plate"></span>
              <svg class="mech" viewBox="-128 -128 256 256" data-mech></svg>
              <span class="glass" data-glass></span>
              <span class="collar"></span>
              <div class="dial" data-dial>
                <svg class="dial__ring" viewBox="-40 -40 80 80" data-ring></svg>
                <span class="dial__knob"></span>
              </div>
              <svg class="index" viewBox="-6 -6 12 12"><path d="M-3.4 -3.2h6.8l-3.4 5.6z"/></svg>
            </div>
          </div>
          <svg class="hinge" viewBox="-128 -128 256 256" data-hinge></svg>
          <span class="bay__alarm" data-alarm></span>
        </div>
      </div>

      <div class="side">
        <div class="panel" data-panel>
          <div class="head">
            <h2 class="head__title" id="vault-title">Open your vault</h2>
            <p class="head__sub">Sign in to your private account.</p>
          </div>

          <div class="field" data-field="email">
            <label class="field__label" for="vault-email">Email</label>
            <div class="box" data-box>
              <input class="box__input" id="vault-email" name="email" type="email" inputmode="email" autocomplete="username" autocapitalize="off" autocorrect="off" spellcheck="false" enterkeyhint="next" placeholder="you@example.com" aria-describedby="vault-email-msg" aria-invalid="false" data-input>
            </div>
            <div class="field__msg" id="vault-email-msg" data-msg></div>
          </div>

          <div class="field" data-field="pass">
            <div class="field__top">
              <label class="field__label" for="vault-pass">Passphrase</label>
              <a class="field__link" href="#">Forgot it?</a>
            </div>
            <div class="box box--pass" data-box>
              <input class="box__input" id="vault-pass" name="passphrase" type="password" autocomplete="current-password" autocapitalize="off" autocorrect="off" spellcheck="false" enterkeyhint="go" aria-describedby="vault-pass-msg vault-pass-dial" aria-invalid="false" data-input>
              <button class="reveal" type="button" aria-controls="vault-pass" aria-pressed="false" data-reveal>Show</button>
            </div>
            <p class="sr" id="vault-pass-dial">Every character turns the dial of the vault door.</p>
            <div class="field__msg" id="vault-pass-msg" data-msg></div>
          </div>

          <button class="open" type="submit" data-open>
            <span class="open__bg" aria-hidden="true"></span>
            <svg class="open__dial" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="7.2"/><path d="M10 2.8v3.4M10 13.8v3.4M2.8 10h3.4M13.8 10h3.4"/><circle cx="10" cy="10" r="2.2"/></svg>
            <span class="open__label" data-open-label>Open vault</span>
          </button>

          <p class="hint">Demo passphrase · <span class="hint__word" data-hint></span></p>
        </div>

        <section class="welcome is-gone" aria-labelledby="vault-welcome-title" inert data-welcome>
          <p class="welcome__kicker"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="4" y="9" width="12" height="8.4" rx="2"/><path d="M7 9V6.6a3 3 0 0 1 5.8-1.1"/></svg>Vault open</p>
          <h2 class="welcome__title" id="vault-welcome-title" tabindex="-1" data-welcome-title>Welcome back.</h2>
          <dl class="welcome__facts">
            <div><dt>Signed in as</dt><dd data-out="email"></dd></div>
            <div><dt>Last visit</dt><dd>Tuesday at 9:41 pm</dd></div>
            <div><dt>Safe deposit box</dt><dd>Row F, number 214</dd></div>
          </dl>
          <button class="lock" type="button" data-lock><span class="lock__bg" aria-hidden="true"></span><span class="lock__label">Lock the vault</span></button>
        </section>
      </div>
      <p class="sr" role="status" aria-live="polite" data-live></p>
    </form>
  </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.

41 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 «L’accesso della cassaforte» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero una scheda divisa in due. A sinistra, in una parete d’acciaio spazzolato, una porta blindata rotonda nel suo telaio scuro con sette bulloni esagonali e il cardine a sinistra: il bordo d’acciaio tornito, sotto un vetro fumé un fondo granito a perlage come la platina di un orologio, la corona dentata d’acciaio con otto feritoie a spirale, tre satelliti d’ottone sulle loro viti azzurrate, otto chiavistelli lucidi che escono dal bordo ed entrano nelle sedi del telaio, e al centro la manopola nera con cento tacche, un numero ogni dieci e il pomello zigrinato, sotto un indice d’ottone. A destra Open your vault, Sign in to your private account., il campo Email, il campo Passphrase col tasto Show e il link Forgot it?, il pulsante d’ottone Open vault e sotto la password della prova. Ogni carattere scritto fa girare la manopola di un tratto suo, fra 20 e 75 numeri, una volta a destra e una a sinistra come una combinazione vera: sui giri lunghi corre a velocità costante, poi supera il numero, torna indietro e si ferma scattando di tacca in tacca; cancellando torna dov’era. Premendo Open vault con un campo vuoto o un’email incompleta, sotto il campo scende una riga rossa col triangolo. Con la password sbagliata la manopola torna a zero, il treno parte, i chiavistelli si ritirano appena e sbattono contro il blocco tornando fuori con un rimbalzo, la porta trema nel telaio, la fessura intorno si accende di rosso, la password si cancella e la manopola fa da sola un giro all’indietro. Con quella giusta la scritta del pulsante diventa Opening, la manopola torna a zero e gira di 54 gradi: i satelliti girano, la corona gira di 24 gradi e le sue feritoie tirano dentro tutti gli otto chiavistelli; un colpo secco, poi la porta, lenta a partire come una cosa pesante, si apre verso chi guarda, supera un poco il fermo e torna, mentre dentro si accende la luce calda sulle cassette di sicurezza e il calore si allarga sulla parete. A destra arriva Vault open, Welcome back, Mara. (il nome preso dall’email), l’indirizzo, l’ultima visita, la cassetta, e il pulsante Lock the vault: la porta si richiude accelerando, batte nel telaio, i chiavistelli scattano fuori e il modulo torna vuoto.

Come funziona

Un accesso vero accanto alla porta

Un form con due input veri (autocomplete username e current-password, inputmode email, testo a 16 pixel perché Safari sul telefono non ingrandisca), un tasto Show con aria-pressed che cambia il tipo del campo, aria-invalid e aria-describedby verso la riga sotto ogni campo e una regione aria-live che dice cosa succede. La porta è tutta aria-hidden: è il racconto di quello che fa il modulo. La verifica è finta in una sola funzione, signIn(), che confronta con PASSPHRASE: è quella da sostituire con la chiamata vera.

La manopola, una molla col freno

Ogni carattere vale fra 20 e 75 numeri (dal suo codice), una volta in un verso e una nell’altro: il bersaglio della manopola è la somma, quindi è una funzione del testo e cancellando torna indietro da sola. Ad ogni fotogramma del ticker di GSAP una molla con smorzamento la porta verso il bersaglio, col passo di tempo limitato a 1/30 di secondo; la forza della molla è tagliata a 60 gradi, così un giro lungo corre a velocità costante e solo l’ultimo tratto oscilla. Lo scatto da tacca a tacca è nel disegno: l’angolo mostrato è a − k·sin(2πa/3,6)·3,6/2π, che resta monotono per k minore di 1 e indugia su ognuna delle cento tacche quando la manopola rallenta. Ferma, il ciclo si toglie dal ticker.

Un treno planetario che ingrana davvero

Gli ingranaggi sono tracciati in SVG da una funzione sola (denti con fianchi e archi di testa e di piede, modulo 2,6), anche la corona a denti interni. Sole da 24 denti sotto la manopola, tre satelliti da 15 su assi fissi, corona da 54: (24 + 54) / 3 è intero, quindi i tre satelliti ingranano insieme. La fase di ogni satellite e della corona si calcola dall’angolo del sole perché i denti cadano nei vani: satellite = θ + 180 − 180/15 + (24/15)(θ − sole), corona dal primo satellite col rapporto 15/54. Girando il sole di 54 gradi la corona gira di 24 al contrario.

Le feritoie che tirano i chiavistelli

Sulla corona ci sono otto feritoie a spirale, ognuna lunga 24 gradi, col raggio che scende di 8,5 unità: il perno di ogni chiavistello sta sulla sua retta e la corona, girando, lo tira verso il centro. Lo spostamento dei chiavistelli è quindi proporzionale alla rotazione del sole, e con un back.out o un elastic.out sul treno anche i chiavistelli rimbalzano: è così che col tentativo sbagliato sbattono contro il blocco e tornano fuori.

La porta in 3D, con lo spessore

La porta è un elemento con transform-style preserve-3d dentro un vano con la prospettiva, imperniata sul cardine con transform-origin; dietro la faccia nove dischi d’acciaio spostati con translateZ fanno lo spessore, più chiari i primi come un bordo tornito, e l’ultimo è il retro. GSAP la gira con rotationY: power2.inOut per una cosa pesante, quattro gradi oltre il fermo e poi indietro. Il caveau dietro si accende con una variabile CSS --lit che GSAP anima dentro un filtro brightness, e il calore sulla parete è uno strato in mix-blend-mode screen.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`PASSPHRASE`	script.js	`goldleaf`	La password che apre la cassaforte nella prova: compare anche sotto il pulsante.
`SPIN`	script.js	`1`	Quanto fa girare la manopola ogni carattere: 1 è fra 20 e 75 numeri.
`STIFFNESS`	script.js	`170`	La molla della manopola: più alta, arriva prima al suo numero.
`DAMPING`	script.js	`13`	L’attrito della manopola: più basso, supera il numero e torna indietro di più.
`DETENT`	script.js	`0.75`	Quanto scatta la manopola di tacca in tacca quando rallenta, da 0 a 0.95.
`BOLTS`	script.js	`0.8`	I secondi che impiega il treno di ingranaggi a ritirare gli otto chiavistelli.
`SWING`	script.js	`1.4`	I secondi che impiega la porta pesante ad aprirsi.
`OPEN_ANGLE`	script.js	`74`	Di quanti gradi si apre la porta.
`SHAKE`	script.js	`5`	Di quanti pixel trema la porta con la password sbagliata.

Provali nel Playground

Quando usarla

Nell’accesso di una banca, di un conto privato, di un archivio di documenti o di un gestore di password, dove la sensazione di sicurezza fa parte del prodotto e il momento in cui si entra deve essere memorabile. La manopola che risponde a ogni carattere dice che il campo sta ascoltando senza mostrare la password; la porta che trema dice no senza un messaggio aggressivo. Per un accesso di tutti i giorni si possono tenere la manopola e il tremore e lasciare l’apertura più breve.

Sul telefono

Sotto i 760 pixel la porta va sopra il modulo, larga fino a 300 pixel (318 su un telefono di 390 meno i margini), e la scheda prende la larghezza dello schermo senza sforare. I campi sono alti 52, i pulsanti 54, il tasto Show 36: tutti comodi per un dito. Il testo è a 16 pixel, l’email apre la tastiera con la @ e il tasto Invio dice Next nell’email e Go nella password. La porta aperta resta dentro il suo vano, verso il caveau. Il riflesso del vetro segue il puntatore solo dove c’è un mouse.

Con il movimento ridotto

La manopola non gira: va subito al suo numero. Gli ingranaggi e i chiavistelli passano allo stato nuovo senza muoversi. Con la password sbagliata la porta non trema: si accende e si spegne solo la fessura rossa intorno. Con quella giusta la porta non si apre in 3D ma si dissolve, mentre il caveau si accende e il modulo lascia il posto al benvenuto in dissolvenza; Lock the vault fa lo stesso al contrario.

Trappole

Con la molla libera, un ritorno di tre giri arriverebbe a trenta giri al secondo e supererebbe lo zero di cento gradi. La forza è tagliata a 60 gradi: sui giri lunghi la manopola corre a velocità costante, come girata a mano, e solo l’ultimo tratto oscilla.
Con tre satelliti la corona non può ingranare con tutti e tre per qualsiasi numero di denti: con 20, 15 e 50 (20 + 50) / 3 non è intero e un satellite finiva coi denti sui denti. Con 24, 15 e 54 la somma 78 si divide per tre e la fase della corona, calcolata da un satellite, va bene per gli altri due.
La porta va dalla parte del caveau: col cardine a destra, aprendosi verso chi guarda, sarebbe finita sopra il modulo. Il cardine è a sinistra e la porta si apre di 74 gradi: si vede di scorcio la sua faccia con gli ingranaggi e il suo spessore, e niente esce dal vano.
La riga d’errore sotto la password allungava la scheda e la porta, centrata nella sua metà, saltava in giù e in su a ogni tentativo sbagliato. La scheda ha un’altezza minima che tiene la riga; il modulo e il benvenuto stanno nella stessa cella della griglia, quello spento con visibility hidden e inert, così lo scambio non cambia l’altezza.
Il caveau acceso era una lastra d’oro piatta che abbagliava: le cassette ora sono d’ottone più scuro, con la luce che viene dall’alto e il fondo che si spegne, e la luminosità massima è più bassa.
Il titolo del benvenuto prende il fuoco quando la porta si apre (per i lettori di schermo) e il browser gli disegnava intorno il contorno dei comandi: il contorno è tolto solo lì, perché non è un comando.

Librerie

GSAP 3.15.0, Newsreader (font variabile) 5.3.0, Hanken Grotesk (font variabile) 5.3.0.

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

Collaudo

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