Il pulsante che copia
Pulsanti, Testo, SVG, Fisica
NuovaGratis
Tutti i componenti
Il campo della password
Un campo per una password nuova coi caratteri disegnati sopra un campo vero: nascosta, ogni lettera è una stellina che entra girando e l’ultima digitata si vede un attimo mentre l’occhio in fondo sbircia; l’occhio si apre e le stelline tornano lettere una dopo l’altra, con l’iride che segue il cursore, e sotto quattro barre e quattro regole dicono quanto è robusta.
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 field</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/rubik@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the password field: a real input under drawn characters (stars when hidden, letters when shown), an eye that
shows and hides them, four bars for the strength and the rules ticking themselves off -->
<div class="pw" data-pw data-autoclic>
<label class="pw__label" for="pw-input">Choose a password</label>
<div class="pw__field" data-field>
<input class="pw__input" id="pw-input" type="password" autocomplete="new-password" spellcheck="false" autocapitalize="off" autocorrect="off" aria-describedby="pw-strength pw-rules" data-input>
<div class="pw__row" aria-hidden="true" data-row>
<div class="pw__chars" data-chars>
<span class="pw__sel" data-sel></span>
<span class="pw__caret" data-caret></span>
</div>
</div>
<button class="pw__eye" type="button" aria-controls="pw-input" aria-pressed="false" aria-label="Show password" data-eye>
<svg viewBox="0 0 32 32" aria-hidden="true">
<defs><clipPath id="pw-eye-clip"><path data-eye-clip/></clipPath></defs>
<path class="eye__white" data-eye-white/>
<g clip-path="url(#pw-eye-clip)">
<g data-iris>
<circle class="eye__iris" cx="16" cy="16.5" r="4.8"/>
<circle class="eye__pupil" cx="16" cy="16.5" r="2.1"/>
</g>
</g>
<path class="eye__line" d="M4 16Q16 26 28 16"/>
<path class="eye__line" data-eye-lid/>
<path class="eye__lashes" d="M10 19.75 8.4 22.5M16 21v3.2M22 19.75l1.6 2.75" data-eye-lashes/>
</svg>
</button>
</div>
<div class="pw__meter">
<div class="pw__bars" aria-hidden="true" data-bars><span><i></i></span><span><i></i></span><span><i></i></span><span><i></i></span></div>
<span class="pw__word-clip"><span class="pw__word" id="pw-strength" aria-live="polite" data-word>Strength</span></span>
</div>
<ul class="pw__rules" id="pw-rules" data-rules></ul>
</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.
14 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 campo della password» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco la scritta Choose a password, un campo grigio dagli angoli tondi con in fondo un occhio chiuso, che dorme con le sue ciglia; sotto, quattro barre grigie con Strength a destra e quattro regole su due colonne con le caselle vuote: 8 or more characters, An uppercase letter, A number, A symbol. Cliccato, il campo diventa bianco col bordo viola e un alone. Scrivendo, ogni carattere fa vedere la sua lettera che sale dal basso e l’occhio apre uno spiraglio; dopo un attimo, o appena arriva il tasto dopo, la lettera si ribalta e al suo posto entra girando una stellina a sei braccia. Il cursore viola segue i caratteri e lampeggia quando è fermo. Le barre si riempiono da sinistra, rosse con Weak, arancio con Fair, verdi con Good, verde scuro con Strong, la parola cambia scorrendo e le regole rispettate si spuntano di verde con un piccolo rimbalzo; diventando Strong, un riflesso attraversa le barre. Cliccando l’occhio, si apre con un piccolo slancio e le stelline tornano lettere una dopo l’altra da sinistra mentre la fila si allarga alle loro larghezze; aperto, l’iride viola segue il cursore lungo il campo e ogni tanto l’occhio sbatte le palpebre. Cliccato di nuovo, le lettere tornano stelline da destra e l’occhio si chiude con le sue ciglia. Cancellando, i caratteri si rimpiccioliscono e gli altri scivolano a chiudere il vuoto.
Come funziona
Il campo vero, invisibile
L’input (type password, autocomplete new-password) copre tutto il campo coi caratteri e il cursore trasparenti (color e -webkit-text-fill-color transparent, caret-color transparent): tasti, incolla, gestori delle password e selezione funzionano da soli. Lo script legge il valore e la selezione a ogni fotogramma del ticker di GSAP (e a ogni input) e disegna quello che trova.
Che cosa è cambiato
A ogni cambio confronta i caratteri di prima e di dopo (l’inizio uguale e la fine uguale): solo quelli in mezzo escono ed entrano, gli altri scivolano al loro posto nuovo. Nascosto, ogni carattere prende 16 pixel; visibile, la sua larghezza, misurata una volta con measureText su un canvas nel carattere del campo (e di nuovo quando i font sono pronti).
Stelline e lettere
Ogni carattere ha due facce, la lettera e una stellina SVG di tre righe incrociate. A nascondere, la lettera si ribalta con rotationX 90 e sfuma mentre la stellina entra girando da −140 gradi con back.out; a mostrare, il contrario. Uno dopo l’altro, a WAVE secondi: da sinistra mostrando, da destra nascondendo. Un tasto battuto a password nascosta fa vedere la sua lettera per PEEK secondi.
L’occhio
La palpebra di sopra è una curva quadratica col punto di controllo che va da 26 (sulla palpebra di sotto: l’occhio chiuso, con tre ciglia) a 4 (aperto); la stessa curva fa il bianco dell’occhio e il clipPath che taglia l’iride. Aperto, l’iride guarda il cursore (molto a sinistra all’inizio del campo, quasi dritta in fondo), addolcita fotogramma per fotogramma, e ogni BLINK secondi (a caso fra i due) l’occhio sbatte le palpebre; a password nascosta, una lettera che si vede lo apre di un terzo.
La forza e le regole
Le regole sono quattro: almeno MIN caratteri, una maiuscola, un numero, un simbolo. Il punteggio dà un punto per MIN caratteri, uno per MIN + 4 e uno ciascuno per due, tre e quattro tipi di carattere, fra 1 e 4 (solo Weak sotto i 6 caratteri o con una password comune dentro). Le barre che si accendono si riempiono da sinistra (scaleX con expo.out), quelle che si spengono si svuotano da destra, la parola scorre e le spunte si disegnano con stroke-dashoffset. Col mouse il cursore va dove indicano i caratteri disegnati; un clic da script (l’anteprima della libreria) scrive, mostra, allunga, nasconde e cancella una password senza prendere la focalizzazione.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PEEK | script.js | 0.7 | I secondi in cui un carattere appena battuto mostra la sua lettera prima di nascondersi (0: mai). |
WAVE | script.js | 0.035 | I secondi fra un carattere e il successivo quando si girano, a mostrare o a nascondere. |
BLINK | script.js | [3, 6] | Ogni quanti secondi l’occhio aperto sbatte le palpebre, a caso fra i due. |
MIN | script.js | 8 | Quanti caratteri vuole almeno una password. |
Quando usarla
Nella registrazione a un sito, nel cambio della password, in un’area riservata: ovunque si sceglie una password e conviene dire subito se basta.
Sul telefono
Il campo prende la larghezza dello schermo; un tocco apre la tastiera del telefono e mette il cursore dove si è toccato. L’occhio è un pulsante di 44 pixel e le regole restano su due colonne.
Con il movimento ridotto
Stelline e lettere si scambiano senza giri, i caratteri compaiono e spariscono al loro posto, l’occhio si apre e si chiude senza animazione e non sbatte le palpebre, il cursore non lampeggia; le barre e le spunte si riempiono subito.
Trappole
- Un campo password nasconde i caratteri a modo suo: per disegnarli si lascia sopra il campo vero coi caratteri trasparenti e si disegna sotto quello che contiene. Va nascosto anche il cursore (caret-color) e la selezione (::selection trasparente).
- Il clic del mouse metterebbe il cursore secondo i caratteri invisibili del campo, larghi in un altro modo: il mousedown si ferma (preventDefault) e il cursore va secondo i caratteri disegnati; col dito, dove si è toccato, dopo il clic.
- Cambiando tipo (da password a text e indietro) il campo può perdere la selezione: si legge prima e si rimette dopo.
- Una lettera fatta di due unità (un’emoji, per esempio) va contata come una: il confronto si fa sulle lettere ([...stringa]) e le posizioni del campo si convertono.
Librerie
GSAP 3.15.0, Rubik (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,4 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.
