Il pulsante della chiave

Pulsanti, Fisica, SVGGSAP, Solo CSSImpegnativaPeso compresso: Demo 9,8 KBGSAP 28 KBGratisScarica lo zip

Il pulsante Sign in con dentro la sezione di una serratura a cilindro, disegnata come un disegno tecnico: cinque coppie di perni a molla su altezze sbagliate. Premuto, la chiave entra da sinistra e i suoi denti alzano i perni uno per volta mentre passa, le molle si comprimono e si allungano; quando ogni taglio arriva alla linea di taglio una luce sottile corre lungo la linea, il cilindro gira e la scritta diventa Signed in. Con la chiave sbagliata un perno resta di traverso, il cilindro trema e dice Wrong key.

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 key lock button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the button: a pin tumbler lock cut in half, drawn like a technical drawing inside the pill. Pressed, the key
         slides in from the left, its teeth lift the five pin stacks one after the other, and when every gap meets the
         shear line the plug turns. The small button under it tries a key that is cut wrong -->
    <div class="lock" data-lock>
      <button class="lock__btn" type="button" aria-describedby="lock-status" data-btn data-autoclic>
        <!-- three layers: the still housing, the plug's cut face (it only moves when the plug turns) and the moving
             parts, so a frame of the key sliding repaints only the light drawing on top -->
        <svg class="lock__art" viewBox="0 0 390 120" aria-hidden="true" data-art="base"></svg>
        <svg class="lock__art lock__art--face" viewBox="0 0 390 120" aria-hidden="true" data-art="face"></svg>
        <svg class="lock__art" viewBox="0 0 390 120" aria-hidden="true" data-art="move"></svg>
        <span class="lock__label" data-label>
          <span class="lock__word" data-word>Sign in</span>
          <svg class="lock__icon" viewBox="0 0 24 24" aria-hidden="true" data-icon><path d="M5 12h13M13 6.5l5.5 5.5-5.5 5.5"/></svg>
        </span>
      </button>
      <button class="lock__wrong" type="button" data-wrong>Try wrong key</button>
      <p class="sr" id="lock-status" aria-live="polite" data-live></p>
    </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.

28 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 pulsante della chiave» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina bianca una pillola color carta con il bordo scuro: a sinistra la sezione di una serratura, a destra la scritta Sign in con una freccia. La serratura è disegnata come in un manuale: il corpo d’acciaio grigio tratteggiato a 45 gradi, il cilindro d’ottone tratteggiato nell’altro verso, la linea di taglio tratteggiata in blu fra i due e, nei cinque fori, cinque pile: un perno d’ottone con la punta tonda, un contro-perno d’acciaio e una molla disegnata a spire oblique. A riposo i perni stanno giù, ognuno a un’altezza diversa, e i contro-perni attraversano la linea. Col puntatore sopra, la punta della chiave arriva al foro della serratura e aspetta. Premendo (o con Invio) la chiave entra: i denti passano sotto i perni, che salgono e ricadono sulle loro molle, le spire si stringono e si allargano, finché la chiave è in fondo e batte contro l’arresto. Allora ogni taglio è sulla linea: una luce sottile corre lungo la linea da sinistra a destra e la lascia accesa, il cilindro gira su se stesso (la faccia tagliata si schiaccia verso l’asse, si vede l’ottone tondo e la testa della chiave diventa un filo di metallo) e la scritta diventa Signed in in verde, con una spunta. Dopo qualche secondo il cilindro torna, la chiave esce e i perni ricadono. Sotto la pillola un piccolo pulsante, Try wrong key, prova una chiave con un taglio sbagliato: la luce corre fino al quarto perno e diventa rossa, quel perno resta di traverso sulla linea, il cilindro prova a girare e trema, la scritta dice Wrong key in rosso e la chiave esce.

Come funziona

Una serratura vera, in numeri

Le misure sono quelle di un cilindro a perni: la linea di taglio, il cilindro, la scanalatura della chiave e cinque fori. Da CUTS, l’altezza del dente sotto ogni perno, nasce tutto il resto: ogni perno d’ottone è lungo quanto serve perché, con la chiave giusta, la sua cima arrivi esatta alla linea. La chiave sbagliata ha un solo taglio diverso, e il suo perno passa la linea.

Il profilo della chiave

Il bordo della chiave è una funzione: a ogni distanza dalla punta il minimo fra la rampa della punta e, per ogni taglio, il fondo del taglio più una salita a 45 gradi. Lo stesso profilo disegna la chiave (campionato ogni pixel in un tracciato SVG) e regge i perni.

