Il campo della password
Moduli, Testo, SVG
NuovaGratis
Tutti i componenti
Il campo dell’email
Il campo email di un’iscrizione che legge l’indirizzo come un correttore di bozze: mentre scrivi ti propone in grigio il resto del provider, e un refuso come nora@gmial.con prende un’ondina blu e un suggerimento; accettato, le lettere si correggono da sole sul posto, quella sbagliata salta fuori e cade, quella giusta scende dall’alto e le due scambiate si scavalcano ad arco. Se manca qualcosa arriva la matita rossa, con un segno d’inserimento dove va aggiunto.
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 email field</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the email field of a newsletter sign-up that reads the address like a copy editor: the rest of a known
provider in grey while typing, a blue wavy line under a likely typo and the letters that fix themselves when
the suggestion is taken, the red pencil where something is missing, and the button that sends it -->
<form class="mail" action="#" novalidate data-mail data-autoclic>
<label class="mail__label" for="mail-input">Email address</label>
<div class="mail__field" data-field>
<input class="mail__input" id="mail-input" name="email" type="text" inputmode="email" autocomplete="email" autocapitalize="off" autocorrect="off" spellcheck="false" enterkeyhint="send" placeholder="name@example.com" aria-describedby="mail-note" aria-invalid="false" data-input>
<div class="mail__ink" aria-hidden="true" data-ink>
<div class="mail__row" data-row>
<svg class="mail__marks" data-marks><path class="mail__squiggle" data-squiggle/><path class="mail__wedge" d="M-4.6 5.4 0 0l4.6 5.4" data-wedge/></svg>
<span class="mail__ghost" data-ghost><span class="ghost__clip" data-ghost-clip><span class="ghost__text" data-ghost-text></span></span><span class="ghost__key">tab</span></span>
<span class="mail__caret" data-caret></span>
</div>
</div>
<svg class="mail__tick" viewBox="0 0 20 20" aria-hidden="true" data-tick><path d="M4.6 10.4l3.6 3.6 7.2-8"/></svg>
<button class="send" type="submit" data-send>
<span class="send__bg" data-send-bg></span>
<span class="send__label" data-send-label>Subscribe</span>
<svg class="send__spin" viewBox="0 0 24 24" aria-hidden="true" data-spin><circle cx="12" cy="12" r="8.5"/></svg>
<svg class="send__done" viewBox="0 0 24 24" aria-hidden="true" data-done><path d="M6.2 12.6l3.9 3.9 7.8-8.9"/></svg>
</button>
</div>
<div class="mail__note" id="mail-note" aria-live="polite" data-note><span class="note__line is-help"><span class="note__words">One letter on Sundays. Leave whenever you like.</span></span></div>
<span class="sr" aria-live="polite" data-live></span>
</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.
58 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 dell’email» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero la scritta Email address, un campo color grafite dagli angoli tondi con dentro, a destra, il pulsante chiaro Subscribe, e sotto la riga One letter on Sundays. Leave whenever you like. Toccato, il bordo del campo si schiarisce con un alone. Scrivendo dopo la @, il resto di un provider conosciuto compare in grigio dopo il cursore, col tasto tab disegnato accanto: Tab, la freccia a destra o un tocco sulle lettere grigie lo prendono, e le lettere grigie si inchiostrano una dopo l’altra con un piccolo salto. Se il provider cambia (sam@h propone hotmail.com, sam@he propone hey.com) la parte grigia gira come un rullo e il tasto ricompare alla fine nuova. Un attimo dopo l’ultimo tasto il campo rilegge l’indirizzo. Un refuso probabile, come nora@gmial.con, prende un’ondina blu che si disegna da sinistra tremando sotto il dominio, e sotto il campo compare una matita con Did you mean nora@gmail.com?, con le lettere da cambiare in blu. Toccando il suggerimento (o con Tab) l’ondina si tende in una riga dritta e sparisce, e le lettere si correggono sul posto: la n sbagliata diventa rossa, fa un saltino e cade fuori dal fondo del campo girando, la m giusta scende dall’alto con un rimbalzo, la i e la a si scambiano scavalcandosi, una in alto e una in basso, e le altre scivolano per fare posto; le lettere nuove restano blu un momento e poi tornano bianche. Poi accanto all’indirizzo si disegna una spunta verde e sotto si legge That looks right. Se manca qualcosa o c’è un errore il bordo diventa rosso, il campo trema e sotto compare il messaggio con un triangolo: Add the ending, like .com, con un segno d’inserimento rosso che sale sotto il punto dove va scritto, oppure An email can’t have spaces in it con l’ondina rossa sotto lo spazio; appena l’indirizzo torna giusto l’errore se ne va da solo. Premendo Subscribe la scritta esce verso l’alto, il pulsante si stringe in un cerchio con un arco che gira e poi diventa verde con una spunta, mentre sotto si legge You’re in. The first letter comes on Sunday. e l’indirizzo si spegne in grigio.
Come funziona
Un campo vero, di tipo text
L’input è vero (label, autocomplete email, inputmode email per la tastiera con la @ sul telefono, aria-invalid e aria-describedby verso la riga sotto, che è aria-live). È di tipo text e non email: un input email non lascia leggere né spostare il cursore (selectionStart è null e setSelectionRange lancia un errore), e qui serve sapere se il cursore è in fondo. Le sue lettere restano quelle che si vedono: le lettere disegnate prendono il loro posto solo mentre si muovono, e intanto l’input ha il testo, il cursore e il segnaposto trasparenti.
Dove sta ogni lettera
Ogni posizione si misura con measureText su un canvas, nel carattere dell’input letto da getComputedStyle. Una lettera comincia dove finisce il testo fino a lei compresa, meno la sua larghezza: così conta la crenatura con la lettera prima (W e a, y e il punto), come la conta l’input. Tutto quello che si disegna sta in una fila spostata dello scorrimento dell’input (scrollLeft, letto a ogni fotogramma solo mentre il campo ha il fuoco), dentro un livello tagliato esattamente sulla casella di testo dell’input.
Il resto del provider e il refuso
Dopo la @, con il cursore in fondo, il primo provider di PROVIDERS che comincia col dominio scritto si mostra in grigio dopo il cursore; cambiando provider il vecchio finale esce verso l’alto e il nuovo entra dal basso, come un rullo. PAUSE secondi dopo l’ultimo tasto (un delayedCall di GSAP che riparte a ogni tasto) il dominio si confronta coi provider con la distanza di Damerau-Levenshtein: a una lettera per quelli corti, a due per quelli da nove lettere in su, con al massimo una lettera di differenza in lunghezza. Se nessuno è vicino, il finale si confronta con ENDINGS (.con diventa .com). L’ondina è un tracciato SVG ricalcolato a ogni fotogramma mentre si disegna: una sinusoide con l’ampiezza che si assesta con elastic.out.
Le lettere che si correggono
Dalla stessa tabella di Damerau-Levenshtein, ripercorsa all’indietro dall’angolo, esce l’elenco dei passi: lettere che restano, che si sostituiscono, che si tolgono, che si aggiungono e coppie scambiate. Quelle che restano scivolano alla posizione nuova con power3.inOut; nelle coppie scambiate una salta di HOP pixel ingrandendosi e l’altra passa sotto rimpicciolendo, su un arco calcolato con un seno; quelle tolte cadono con una vera parabola (una spinta in su e la gravità) girando e svanendo; quelle nuove scendono con back.out. Tutto dura FIX secondi; se l’indirizzo lungo deve scorrere, la fila scivola insieme alle lettere.
Gli errori, l’invio e l’anteprima
Il controllo dice cosa manca e dove: un’ondina rossa sotto la parte sbagliata, o un segno d’inserimento sotto il punto in cui va scritto qualcosa (la @ prima di gmail.com, il finale dopo il dominio). Si controlla lasciando il campo e inviando; dopo un errore, a ogni tasto, e l’errore se ne va appena l’indirizzo è giusto. L’invio stringe il pulsante in un cerchio (larghezza e raggio con GSAP) con un arco che gira per WAIT secondi. Un clic da script sul modulo (detail 0, l’anteprima della libreria) fa una mossa alla volta senza prendere il fuoco, con un cursore disegnato: refuso, correzione, invio, provider completato, finale dimenticato e aggiunto.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PAUSE | script.js | 0.7 | I secondi di silenzio dopo l’ultimo tasto prima che il campo rilegga l’indirizzo. |
FIX | script.js | 0.85 | Quanti secondi impiegano le lettere a correggere un refuso. |
HOP | script.js | 15 | Quanto in alto salta una lettera sopra la vicina quando le due si scambiano, in pixel. |
WAVE | script.js | 1.6 | Quanto è mossa l’ondina sotto una parola, in pixel. |
WAIT | script.js | 1.3 | Quanti secondi dura l’iscrizione nella demo, mentre l’arco gira. |
PROVIDERS | script.js | ['gmail.com', 'yahoo.com', 'outlook.com', …] | I provider che il campo completa e con cui controlla i refusi, dai più comuni. |
ENDINGS | script.js | ['com', 'net', 'org', …] | I finali che il campo conosce, per accorgersi di un .con o di un .cmo. |
Quando usarla
Nell’iscrizione a una newsletter, nella registrazione a un servizio, nella cassa di un negozio: ovunque un indirizzo sbagliato vuol dire una persona persa, perché la conferma non le arriverà mai. Il suggerimento non blocca: chi ha scritto davvero quell’indirizzo può inviarlo lo stesso.
Sul telefono
Il campo prende la larghezza dello schermo (358 pixel su un telefono di 390), resta alto 60 e il pulsante si stringe a 108. Un tocco apre la tastiera per le email, con la @ e il punto, e il tasto Invio dice Send. Il resto grigio del provider si prende toccandolo, senza che la tastiera si chiuda; il suggerimento si tocca come un pulsante. Un indirizzo più lungo del campo scorre, e lettere e segni scorrono con lui. Toccare Subscribe con un refuso appena scoperto mostra il suggerimento invece di inviare subito.
Con il movimento ridotto
Le lettere non saltano e non cadono: l’indirizzo vecchio svanisce sul posto e quello corretto compare. L’ondina e il segno d’inserimento compaiono in dissolvenza, senza tremare né salire; il finale grigio cambia senza girare; il campo non trema; il pulsante non si stringe e l’arco resta fermo; le righe sotto il campo si scambiano in dissolvenza.
Trappole
- Con type email il campo non dice dov’è il cursore (selectionStart è null) e setSelectionRange lancia un errore: il campo è di tipo text con inputmode email, che sul telefono dà la stessa tastiera.
- Le lettere disegnate, messe alla larghezza del testo che le precede, cadevano fino a due pixel più a destra di quelle vere dopo una coppia crenata (la a dopo la W, il punto dopo la y): la crenatura fra due lettere si conta solo misurandole insieme. Ora ogni lettera comincia dove finisce il testo fino a lei compresa, meno la sua larghezza, e combacia al centesimo di pixel.
- Tornando visibile, il testo dell’input faceva una dissolvenza dal trasparente (una transizione sul colore rimasta per lo stato inviato) e per un attimo l’indirizzo appariva grigio: la transizione ora vale solo per lo stato inviato.
- Un indirizzo lungo corretto da uno script restava tagliato in fondo: il browser non sempre scorre fino a un cursore messo da uno script. Lo scorrimento si porta in fondo a mano, e la fila delle lettere disegnate ci scivola insieme.
- Durante il cambio di provider il tasto tab, che seguiva la fine del testo grigio, aspettava che il vecchio finale sparisse e poi saltava; facendolo scivolare passava sopra il testo che usciva. Ora il vecchio finale esce dal flusso e il tasto svanisce e ricompare alla fine nuova.
- Due righe sotto il campo si sovrapponevano mentre una usciva e l’altra entrava: la nuova entra solo quando la vecchia se n’è andata.
- Col dito il pulsante non prende il fuoco: lasciando il campo per inviare, il suggerimento compariva e l’invio partiva subito, col refuso. Ora un suggerimento appena comparso ferma l’invio, e lo lascia passare solo se è rimasto sullo schermo abbastanza da essere letto.
- Lo spinner e la spunta restavano a destra del cerchio: la colonna della griglia del pulsante era larga quanto la scritta Subscribe nascosta. La colonna ora è minmax(0, 1fr).
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 16 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 5 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.
