L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
La password sul righello del tempo
Su nero, la password nuova di un account misurata in tempo: quanto ci metterebbe un computer a indovinarla, su un righello logaritmico da un secondo a diecimila anni. L’ago sta su una molla e le tacche vicine si alzano al suo passaggio; oltre la linea tratteggiata del secolo il righello diventa ambra. La stima si fa qui, leggendo la password a pezzi (password comuni, parole, anni, sequenze, file della tastiera, ripetizioni), e i pezzi deboli si vedono segnati con una parentesi sotto la password, disegnata come una fila di barrette sottili.
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 password on the time ruler</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/hubot-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- a new password measured in time: how long a computer would take to guess it, on a ruler that runs from a
second to ten thousand years. The weak parts are bracketed under the password. Creating the account is
pretended: see post() in the script -->
<form class="pw" action="#" novalidate aria-labelledby="pw-title" data-pw data-autoclic>
<h2 class="pw__title" id="pw-title">Choose a password</h2>
<p class="pw__for">for your Margin account, mira@kiln.studio</p>
<input class="sr" type="email" name="username" autocomplete="username" value="mira@kiln.studio" readonly tabindex="-1" aria-hidden="true">
<label class="pw__label" for="pw-input">Password</label>
<div class="pw__box" data-box>
<div class="pw__slot" data-slot>
<input class="pw__input" id="pw-input" name="password" type="password" autocomplete="new-password" autocapitalize="off" autocorrect="off" spellcheck="false" enterkeyhint="done" maxlength="64" aria-describedby="pw-status" aria-invalid="false" data-input>
<span class="pw__cells" aria-hidden="true" data-cells></span>
<span class="pw__caret" aria-hidden="true" data-caret></span>
</div>
<button class="pw__show" type="button" aria-pressed="false" aria-controls="pw-input" data-show>Show</button>
</div>
<div class="pw__marks-clip"><div class="pw__marks" aria-hidden="true" data-marks></div></div>
<div class="ruler" aria-hidden="true" data-ruler>
<span class="ruler__tag" data-tag><span data-tag-text>a second</span></span>
<svg class="ruler__svg" data-svg>
<path class="ruler__ticks" data-ticks/>
<path class="ruler__base" data-base/>
<path class="ruler__fill" data-fill/>
<path class="ruler__goal" data-goal/>
<path class="ruler__needle" data-needle/>
</svg>
<div class="ruler__units" data-units></div>
</div>
<p class="pw__status" id="pw-status" data-status><span class="status__line">Measured in the time a computer would need to guess it.</span></p>
<button class="make" type="submit" data-make>
<span class="make__bg" aria-hidden="true"></span>
<span class="make__label" data-make-label>Create account</span>
</button>
<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.
22 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 «La password sul righello del tempo» da Animorio e adattala al mio sitoCosa fa
Su una pagina nera il titolo Choose a password e sotto for your Margin account, mira@kiln.studio. Più giù il campo Password, scuro, con Show a destra, e sotto un righello sottile pieno di tacche, con le parole second, minute, hour, day, month, year e, in ambra, century accanto a una linea tratteggiata; sopra il righello, a sinistra, a second. All’arrivo l’ago corre fino a metà del righello e torna, e le tacche si alzano al suo passaggio. Ogni carattere scritto è una barretta bianca che cresce dal basso con un piccolo rimbalzo. Mentre scrivi l’ago va avanti e indietro sul righello, su una molla, con le tacche vicine alzate a cupola e la scritta sopra che dice in quanto tempo la si indovina (in 2 minutes); sotto la password compaiono delle parentesi sottili sui pezzi deboli, con il loro nome: word, year, common, run, key row, repeat, e la riga sotto il righello li dice per intero (garden is in every word list, and 1994 looks like a year.). Show trasforma le barrette nelle lettere una dopo l’altra, Hide le rifà barrette. Premendo Create account con una password debole il campo prende un bordo ambra e fa uno scatto, l’ago prova a correre verso la linea del secolo e ricade, e la riga dice di puntare oltre il secolo. Passata la linea il righello fino all’ago, l’ago e la scritta diventano ambra, così il pulsante, e si legge Strong enough. Premendolo il pulsante dice Creating your account e poi Account created, le barrette si alzano a onda e si riassestano, e la riga dice Saved. con Start over.
Come funziona
Leggere la password a pezzi
Da ogni posizione si cerca il pezzo noto più lungo: una delle quasi cento password più usate, una parola (circa 450, ognuna col suo posto in classifica moltiplicato per 20, come se fosse fra le parole di un dizionario vero), con le sostituzioni solite (4 per a, 0 per o, @ per a) e le maiuscole, un anno fra il 1900 e il 2099, una sequenza come abcd o 4321, una fila della tastiera, un carattere ripetuto. Ogni pezzo vale quanti tentativi servono per arrivarci; i caratteri che restano valgono quanti sono i caratteri possibili della password, uno per uno. Il prodotto, diviso RATE tentativi al secondo, sono i secondi.
Il righello logaritmico
Il righello va da un decimo di secondo a diecimila anni in potenze di dieci: le tacche piccole ogni quarto di potenza, quelle medie a ogni potenza, quelle alte su secondo, minuto, ora, giorno, mese, anno e GOAL anni, segnato da una linea tratteggiata. Il percorso SVG delle tacche si riscrive a ogni fotogramma: ognuna si alza di BULGE pixel per una gaussiana della sua distanza dall’ago, così le tacche fanno una cupola che segue l’ago.
L’ago sulla molla
L’ago è una molla (STIFF, DAMP) integrata a piccoli passi sul ticker di GSAP, che dorme quando è ferma: scrivendo, il bersaglio cambia a ogni tasto e l’ago lo insegue senza scatti. Premendo il pulsante con una password debole riceve una spinta verso la linea del secolo e ricade. La scritta sopra lo segue restando dentro il righello, e cambia con una piccola dissolvenza verticale.
Un campo password vero, disegnato a barrette
Il campo è un input type=password con autocomplete new-password e un nome utente nascosto per i gestori di password; i suoi pallini sono trasparenti e sopra c’è una cella per carattere, larga quanto un carattere di JetBrains Mono (lo stesso carattere del campo, quindi il cursore cade giusto). Nella cella ci sono una barretta e la lettera: Show passa a type=text e piega le barrette nelle lettere una dopo l’altra. Le celle nuove si trovano con la sottosequenza comune più lunga, così scrivere in mezzo sposta solo quelle dopo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
RATE | script.js | 10000 | I tentativi al secondo dell’attacco misurato: 10.000 è una lista di password rubata, salvata con un hash lento. |
GOAL | script.js | 100 | Gli anni che una password deve resistere per essere abbastanza forte. |
SHORTEST | script.js | 8 | Il numero minimo di caratteri. |
STIFF | script.js | 240 | Quanto è rigida la molla dell’ago. |
DAMP | script.js | 20 | Quanto è frenata la molla dell’ago: più bassa, l’ago va più oltre. |
BULGE | script.js | 14 | Quanto si alzano le tacche vicine all’ago, in pixel. |
WAIT | script.js | 0.8 | Quanti secondi dura la creazione finta dell’account. |
Quando usarla
Nella registrazione o nel cambio password di un’app, di un servizio, di un’area clienti: un tempo («in 2 minuti», «in miliardi di anni») si capisce meglio di una barra rossa o verde, e le parentesi dicono perché una password è debole. Funziona anche nelle impostazioni di sicurezza di un account.
Sul telefono
Il blocco prende la larghezza dello schermo; sul righello restano second, hour, day, year e century (minute e month si nascondono) e le tacche si stringono. Il campo apre la tastiera senza correttore e il tasto Invio dice Done; Show si tocca come un pulsante di 42 pixel. Una password più lunga del campo scorre e barrette e parentesi scorrono con lei.
Con il movimento ridotto
L’ago salta subito al suo posto, senza molla e senza la corsa d’arrivo; le tacche restano alzate dove sta l’ago. Le barrette compaiono senza crescere, Show scambia barrette e lettere in un colpo, le parentesi e i messaggi compaiono in dissolvenza, e all’invio non c’è l’onda.
Trappole
- Con un dizionario di poche centinaia di parole, ognuna valeva quanto il suo posto nell’elenco, e una frase di quattro parole vere risultava indovinabile in un mese. Ora il posto di una parola conta venti volte, come se fosse nell’elenco delle parole più comuni di un dizionario vero: quattro parole a caso passano il secolo, una parola e un anno no.
- Con una password più lunga del campo, l’input scorre e le barrette lo seguono, ma le parentesi sotto uscivano a sinistra dal bordo del campo: ora stanno in una striscia che taglia quello che esce.
- I pallini di un campo password e le lettere di JetBrains Mono sono larghi uguali in Chrome (449 pixel per 44 caratteri in tutti e due i modi): è questo che fa cadere il cursore vero sulle barrette disegnate. In Safari i pallini sono un altro carattere e va provato.
- Rifare le parentesi con l’elenco vuoto chiamava GSAP su niente e la console diceva target not found: ora si controlla prima.
Librerie
GSAP 3.15.0, Hubot Sans (font variabile) 5.3.0, JetBrains Mono (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
