Il rullo delle ore
Selettori, 3D, Fisica
NuovaGratis
Tutti i componenti
Il pulsante del tornello
Il pulsante Sign in con la testa di un tornello a tripode nella punta della pillola: un mozzo e tre bracci d'acciaio spazzolato disegnati in vero 3D su canvas, in prospettiva, e un lettore di tessere di vetro scuro nell'altra punta. I bracci sentono il puntatore e si inclinano appena. Al clic un piccolo pass si appoggia al lettore (Signing in…), le onde del lettore si accendono, compare la freccia verde, il braccio si sblocca con uno scatto e il tripode gira di un terzo di giro con la sua inerzia, sbatte sul fermo e rimbalza prima che lo scatto lo prenda; poi Welcome back, Noor. Il secondo clic (Log out) lo fa girare all'indietro e si riblocca.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The turnstile button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the turnstile button: a Sign in pill with the head of a tripod turnstile in its round left end, three arms of
brushed steel drawn in perspective on a canvas, and a card reader in its right end. The arms feel the pointer
and lean a little; a click taps a pass on the reader, the top arm is let go and the tripod turns a third of a
turn with its inertia, bouncing on the stop. A second click signs out: it turns back and locks again -->
<div class="gate" data-gate>
<button class="gate__btn" type="button" data-btn data-autoclic>
<span class="gate__fill" aria-hidden="true"></span>
<canvas class="gate__rotor" aria-hidden="true" data-rotor></canvas>
<span class="gate__faces">
<span class="gate__face" data-face="rest">
<span class="gate__word" data-wide="Sign in" data-rest-text>Sign in</span>
</span>
<span class="gate__face gate__face--busy" data-face="busy" aria-hidden="true">
<span class="gate__shine" data-busy-text>Signing in…</span>
</span>
<span class="gate__face gate__face--done" data-face="done" aria-hidden="true">
<span class="gate__who">
<span class="gate__lead" data-lead-text>Welcome back,</span>
<span class="gate__name" data-name-text>Noor</span>
</span>
<span class="gate__out" data-out-text>Log out</span>
</span>
<span class="gate__face gate__face--busy" data-face="gone" aria-hidden="true">
<span class="gate__gone" data-gone-text>Signed out</span>
</span>
</span>
<!-- the reader: a pane of dark glass with the contactless sign, and the arrow that lets you through -->
<span class="gate__reader" aria-hidden="true">
<svg class="gate__waves" viewBox="0 0 24 24" data-waves>
<path d="M8.6 8.2a5.4 5.4 0 0 1 0 7.6"/>
<path d="M11.8 5.4a9.4 9.4 0 0 1 0 13.2"/>
<path d="M15 2.6a13.4 13.4 0 0 1 0 18.8"/>
</svg>
<svg class="gate__arrow" viewBox="0 0 24 24" data-arrow>
<path d="M4.5 12h14M13 6.2l5.8 5.8-5.8 5.8"/>
</svg>
</span>
</button>
<!-- the pass that taps the reader -->
<span class="gate__pass" aria-hidden="true" data-pass>
<span class="gate__band"></span>
<span class="gate__chip"></span>
<span class="gate__lines"></span>
</span>
<p class="sr" 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.
27 valori da cambiare
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 del tornello» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una pillola color grafite, alta 60 pixel. Nella punta tonda di sinistra c'è un foro scuro, e dal foro esce la testa di un tornello a tripode: un mozzo cilindrico d'acciaio con l'asse inclinato verso chi guarda e verso destra, e tre bracci a tubo disposti a cono intorno all'asse, uno orizzontale verso la scritta, come quello che sbarra il passaggio. I bracci sono d'acciaio spazzolato: chiari dove li prende la luce in alto a sinistra, scuri sul fianco opposto, con le righe sottili della spazzolatura per lungo, il collare dove entrano nel mozzo e un'ombra morbida sulla pillola. In mezzo Sign in in Mona Sans; nella punta di destra un lettore di vetro scuro col segno delle onde. Col mouse vicino tutta la testa si inclina verso il puntatore e i bracci cedono di qualche grado, come sotto una mano, e tornano a posto con un piccolo tremito quando il puntatore va via; sopra il pulsante la scritta si allarga sull'asse wdth e il fondo si gonfia con un rimbalzo. Al clic un piccolo pass color avorio con la banda rossa scende dall'alto e si appoggia al lettore, la scritta diventa Signing in… con un riflesso che la attraversa, le tre onde si accendono in ambra una dopo l'altra; poi il pass se ne va, al posto delle onde entra una freccia verde e il braccio si sblocca: arretra di un soffio, la mano lo spinge e il tripode gira di un terzo di giro, rallentando sul cuscinetto, sbatte sul fermo, rimbalza indietro e lo scatto lo prende con un ultimo tremito, mentre la pillola dà un colpetto. La pillola si allarga su Welcome back, con sotto Noor, e una piccola pillola Log out. Il secondo clic: Signing out…, la freccia esce, il tripode gira all'indietro di un terzo di giro e si riblocca col suo colpo; Signed out, e dopo un momento di nuovo Sign in.
Come funziona
Un tripode vero, in 3D
Il rotore ha un suo sistema di riferimento: l'asse è la sua z, e i tre bracci stanno su un cono intorno all'asse, a un terzo di giro l'uno dall'altro. Ogni punto passa al riferimento della pagina con due rotazioni (l'asse si alza e gira verso destra) e poi sulla tela con la prospettiva: la scala è la distanza dell'occhio divisa per la distanza del punto. Il mozzo è due anelli proiettati punto per punto; il fianco è il loro inviluppo convesso.
Bracci d'acciaio spazzolato
Ogni braccio è una capsula: un tratto con le punte tonde, largo quanto il tubo in prospettiva. La sfumatura gli corre di traverso; la parte della luce perpendicolare al braccio decide dove sta il riflesso e quanto brilla, così il riflesso scivola mentre il tripode gira. Sopra, sette righe sottili per lungo fanno la spazzolatura. I bracci si disegnano dal più lontano al più vicino, ordinati a ogni fotogramma.
Ombre che cadono sulla pillola
Le ombre del mozzo e dei bracci sono i loro punti spostati lungo la luce, tanto più quanto stanno alti sulla pillola. Si disegnano mille pixel fuori dalla tela con un'ombra di canvas spostata di altrettanto: arriva sulla tela solo la sfocatura, morbida, senza filtri.
Inerzia, fermo e scatto
Il rotore è un corpo con inerzia. Bloccato, una molla rigida lo tiene nel suo scatto con poco smorzamento, e il puntatore gli sposta il punto di riposo di qualche grado. Sbloccato, una mano lo porta a velocità per un attimo, poi il cuscinetto lo rallenta; quando arriva a un terzo di giro batte sul fermo, rimbalza indietro con parte della sua velocità (BOUNCE) e lo scatto nuovo lo prende.
Il lettore e le scritte
Il pass scende, tocca e riparte con una timeline GSAP; le onde del lettore sono tre archi SVG che si accendono in sequenza, poi lascia il posto a una freccia disegnata. La pillola misura le sue facce e si allarga con un rimbalzo; le scritte vecchie escono prima che entrino le nuove, così due righe non si sovrappongono mai.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | 'Sign in' | La scritta a riposo. |
BUSY | script.js | 'Signing in…' | La scritta mentre il lettore legge il pass. |
LEAD | script.js | 'Welcome back,' | La riga piccola sopra il nome, una volta dentro. |
PERSON | script.js | 'Noor' | Il nome, una volta dentro (inventato: non si manda niente da nessuna parte). |
LOGOUT | script.js | 'Log out' | La piccola pillola che fa uscire. |
LEAVING | script.js | 'Signing out…' | La scritta mentre torna indietro. |
GONE | script.js | 'Signed out' | La scritta una volta fuori, prima di tornare a Sign in. |
READ | script.js | 0.9 | I secondi che il lettore impiega a leggere il pass. |
PUSH | script.js | 5.5 | Quanto in fretta la mano spinge il braccio, in radianti al secondo. |
FRICTION | script.js | 1.6 | Quanto il cuscinetto rallenta il tripode mentre gira. |
BOUNCE | script.js | 0.38 | Quanta velocità tiene il tripode quando sbatte sul fermo e rimbalza indietro. |
FEEL | script.js | 1 | Quanto i bracci sentono il puntatore: 0 restano fermi, 2 si inclinano molto. |
Quando usarla
Per l'accesso di un'app che apre una porta vera o finta: una palestra, un coworking, un ufficio, un evento, un'area riservata. Sta da solo su fondo scuro; in un sito vero la funzione che entra davvero va al posto della pausa del lettore.
Sul telefono
La pillola si stringe allo schermo (al massimo larga quanto lo schermo meno 32 pixel) e il tripode resta della stessa misura. Il dito appoggiato fa da puntatore: la testa si inclina verso il dito; il tocco fa partire tutto il giro.
Con il movimento ridotto
Niente rotazioni né inclinazioni: un terzo di giro riporta il tripode alla stessa figura, quindi resta fermo. Il pass compare sul lettore in dissolvenza, le onde e la freccia cambiano in dissolvenza, la pillola prende la sua larghezza mentre le scritte sono spente.
Trappole
- Visto quasi lungo l'asse il tripode sembrava una stella piatta, un logo: l'asse è girato molto verso destra e poco in alto, così il mozzo si vede di fianco come un tamburo e un braccio sta orizzontale verso la scritta, come nei tornelli veri.
- Spinto con una sola botta il tripode faceva il terzo di giro in tre fotogrammi e non si vedeva: una mano lo porta a velocità per un quinto di secondo, poi rallenta sul cuscinetto, e se è troppo lento la mano lo accompagna fino al fermo.
- Il filtro blur del canvas non c'è in Safari prima della versione 18: le ombre sono disegnate fuori dalla tela con un'ombra di canvas spostata, che arriva sola e sfocata.
- Il ciclo si addormentava solo col puntatore fuori dalla finestra, e il mouse fermo sul pulsante lo teneva sveglio per sempre: dorme quando l'inclinazione è arrivata dove la vuole il puntatore.
- Uscendo, la pillola misurava la scritta Signing in… invece di Signing out… e la scritta toccava il lettore: il testo si cambia prima di misurare.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 14 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 12 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.
