La riga composta a battuta

Testo, FisicaGSAPMediaPeso compresso: Demo 9,6 KBGSAP 28 KBGratisScarica lo zip

Una frase composta come nel compositoio di un tipografo, nello stile minimal: le lettere entrano da destra una alla volta a testa in giù, si girano in volo, si posano e scorrono a battuta contro la precedente. Negli spazi fra le parole ci sono sottili molle rosse; alla fine le molle si allargano una dopo l’altra e la riga si giustifica esattamente da un bordo all’altro.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The line set by hand</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bodoni-moda@5.3.0/opsz.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage role="button" tabindex="0" aria-label="Good type takes time. Click to set the line again.">
    <!-- the composing stick seen from above: one hairline bracket (the knee on the left, the clamp on the right),
         the letters and the springs in the word spaces. One SVG, built by the script. -->
    <svg class="scene" data-scene aria-hidden="true">
      <g data-world>
        <path class="stick" data-stick d="" pathLength="1" />
        <g data-springs></g>
        <g data-letters></g>
      </g>
    </svg>

    <h1 class="sr-only" data-text>Good type takes time</h1>

    <p class="readout" data-readout aria-hidden="true">
      <span class="readout__label">Word space</span>
      <span class="readout__value" data-readout-value>0.25 em</span>
    </p>

    <p class="hint" data-hint aria-hidden="true">Click to set 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.

15 valori da cambiare

Apri il Playground

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 riga composta a battuta» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una carta color avorio una riga sottile si disegna a forma di staffa: il fianco a sinistra, il fondo, il fianco a destra. È il compositoio visto dall’alto, e sotto, a destra, una piccola scritta dice quanto è largo lo spazio fra le parole (Word space 0.25 em). Le lettere di «Good type takes time», in un Bodoni sottile, entrano da destra una alla volta a testa in giù, girano su sé stesse mentre scendono, si posano sul fondo poco più in là del loro posto e una spinta le porta a battuta contro la lettera prima. Nel colpo la lettera si schiaccia di un soffio, si inclina e si raddrizza con una molla, prende peso per un attimo; le lettere della stessa parola sentono il colpo e arretrano di un pixel. La prima lettera batte contro il fianco sinistro, che trema appena. Finita una parola, nello spazio cade una molla rossa compressa, e la prima lettera della parola dopo ci batte contro: la molla cede e la respinge. Quando tutte le lettere sono a posto, a destra resta un vuoto: le molle si allargano una dopo l’altra, le parole si allontanano e l’ultima arriva al fianco destro, lo spinge in fuori di qualche pixel e torna. Il numero sotto conta fino a 0.90 em. Poi il fianco destro serra la riga con un colpetto, la riga si stringe e un’onda di peso corre da sinistra a destra. Dopo una pausa le lettere si alzano e svaniscono, le molle si allentano e la riga si ricompone da capo. Puntando una lettera col mouse quella salta, si capovolge in aria e ricade al suo posto; un clic (o un tocco) ricomincia la composizione.

Come funziona

Le lettere a battuta, misurate

Ogni lettera è un text SVG con text-anchor middle: il suo punto d’origine è il centro del suo avanzamento, sulla linea di base. Gli avanzamenti si misurano una volta con measureText su un canvas nello stesso carattere e allo stesso peso, con la crenatura spenta sia nel canvas (fontKerning) sia nell’SVG (font-kerning: none): sommati, mettono ogni lettera esattamente a contatto con la precedente, come i caratteri di piombo nel compositoio. Lo spazio fra le parole è largo quanto lo spazio vero del carattere.

Il colpo è il metronomo

Le lettere non partono a tempo fisso: è il momento del colpo a battere il ritmo, una lettera ogni PACE secondi. Il volo di ogni lettera si calcola all’indietro da lì: chi arriva da lontano parte prima, chi deve fare poca strada parte dopo. Così l’ordine dei colpi non si rompe mai. Il volo ha due tempi: l’arco (in orizzontale power2.out, in verticale power2.in, la rotazione da 180 a 0 gradi) e la spinta finale, con power2.in, che accelera fino al colpo.

Il colpo e chi lo sente

Al colpo la lettera si schiaccia in orizzontale per 45 millesimi di secondo e torna con elastic.out, si inclina di qualche grado e si raddrizza, e il peso sale di 140 per poi tornare. Le lettere della stessa parola arretrano di un pixel o due, di più quelle vicine al colpo, e tornano con una molla. La prima lettera di una parola batte contro la molla dello spazio, che si comprime di un quarto e la respinge; la prima della riga fa tremare il fianco del compositoio.

Le molle che giustificano

