Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
La lettera tirata dalle maniglie
Nello stile minimal: una S maiuscola disegnata come la disegna un type designer con lo strumento penna. Il pennino mette un punto di ancoraggio alla volta e ne tira fuori le maniglie, che vanno a molla e piegano la curva dal vivo; quando il tracciato si chiude la lettera si riempie, le maniglie rientrano, i punti spariscono e resta la S pulita, che si posa sulla linea di base.
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 letter pulled by its handles</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-scene>
<!-- the stage: the script draws a capital S the way a type designer does with the pen tool, one anchor point at
a time, pulling out its handles; at the end the path closes, fills and the handles go home -->
<svg class="palco" data-stage role="img" aria-label="S" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- the fill pours in from the point where the path closes, and later drains from the top -->
<clipPath id="flood"><circle data-flood cx="0" cy="0" r="0" /></clipPath>
<clipPath id="drain"><rect data-drain x="0" y="0" width="0" height="0" /></clipPath>
</defs>
<!-- the type designer's guides: cap height and baseline -->
<g class="guide" data-guides>
<path class="guida" data-cap />
<path class="guida" data-base />
<text class="etichetta" data-cap-label>Cap height</text>
<text class="etichetta" data-base-label>Baseline</text>
</g>
<g data-glyph>
<g clip-path="url(#drain)">
<path class="pieno" data-fill clip-path="url(#flood)" />
</g>
<path class="tracciato" data-path />
<g data-handles></g>
<g data-anchors></g>
</g>
<!-- the pen tool -->
<g class="penna" data-pen>
<g data-pen-body>
<path class="penna__corpo" d="M0 0 L-5.6 -11.5 L-5.6 -17 L5.6 -17 L5.6 -11.5 Z" />
<path class="penna__taglio" d="M0 0 L0 -8.5" />
<rect class="penna__corpo" x="-5.6" y="-23" width="11.2" height="4.2" />
</g>
</g>
</svg>
<p class="nome" data-name aria-hidden="true"></p>
<p class="nota">Click or tap to draw it 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.
16 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 lettera tirata dalle maniglie» da Animorio e adattala al mio sitoCosa fa
Su una pagina bianca calda si disegnano due righe sottili, l’altezza delle maiuscole e la linea di base, con il loro nome. Entra un piccolo pennino, come il cursore dello strumento penna di un programma di grafica, e comincia a disegnare una S. Va da un punto all’altro del contorno tirandosi dietro la curva; arrivato, fa clic: compare un quadratino blu, il punto di ancoraggio, che si gonfia un attimo e si assesta. Poi il pennino trascina e dal punto escono le due maniglie, due righe sottili con un piccolo rombo in punta, una verso il pennino e l’altra dalla parte opposta. Le maniglie sono a molla: inseguono il pennino, quando lo lascia vanno un pelo oltre e tornano, e la curva fra due punti si piega con loro. Il punto su cui il pennino lavora è pieno, gli altri vuoti. Alle due punte della S gli angoli hanno una maniglia sola: quella che non serve, appena tirata fuori, scatta indietro nel suo punto. Dopo quattordici punti il pennino torna al primo e chiude il tracciato: la lettera si riempie di nero a partire da lì, il pennino se ne va, le maniglie rientrano nei loro punti uno dopo l’altro, i punti spariscono e resta la S pulita e piena. Toccando terra si schiaccia appena e torna su con un elastico, la linea di base cede di qualche pixel, e sotto sale il nome del carattere inventato, Sorrel Grotesk, lettera per lettera, prendendo peso e larghezza. Dopo una pausa il nome scende, la lettera si svuota dall’alto, il tracciato si srotola fino al primo punto, le righe se ne vanno e il pennino ricomincia. Un clic la fa ripartire.
Come funziona
La lettera in numeri
La S è un elenco di quattordici punti in unità di carattere (altezza delle maiuscole 700, y verso il basso): per ognuno la posizione e lo spostamento della maniglia che entra e di quella che esce. I punti stanno sugli estremi, come li mette un type designer, quindi quasi tutte le maniglie sono orizzontali o verticali; i due a metà della spina seguono la sua pendenza e i quattro alle punte sono angoli con una maniglia sola. Il tracciato è una fila di curve di Bézier cubiche: da un punto al successivo, con la maniglia d’uscita del primo e quella d’entrata del secondo.
Il palco in pixel
L’SVG ha il viewBox grande quanto la finestra, così un’unità del disegno è un pixel: righe, quadratini e rombi restano sottili e della stessa misura a ogni grandezza. Una sola scala porta le unità della lettera sullo schermo, scelta perché la S occupi poco più di metà dell’altezza (o due terzi della larghezza sul telefono), e il nome del carattere si mette subito sotto la linea di base.
Le maniglie a molla
Ogni punta di maniglia è una molla smorzata: una forza verso dove dovrebbe stare (SPRING) e un attrito (BOUNCE abbassa lo smorzamento), calcolata a piccoli passi di 1/240 di secondo a ogni fotogramma. Mentre il pennino trascina, la punta d’uscita vuole stare sul pennino e quella d’entrata dalla parte opposta, nella proporzione giusta; quando lo lascia, tutte e due vogliono il loro posto finale. In un angolo la maniglia che non serve vuole tornare a zero e ci scatta, passando un pelo oltre il punto. La curva si disegna sempre con le punte vere, quindi si piega insieme alle molle.
La regia: una timeline sola
Tutto è una timeline GSAP con repeat -1: le righe guida, il pennino che entra, per ogni punto il viaggio (con la curva elastica che va dall’ultimo punto al pennino), il clic, il trascinamento e il rilascio, poi la chiusura, il riempimento, l’uscita e il ritorno a zero. I cambi di stato (quale punto è scelto, quando la maniglia è libera) sono call nella timeline, e un reset a tempo zero rimette tutto al suo posto a ogni giro. Una sola funzione, sul ticker di GSAP, fa avanzare le molle e scrive il palco.
Riempire, ritirare, svuotare
Il riempimento è lo stesso tracciato, ritagliato da un cerchio che cresce dal primo punto (clipPath); per svuotarlo un secondo ritaglio, un rettangolo, scende dall’alto, così il ritorno non è il riempimento al contrario. Quando le maniglie rientrano si accorcia solo il loro disegno, non le punte vere: la curva resta quella. Il tracciato si srotola con stroke-dasharray su pathLength 1, e il nome del carattere sale con font-variation-settings che passano da peso 300 e larghezza 80 a peso 560 e larghezza 100.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'Sorrel Grotesk' | Il nome del carattere scritto sotto la lettera quando è piena. |
DRAW | script.js | 8 | Quanti secondi impiega il pennino a mettere tutti i quattordici punti. |
SPRING | script.js | 230 | Quanto sono rigide le molle delle maniglie: più alto e arrivano prima al loro posto. |
BOUNCE | script.js | 0.6 | Quanto le maniglie vanno oltre e ondeggiano prima di fermarsi (0 = si fermano secche). |
LINE | script.js | 1.25 | Lo spessore del tracciato e delle maniglie, in pixel. |
SPEED | script.js | 1 | La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà. |
REST | script.js | 3 | Quanti secondi la lettera piena resta in mostra. |
LOOP | script.js | true | Se la lettera si svuota e il pennino la ridisegna. Con false resta piena. |
Quando usarla
Per raccontare il disegno fatto a mano: l’apertura del sito di una fonderia di caratteri, di uno studio di grafica o di branding, un portfolio di lettering, la pagina di un corso di type design o di un programma di grafica, un caricamento elegante. Sta bene dove il resto della pagina è sobrio e dove si vuole mostrare il mestiere dietro una forma.
Sul telefono
La stessa animazione con le misure adattate: la S occupa due terzi della larghezza, quadratini e maniglie restano sottili e le righe guida partono dal bordo con il loro margine. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove: la lettera disegnata, con i suoi punti e le sue maniglie già al loro posto, compare in dissolvenza; poi si riempie in dissolvenza, i punti svaniscono e compare il nome. Se l’animazione ricomincia, tutto se ne va in dissolvenza.
Trappole
- La prima versione faceva rientrare le maniglie portando a zero le loro punte vere: la curva perdeva le maniglie e la S diventava un poligono a spigoli proprio mentre si riempiva. Ora le punte restano al loro posto e si accorcia solo il disegno delle maniglie.
- Con le maniglie ai soli estremi la spina della S veniva sottilissima: con maniglie verticali la metà di una curva sta per forza a metà strada in orizzontale, e lo spessore della diagonale non può superare quello delle aste. Servono due punti in mezzo alla spina, con le maniglie inclinate come lei.
- Svuotare la lettera col riempimento al contrario darebbe fotogrammi uguali a quelli dell’entrata, e il video dell’anteprima crederebbe che il giro sia finito: lo svuotamento usa un altro ritaglio, un rettangolo che scende dall’alto.
- Un trattino lungo zero con le punte arrotondate disegna comunque un puntino: righe guida e tracciato, quando sono vuoti, si nascondono del tutto.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,3 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 14 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.
