Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
La firma che diventa stampatello
Una firma corsiva in blu si scrive veloce, col ritmo di una mano vera; poi le sue curve si raddrizzano, lettera dopo lettera, e diventano lo stesso nome in stampatello pulito, nero, che prende peso atterrando. Lo svolazzo finale si stende sotto come il rigo di un contratto. Stile minimal; nel Playground ci metti il tuo nome.
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 signature in block capitals</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena" data-scena>
<!-- the stage: the script writes the signature here, then straightens it into the same name in block capitals -->
<svg class="palco" data-palco role="img" aria-label="Nora Hale" xmlns="http://www.w3.org/2000/svg">
<g data-inchiostro></g>
</svg>
<!-- the caption under the line, as on a form -->
<p class="didascalia" data-didascalia>Name in block capitals</p>
<p class="nota">Click or tap to sign again</p>
</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 «La firma che diventa stampatello» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco caldo e vuoto una penna blu firma Nora Hale: entra da sotto a sinistra, corre sui tratti dritti e rallenta nelle curve strette, dove l’inchiostro resta più spesso, alza la penna fra nome e cognome e alla fine, dopo l’ultima lettera, scende e torna indietro con uno svolazzo che passa sotto tutta la firma e si assottiglia in una coda. Ogni lettera della firma è disegnata sullo scheletro della sua maiuscola, inclinata, stretta e un po’ tremante. Un attimo dopo le curve cominciano a raddrizzarsi, una lettera dopo l’altra da sinistra: ogni tratto si stende nella direzione in cui la penna l’aveva scritto, il blu diventa nero, la lettera sale sulla riga e arriva in stampatello, sottile; appena è al suo posto prende peso con un piccolo eccesso, cede di un pixel e si assesta, e le vicine sentono il colpo. I tratti che univano una lettera all’altra si assottigliano e spariscono. Per ultimo lo svolazzo si raddrizza in una riga blu sottile sotto il nome e si allunga oltre le due estremità, come il rigo di un modulo, e sotto compare la didascalia Name in block capitals, che entra stretta e si allarga. Dopo qualche secondo il nome si cancella da sinistra, il rigo con lui, e la penna firma di nuovo, ogni volta un po’ diversa. Un clic fa firmare subito una firma nuova.
Come funziona
Le maiuscole come tratti di penna
Ogni maiuscola è un elenco di tratti nell’ordine in cui li scriverebbe una penna, in un riquadro alto 1: punti [x, y] e archi ['a', cx, cy, rx, ry, da, a]. Un tratto che comincia con 'late' si scrive dopo tutta la firma, come la sbarra della T. Per lo stampatello gli archi si spezzano ogni 4 gradi; per la firma ogni 45, perché la penna passi solo per gli angoli.
La firma dallo stesso scheletro
Per la firma gli stessi punti si inclinano (SLANT), si stringono (le lettere dopo la prima sono basse la metà) e tremano un poco, con un numero a caso che dipende da un seme: ogni giro dà una firma diversa. Una spline di Catmull-Rom centripeta passa per tutti i punti di una parola, con un tratto d’entrata da sotto e, alla fine del nome, lo svolazzo. Così ogni pezzo della firma corrisponde a un tratto della maiuscola: firma e stampatello si ricampionano con lo stesso numero di punti, distribuiti per lunghezza.
Il ritmo della mano
Lungo ogni parola si misura quanto gira la linea a ogni passo: la penna va veloce dove è dritta e rallenta dove gira, con una partenza più lenta. Ogni punto ha così il suo istante e il suo spessore (dove la penna rallenta l’inchiostro è più spesso, e si assottiglia alle due estremità); i tempi si scalano perché tutta la firma duri SIGN secondi. Lo spessore che cambia lungo la linea si fa con tanti path corti, tre punti l’uno, ognuno col suo stroke-width e le punte tonde: messi in fila sembrano una linea sola.
Le curve che si raddrizzano
Ogni lettera ha un numero m da 0 a 1: ogni punto va dalla firma allo stampatello con power3.inOut, ma con un ritardo che cresce lungo il tratto, così il raddrizzamento corre nella direzione della penna. Il colore passa dal blu della penna al nero. I tratti di unione hanno un capo su ogni lettera e ognuno segue la sua, poi si assottigliano fino a sparire. Appena arriva, la lettera prende peso (da sottile a WEIGHT, con back.out) e cede: un’oscillazione smorzata di un paio di pixel, che arriva più piccola anche alle due vicine.
Il rigo e la regia
I punti dello svolazzo vanno su una riga dritta sotto il nome, dalla sua estremità destra alla sinistra; poi la riga si allunga oltre il nome con back.out, e la didascalia entra con l’asse wdth di Instrument Sans da 75 a 100. Tutto è una timeline GSAP sola, firma, raddrizzamento, rigo, pausa e cancellatura, che a ogni fotogramma ridisegna il palco e scrive un attributo solo se è cambiato; alla fine ricomincia con un seme nuovo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'Nora Hale' | Il nome che si firma e poi si scrive in stampatello. Lettere dalla A alla Z (gli accenti si tolgono), più trattino, apostrofo e punto. |
SIGN | script.js | 2.2 | Quanti secondi impiega la penna a firmare tutto il nome. |
SLANT | script.js | 0.32 | Quanto pende a destra la firma (0 = dritta). |
WEIGHT | script.js | 0.1 | Quanto diventano grasse le maiuscole, come parte della loro altezza. |
SPRING | script.js | 1 | Quanto cede ogni maiuscola atterrando e quanto il rigo va oltre prima di fermarsi (0 = niente). |
REST | script.js | 2.8 | Quanti secondi il nome in stampatello resta in mostra prima di cancellarsi. |
SPEED | script.js | 1 | La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà. |
LOOP | script.js | true | Se il nome si cancella e la penna firma di nuovo, ogni volta un po’ diversa. Con false resta in stampatello. |
Quando usarla
Dove c’è una firma o un nome da presentare: la pagina «chi sono» di un portfolio, la firma in fondo a una lettera o a un articolo, la conferma di un contratto o di un ordine firmato, un abbonamento, l’apertura del sito di uno studio legale, di un notaio, di un’agenzia, una prenotazione confermata. Sta bene dove il resto è sobrio.
Sul telefono
La stessa animazione con le misure adattate: il nome è largo quasi quanto lo schermo, la firma e le maiuscole rimpiccioliscono insieme e lo spessore resta in proporzione. Un tocco fa firmare di nuovo.
Con il movimento ridotto
Niente si muove: la firma intera compare in dissolvenza, poi se ne va e al suo posto compare il nome in stampatello col suo rigo e la didascalia. Se ricomincia, tutto se ne va in dissolvenza.
Trappole
- Togliere gli accenti dal nome vuole un’espressione regolare con i caratteri combinanti: scritta con le sequenze barra-u, passando per gli strumenti è diventata i caratteri veri, invisibili nel file. L’espressione si costruisce con String.fromCharCode.
- Un tratto di unione fra due lettere che si raddrizzano in momenti diversi, mosso con il tempo di una sola, si staccava dall’altra: ogni suo punto usa un tempo fra quello della lettera di sinistra e quello della lettera di destra, così i due capi restano attaccati.
- Un path lungo zero con le punte tonde disegna comunque un puntino: i pezzi non ancora scritti o già cancellati hanno il d vuoto, e i tratti di unione quasi spariti si tolgono del tutto.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,9 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 15 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.
