Il campo della password
Moduli, Testo, SVG
NuovaGratis
Tutti i componenti
Il modulo della newsletter con la chiocciola che si disegna
Nello stile minimal, su bianco: l’iscrizione alla newsletter di una piccola stamperia, un campo email su una riga sottile e una pillola Subscribe. Accanto al campo una grande chiocciola aspetta come un’ombra chiara e, mentre scrivi, si disegna con un tratto solo: le lettere prima della @ tracciano l’occhiello, quelle del dominio la lunga coda che gli gira intorno, sempre un attimo dopo di te. Un indirizzo vero chiude la coda in vermiglio; Subscribe fa fare alla chiocciola un giro su sé stessa e al posto dell’indirizzo arriva il grazie, lettera per lettera. Un indirizzo sbagliato srotola un poco la coda e la chiocciola fa no.
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 newsletter form with the at sign that draws itself</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 newsletter sign-up of a small letter press, on white. While you type the address a large at sign draws
itself with one thin line: the name before the @ draws the inner bowl, the domain draws the long tail around it.
A real address closes the line in vermilion; Subscribe spins it once and the field becomes the thank you -->
<form class="panel" data-panel novalidate>
<p class="brand" data-brand></p>
<h1 class="title" data-title></h1>
<p class="sub" data-sub></p>
<div class="row" data-row>
<span class="mark" aria-hidden="true" data-mark>
<svg viewBox="0 0 48 48" class="mark__svg">
<path class="mark__ghost" d="M31 24 A7 7 0 1 1 17 24 A7 7 0 1 1 31 24 Z" />
<path class="mark__ghost" d="M31 17 L31 28 C31 32.5 37.5 32.5 39 27 C41.5 16.5 34 7.5 24 7.5 C14.8 7.5 7.5 14.8 7.5 24 C7.5 33.2 14.8 40.5 24 40.5 C28 40.5 31.5 39.2 34.5 37" />
<path class="mark__ink" data-bowl d="M31 24 A7 7 0 1 1 17 24 A7 7 0 1 1 31 24 Z" />
<path class="mark__ink" data-tail d="M31 17 L31 28 C31 32.5 37.5 32.5 39 27 C41.5 16.5 34 7.5 24 7.5 C14.8 7.5 7.5 14.8 7.5 24 C7.5 33.2 14.8 40.5 24 40.5 C28 40.5 31.5 39.2 34.5 37" />
</svg>
</span>
<label class="field" data-field>
<span class="visually-hidden">Email address</span>
<input class="field__input" data-input type="email" inputmode="email" autocomplete="email" spellcheck="false" placeholder="you@example.com">
<span class="field__line" aria-hidden="true"><span class="field__fill" data-fill></span></span>
</label>
<div class="done" data-done aria-hidden="true">
<p class="done__title" data-done-title></p>
<p class="done__sub" data-done-sub></p>
</div>
</div>
<button class="go" type="submit" data-go><span class="go__bg" aria-hidden="true"></span><span class="go__text" data-go-text></span></button>
<p class="note" data-note aria-live="polite"></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.
20 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 modulo della newsletter con la chiocciola che si disegna» da Animorio e adattala al mio sitoCosa fa
Su bianco, in una colonna stretta: il nome piccolo della stamperia, Larkhill Press, il titolo The Sunday letter e una riga grigia; sotto, a sinistra, una grande chiocciola disegnata solo come un’ombra chiara e, accanto, il campo email su una riga sottile, poi la pillola nera Subscribe. Scrivendo l’indirizzo la chiocciola si ripassa a inchiostro con un tratto di un pixel e mezzo: ogni lettera prima della @ ne disegna un pezzo dell’occhiello, la @ lo chiude, ogni lettera del dominio allunga la coda che gira intorno; il tratto arriva sempre un attimo dopo, come una penna che insegue, e la riga del campo si riempie con lui. Quando l’indirizzo è vero la coda si chiude, il tratto e la riga diventano vermigli e la chiocciola oscilla di qualche grado e si posa. Subscribe la fa girare una volta su sé stessa, l’indirizzo sale via e al suo posto arriva You’re on the list. lettera per lettera, con la riga sotto; dopo qualche secondo il modulo torna vuoto. Un indirizzo senza dominio scrive l’errore in vermiglio, la coda si srotola un poco e torna, la chiocciola trema da destra a sinistra. La pillola allarga la scritta sull’asse wdth al passaggio e cede alla pressione. Nell’anteprima una mano finta scrive ada@larkhill, prova, finisce l’indirizzo e si iscrive.
Come funziona
Una chiocciola in due tratti
La chiocciola è un SVG con due tracciati: l’occhiello, un cerchio, e la coda, che scende lungo l’asta, gira a destra e si avvolge intorno. Sotto, gli stessi due tracciati in grigio chiarissimo fanno l’ombra; sopra, quelli a inchiostro hanno stroke-dasharray uguale alla loro lunghezza, misurata con getTotalLength, e si scoprono abbassando lo stroke-dashoffset.
Le lettere disegnano
A ogni lettera lo script conta i caratteri prima della @, che valgono l’occhiello fino a LOCAL_LEN, e quelli del dominio, che valgono la coda fino al 90%; solo un indirizzo vero la porta al 100%. GSAP insegue quei numeri in DRAW secondi con power3.out, così il tratto arriva sempre un attimo dopo il dito.
Chiuso, giusto, sbagliato
Quando l’indirizzo diventa vero il colore del tratto e della riga passa al vermiglio e la chiocciola parte da meno 9 gradi e si posa con elastic.out. Se l’indirizzo è sbagliato la coda torna indietro di un 38% e poi si riprende, la chiocciola fa un tremolio a fotogrammi e sotto compare l’errore.
Il grazie
Subscribe fa girare la chiocciola di 360 gradi in SPIN secondi con power3.inOut, l’indirizzo sale di 10 pixel e si spegne, e al suo posto le lettere del grazie, spezzate una per una, salgono di 12 pixel da una piccola rotazione con back.out(2.2), a 25 millesimi l’una dall’altra.
Accessibile
È un form vero con l’input email, l’etichetta nascosta e una riga aria-live per l’errore. La mano finta dell’anteprima si ferma appena si tocca o si scrive davvero. Col movimento ridotto il tratto si disegna senza rincorsa e il grazie compare in dissolvenza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BRAND | script.js | Larkhill Press | Il nome piccolo della stamperia sopra il titolo. |
TITLE | script.js | The Sunday letter | Il titolo del modulo. |
SUB | script.js | One short letter a week, no noise. | La riga sotto il titolo. |
BUTTON | script.js | Subscribe | La scritta della pillola. |
DONE_TITLE | script.js | You’re on the list. | Il grazie a iscrizione fatta. |
DONE_SUB | script.js | The first letter comes on Sunday. | La riga sotto il grazie. |
ERROR | script.js | That address needs a domain. | L’errore sotto il campo. |
LOCAL_LEN | script.js | 6 | Quante lettere prima della @ disegnano tutto l’occhiello. |
DOMAIN_LEN | script.js | 9 | Quante lettere del dominio disegnano quasi tutta la coda. |
DRAW | script.js | 0.55 | I secondi che il tratto mette per raggiungere quello che scrivi. |
SPIN | script.js | 0.95 | I secondi del giro della chiocciola all’iscrizione. |
RESET | script.js | 3.4 | I secondi prima che il modulo torni vuoto. |
Quando usarla
Per l’iscrizione alla newsletter di una rivista, di una stamperia, di un blog o di un negozio: un campo solo, con un gesto che dice «sto scrivendo un indirizzo» senza un’icona in più.
Sul telefono
La colonna si stringe fino a 16 pixel dai bordi e la chiocciola, il titolo e il campo si misurano anche sull’altezza dello schermo, così il modulo sta intero nella casella bassa. Il campo ha inputmode email, quindi la tastiera del telefono mostra la @.
Con il movimento ridotto
Il tratto si disegna senza rincorsa e la chiocciola non gira né trema; il grazie compare in dissolvenza.
Trappole
- La lunghezza dei tracciati va misurata con getTotalLength e messa sia nel dasharray sia nell’offset: con un numero a occhio il tratto si ferma a metà o compare tutto subito.
- Il tratto deve arrivare dopo il dito, non insieme: senza la rincorsa di DRAW secondi ogni lettera fa uno scatto e la penna non si sente.
- Il giro dell’iscrizione è di 360 gradi e poi la rotazione torna a 0 senza tween, altrimenti la volta dopo la chiocciola gira al contrario.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,6 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 24 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.