Ogni spazio è un numero k da 0 a 1: la sua larghezza è lo spazio vero più k volte la sua parte del vuoto rimasto. Le parole dopo uno spazio si spostano della somma delle larghezze prima di loro, così allargare una molla sposta tutto quello che le sta a destra. Le k vanno a 1 una dopo l’altra con una molla smorzata scritta come funzione di easing (un coseno che si spegne, corretto per finire esattamente su 1): l’elastic di GSAP passava il bordo di un terzo. La molla disegnata è una spezzata in SVG, più bassa quando si allarga.

Un orologio solo

Tutto quello che si muove è un numero in un oggetto: GSAP lo anima dentro una timeline per giro, e una sola funzione sul ticker di GSAP lo trasforma in transform, pesi, tracciati e opacità, scrivendo nel DOM solo quello che cambia. Il fianco destro del compositoio sta sempre dove finisce la riga più lunga, se la riga lo supera: per questo l’ultima parola lo spinge fuori. Sul telefono, se la frase su una riga resterebbe troppo piccola, si spezza in due o tre righe con almeno due parole ciascuna.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`TEXT`	script.js	`'Good type takes time'`	La frase composta nel compositoio, lettera per lettera (fino a 40 caratteri). Servono almeno due parole: sono gli spazi a giustificare la riga.
`MEASURE`	script.js	`1.2`	Quanto il compositoio è più largo della riga composta stretta: 1.05 lascia spazi quasi normali, 1.5 molle lunghe e parole lontane.
`PACE`	script.js	`0.13`	I secondi fra il colpo di una lettera e il successivo: più basso, una raffica; più alto, una lettera alla volta con calma.
`SPRING`	script.js	`1`	Quanto sono elastiche le molle e i colpi: 0.3 si fermano secchi, 2 oscillano più a lungo e spingono più fuori il fianco destro.
`WEIGHT`	script.js	`540`	Il peso delle lettere a posto, da 400 a 900; in volo sono a 400, il più sottile del carattere.
`HOLD`	script.js	`2.4`	Quanti secondi resta la riga giustificata prima che il compositoio si svuoti e si ricominci.
`LOOP`	script.js	`true`	Se la riga si ricompone da capo all’infinito. Con false resta ferma, giustificata.

Provali nel Playground

Quando usarla

Per il titolo d’apertura di un sito che parla di cura e di mestiere: una tipografia, una legatoria, una fonderia di caratteri, uno studio grafico, una rivista, una casa editrice, un artigiano. Funziona con frasi brevi di tre o quattro parole: le molle negli spazi dicono la cosa da sole.

Sul telefono

La stessa animazione: se la frase su una riga sola verrebbe troppo piccola, si spezza in due righe (Good type, takes time) dentro lo stesso compositoio, e ogni riga si compone e si giustifica prima della successiva. Un tocco ricomincia la composizione.

Con il movimento ridotto

Niente vola e niente rimbalza: il compositoio, la riga già giustificata con le sue molle e la scritta compaiono in dissolvenza, ferme. Il clic fa svanire la riga e la fa ricomparire; niente ripetizione e niente salto delle lettere al passaggio del puntatore.

Trappole

Con le partenze a intervalli fissi le lettere vicine al fianco destro, che fanno poca strada, arriverebbero prima di quelle partite da lontano e passerebbero loro attraverso. Il tempo fisso va dato al colpo, e la partenza si calcola all’indietro dalla lunghezza del volo.
L’elastic.out di GSAP passa l’arrivo di 2 alla −5·periodo: con un periodo di 0,3 è più di un terzo, e l’ultima parola uscirebbe dal compositoio di decine di pixel. Le molle degli spazi usano una funzione di easing propria, un coseno smorzato corretto per finire esattamente su 1, che passa l’arrivo di circa un decimo.
Una lettera che vola verso un punto fisso salterebbe di qualche pixel all’arrivo se la molla prima di lei sta ancora oscillando per il colpo della lettera precedente. Il suo bersaglio in volo segue lo stesso spostamento delle lettere già a posto, così il passaggio dal volo alla riga è continuo.
Il salto al passaggio del puntatore e lo svuotamento del compositoio animerebbero le stesse proprietà (y, peso) e si pesterebbero i piedi se il puntatore passa proprio allo scadere della pausa. Il salto usa numeri suoi (hy, hr, hw, hq) che si sommano a quelli della timeline.
Il salto al passaggio del puntatore funziona solo a riga ferma: durante la composizione le lettere sono in mano alla timeline. Una prova automatica che passa sulle lettere prima della pausa non vede niente, e non è un errore.

Librerie

GSAP 3.15.0, Bodoni Moda (font variabile, assi opsz e wght) 5.3.0.

Compressi con gzip, i tre file della demo pesano 9,6 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.