Perni su molle smorzate

Ogni pila è una molla che spinge giù, con un precarico, e uno smorzamento. Il pavimento è il bordo della chiave sotto il perno, campionato su tutta la punta tonda: il perno non lo attraversa mai, e se il bordo sale in fretta lo lancia in su con la sua velocità. Così i denti fanno saltare i perni e le molle li riportano giù. Otto piccoli passi per fotogramma, con la chiave che scorre fra un passo e l’altro, e un arresto quando la molla è tutta chiusa.

Le molle ridisegnate a ogni fotogramma

Una molla in un disegno tecnico è una fila di tratti obliqui: davanti scuri, dietro più chiari. Lo script la ricalcola a ogni fotogramma dalla sua lunghezza, fra il fondo del foro (a punta di trapano, a 118 gradi) e la cima del contro-perno, e le spire si stringono e si allargano da sole.

La luce e il giro del cilindro

A chiave in fondo lo script controlla che ogni taglio sia sulla linea entro un pixel. La luce è un gradiente che corre lungo la linea con la testa bianca, più una copia sfocata. Il giro del cilindro schiaccia la faccia tagliata verso il suo asse col coseno dell’angolo, e intanto si vede il bordo della chiave, alto col seno; la faccia tratteggiata è uno strato SVG a parte che gira come un’immagine, e il tratteggio non si ridipinge mentre la chiave scorre.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`INSERT`	script.js	`1.5`	I secondi che la chiave impiega a entrare fino in fondo.
`PIN`	script.js	`[2400, 30]`	Le molle dei perni: quanto spingono giù i perni, e quanto sono smorzate.
`CUTS`	script.js	`[16, 8, 20, 12, 6]`	I tagli della chiave: quanto è alto il suo bordo sotto ogni perno, da 2 a 22 (i perni si fanno su misura).
`TURN`	script.js	`90`	Di quanto gira il cilindro quando i perni sono allineati, in gradi.
`SIGNED`	script.js	`2.6`	I secondi in cui resta Signed in prima che la chiave esca.
`WRONG`	script.js	`false`	true: anche il pulsante principale prova la chiave sbagliata, per vedere la serratura bloccarsi.

Provali nel Playground

Quando usarla

Per l’accesso di un’app che parla di sicurezza (un gestore di password, una banca, una cassaforte di file) o per il passo finale di un modulo d’accesso. Sta da solo su un fondo chiaro; il pulsante della chiave sbagliata si toglie in un sito vero e si usa WRONG, o il proprio errore d’accesso, per mostrare Wrong key.

Sul telefono

La pillola si scala sulla larghezza dello schermo (a 390 pixel è larga 358) con tutto il disegno. Un dito appoggiato porta la chiave al foro, alzandolo la chiave entra; il pulsante della chiave sbagliata è abbastanza grande per il pollice.

Con il movimento ridotto

La chiave non scorre: compare già dentro, in dissolvenza, coi perni già al loro posto. La linea si accende in dissolvenza, il cilindro passa girato senza animazione, le scritte cambiano in dissolvenza; con la chiave sbagliata non trema, la luce rossa si ferma sul perno sbagliato.

Trappole

La chiave si muove una volta per fotogramma, la fisica dei perni otto: al primo passo il bordo saltava di colpo e lanciava i perni fuori dal disegno. La chiave ora scorre anche fra un passo e l’altro, la velocità del bordo ha un limite e la molla chiusa del tutto fa da arresto.
Il tratteggio con un pattern SVG si ridipingeva a ogni fotogramma insieme alla chiave, e un computer lento si piantava: il disegno è in tre strati SVG, il corpo fermo, la faccia del cilindro (che si muove solo col giro, come trasformazione CSS) e le parti mobili senza tratteggio.
Coi perni d’ottone tutti uguali la chiave giusta non poteva esistere: la lunghezza di ogni perno nasce dal suo taglio, così cambiando CUTS la serratura resta apribile.
Con la sola linea di taglio non si capiva che il cilindro avesse girato: la faccia tagliata si schiaccia verso l’asse col coseno, sotto compare l’ottone tondo e la testa della chiave diventa il suo spessore.
Il disegno sopra il pulsante rubava il puntatore e il passaggio fra le sue parti costava caro: gli strati SVG e la scritta hanno pointer-events: none, il pulsante vero prende tutto.

Librerie

GSAP 3.15.0, Geist (font variabile) 5.3.0.

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

Collaudo

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