Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
La riga che si annoda
Scorri dentro l’anteprima
Una sola linea sottile attraversa lo schermo; scendendo si piega e si annoda in un’onda che corre da sinistra a destra, fino a scrivere «hello» in corsivo, con un tratto solo. Poi i nodi si sciolgono, prima i più piccoli, la linea si raddrizza, si accorcia e diventa la riga sotto il titolo, che sale fuori da lei; atterrando vibra come una corda pizzicata. Stile minimal.
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 line that ties itself</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>
<!-- a made-up identity studio, Linework. The stage sticks while you scroll: one thin line crosses the screen, bends
and ties itself into the word "hello" in joined-up handwriting, then lets go of its loops, straightens out and
becomes the line under the title. The line is drawn by the script -->
<main>
<section class="corsa" data-corsa>
<div class="palco" data-palco>
<svg class="tela" data-tela aria-hidden="true">
<path class="filo" data-filo d="M0 0"/>
</svg>
<header class="testa">
<a class="marchio" href="#" data-marchio data-entra-testa>
<svg class="marchio__segno" viewBox="0 0 34 20" aria-hidden="true">
<path data-marchio-filo d="M1 15h7c4 0 6-3 7-7s-1-6-3-5-2 5 1 9 7 3 9 3h11"/>
</svg>
<span class="marchio__nome">Linework</span>
</a>
<a class="pillola" href="#" data-pillola data-entra-testa><span class="pillola__fondo" data-pillola-fondo></span><span class="pillola__testo">Say hello</span></a>
</header>
<p class="nota" data-entra-testa><span data-nota>Brand identities, drawn in a single stroke</span></p>
<h1 class="titolo" data-titolo aria-label="Hello.">Hello.</h1>
<span class="titolo titolo--misura" data-misura aria-hidden="true">Hello.</span>
<p class="sotto" data-sotto>Every identity we make starts as one line.</p>
<p class="cenno" data-entra-testa><span class="cenno__dentro" data-cenno><span>Scroll</span><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 3v13M4.5 10.5 10 16l5.5-5.5"/></svg></span></p>
</div>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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 «La riga che si annoda» da Animorio e adattala al mio sitoCosa fa
La pagina di uno studio inventato che disegna marchi, Linework: carta color avorio, il nome in alto a sinistra con un piccolo occhiello rosso, la pillola Say hello a destra e, in mezzo, nient’altro che una linea rossa sottile da un bordo all’altro dello schermo. Arriva disegnandosi da sinistra e si assesta con una piccola onda, come un filo appena teso. Scorrendo il palco resta fermo e un tratto della linea comincia a piegarsi: è un’onda che corre da sinistra a destra, e dove è passata la linea è annodata nella parola hello, scritta in corsivo con un tratto solo: l’occhiello alto dell’h, la gobba, l’occhiello piccolo della e, le due l, la o con il suo ricciolo e l’uscita che torna sulla riga. Ogni occhiello si chiude un poco di troppo e si riassesta; davanti all’onda il resto della linea resta teso verso il bordo destro e si sposta come un filo tirato. Finita la parola, la scritta resta un attimo. Poi si scioglie: le due estremità della linea scivolano verso la parola, gli occhielli più piccoli si sciolgono per primi, poi le lettere, poi resta un’onda morbida che si appiana. La linea si raddrizza, si accorcia e si sposta sotto il punto dove nascerà il titolo, e intanto si fa più spessa, perché l’inchiostro è sempre quello. Allora il titolo Hello. sale lettera per lettera fuori dalla riga, stretto e leggero, e si allarga fino al nero pieno con un piccolo rimbalzo; quando la riga arriva in fondo vibra come una corda pizzicata e le lettere fanno un saltino dal centro verso i lati. Sotto compare la frase dello studio. Col mouse ogni lettera salta e pizzica la riga, il marchio riscrive il suo occhiello e la pillola si gonfia. Risalendo, tutto torna indietro: la riga si riannoda nella parola e la parola si scioglie nella linea dritta.
Come funziona
La parola come un tratto solo
La parola hello è un elenco di punti in altezze di lettera (la riga di base a 0, le lettere piccole alte 1, gli occhielli 2,45), inclinati con x meno y per SLANT. Davanti e dietro ci sono due tratti dritti fino ai bordi dello schermo, e una spline Catmull-Rom centripeta passa per tutti i punti: la centripeta non fa riccioli e punte dove i punti sono fitti, come negli occhielli. Il tracciato si ricampiona ogni 2 pixel, così ogni passo è lungo uguale.
Piegarsi è curvatura
Per ogni passo lo script conosce la sua direzione, srotolata (senza i salti di 2π), quindi quanto gira la linea fra un passo e l’altro è una semplice differenza. La linea si ricostruisce ogni fotogramma dal bordo sinistro sommando quelle svolte: dietro l’onda le prende tutte e la parola è esatta, dentro l’onda solo una parte (una smoothstep più un piccolo eccesso, così l’occhiello si chiude un poco di troppo e si riassesta), davanti all’onda niente. Il resto della linea è una curva di Bézier dal punto dove finisce l’onda, nella sua direzione, fino al bordo destro: il filo tirato.
Sciogliere è un flusso di calore
Per raddrizzarla non si ruota niente: la parola diventa una corda dritta fra il primo e l’ultimo punto più uno scostamento, scritto come somma di seni (una trasformata in seni discreta). Il flusso di calore spegne ogni seno con exp(−λ·τ), e i seni fitti hanno λ grande: per questo si sciolgono prima i riccioli piccoli, poi le lettere, poi l’onda lunga. τ cresce in modo esponenziale con lo scroll, così ogni grandezza di dettaglio ha lo stesso tratto di pagina. Intanto le estremità della corda vanno agli estremi del titolo e i due tratti laterali si ritirano.
Il titolo che esce dalla riga
Il titolo ha una copia invisibile con dentro un elemento alto zero sulla riga di base: da lì lo script legge dove cade la base e quanto è largo, e mette la riga un decimo di corpo più sotto. Il titolo è tagliato con clip-path appena sopra la riga, quindi le lettere, che salgono da yPercent 118 con back.out, sembrano uscire dalla linea; intanto font-variation-settings le porta da wght 360 e wdth 75 a 620 e 100. Lo spessore della riga cresce di INK volte mentre si accorcia.
La regia
Tutto è una timeline sola con ScrollTrigger e scrub, su un palco sticky alto 100lvh e Lenis per lo scorrimento morbido: prima l’onda della scrittura, una sosta, lo scioglimento, il titolo e la frase. La linea si ridisegna nel ticker di GSAP solo quando qualcosa è cambiato. Quando lo scioglimento arriva in fondo, scendendo, parte una sola volta un tween a tempo con elastic.out che fa vibrare la riga come una corda (lo scostamento è un seno lungo quanto la riga) e fa saltare le lettere dal centro.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TITLE | script.js | 'Hello.' | Il titolo che sale fuori dalla riga alla fine; la riga diventa larga quanto lui. |
WORD_SIZE | script.js | 0.62 | Quanto è larga la parola scritta a mano, in parte dello schermo (un po’ di più sul telefono); non diventa mai più alta di un terzo dello schermo. |
LINE | script.js | 1.6 | Lo spessore della linea, in pixel. |
SLANT | script.js | 0.22 | Quanto pende la scrittura verso destra (0 = dritta). |
BEND | script.js | 1.4 | Quanto è lungo il tratto di linea che si sta piegando, in altezze di lettera: di più è più morbido, di meno è un nodo secco. |
SPRING | script.js | 1 | Quanto ogni occhiello si chiude di troppo prima di riassestarsi (0 = niente). |
INK | script.js | 2.2 | Quanto si ingrossa la linea mentre si accorcia nella riga del titolo (1 = uguale). |
TWANG | script.js | 1 | Quanto vibra la riga quando atterra e sotto il mouse (0 = ferma). |
RIDE | script.js | 1 | Quanto scroll serve per tutto: 2 è il doppio. |
--filo | style.css | #ff4b1f | Il colore della linea. |
Quando usarla
Per l’apertura di uno studio, di un designer o di un marchio che vuole dire «tutto parte da un gesto»: un saluto scritto a mano che diventa il titolo composto. Va bene anche in cima a una pagina di contatti o di presentazione, o per passare da una storia a un titolo.
Sul telefono
Uguale: la parola è larga quasi quanto lo schermo, la linea è ricampionata più fitta, il titolo è grande un quarto dello schermo e sale allo stesso modo. Un tocco sul titolo pizzica la riga.
Con il movimento ridotto
Niente si piega né vibra e Lenis resta spento: lo scroll passa da tre soste, la linea dritta, la parola scritta e il titolo con la sua riga, e fra una sosta e l’altra il disegno cambia con una dissolvenza.
Trappole
- Mescolare le direzioni (la linea dritta con angolo 0 e la parola con angoli che arrivano a −12π dopo tutti gli occhielli) fa girare la linea su se stessa: dentro l’onda si mescolano le svolte, non gli angoli, e davanti all’onda la linea è una curva di Bézier verso il bordo destro.
- Anche per sciogliere la parola rilassare le svolte non va: con sei giri di troppo il resto della linea frulla tutto intorno. Il flusso di calore sui punti, con le estremità fisse, la porta alla corda dritta senza girare mai.
- Un τ che cresce in modo lineare scioglie tutti i dettagli nel primo decimo dello scroll e poi lascia un’onda che non finisce più: cresce in modo esponenziale.
- Le lettere del titolo che salivano mentre la linea era ancora un arco sembravano blocchi neri tagliati: il titolo parte solo quando la riga è dritta e al suo posto.
- La larghezza del titolo cambia mentre font-variation-settings lo allarga: la riga si misura su una copia invisibile già al peso e alla larghezza finali.
- Il tracciato con la spline uniforme fa riccioli e punte negli occhielli stretti: serve la parametrizzazione centripeta.
Librerie
GSAP 3.15.0, ScrollTrigger 3.15.0, Lenis 1.3.26, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,8 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 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.
