Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
La frase lungo la curva
Scorri dentro l’anteprima
Animazione di scroll nello stile minimal: una curva sottile attraversa lo schermo e una frase ci corre sopra spinta dallo scorrimento, gonfiandosi nelle valli e assottigliandosi sulle creste. Alla fine la curva si distende in una riga dritta, la frase ci si posa come un titolo e cade un punto rosso.
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>Meander</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz-italic.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a made-up magazine of slow travel, Meander. The stage sticks while you scroll: one thin curve crosses it from
edge to edge and a sentence rides along it, swelling in the valleys and thinning on the crests. At the end the
curve relaxes into a straight rule, the sentence settles on it like a headline and a red full stop drops in.
The curve and the letters are drawn by the script -->
<main>
<section class="corsa" data-corsa>
<div class="palco" data-palco>
<header class="testa">
<a class="marchio" href="#" data-entra>Meander</a>
<p class="testa__nota" data-entra>A magazine of slow travel</p>
</header>
<svg class="tela" data-tela aria-hidden="true">
<path class="curva" data-curva d="M0 0"/>
<g class="lettere" data-lettere></g>
<circle class="punto" data-punto r="4" cx="-99" cy="-99"/>
</svg>
<h1 class="solo-lettori" data-titolo>Take the long way round.</h1>
<p class="sotto" data-sotto>The autumn issue: twelve journeys on foot, by boat and by night train.</p>
<p class="cenno" data-entra><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></p>
</div>
</section>
<footer class="piede">
<p>Meander is printed four times a year, on uncoated paper, in a small town by the sea.</p>
</footer>
</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.
21 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 frase lungo la curva» da Animorio e adattala al mio sitoCosa fa
Una pagina bianco caldo con in alto il nome di una rivista di viaggi lenti inventata, Meander. Aprendo la pagina una curva sottile si disegna da sinistra, un’onda morbida che attraversa lo schermo da un bordo all’altro, e da destra arriva scivolandoci sopra la frase «Take the long way round»: ogni lettera sta sulla curva e gira con lei. Scorrendo il palco resta fermo e la frase corre lungo la curva verso sinistra; le lettere che passano in una valle si gonfiano, più nere e più larghe, quelle sulle creste si assottigliano fino a un filo, e intanto l’onda scivola piano sotto la frase, così il peso corre fra le parole. Poi la curva si distende: le onde si abbassano finché è una riga dritta, che va appena oltre e torna, di un pixel. La frase si stacca dalla riga e ci resta sopra come un titolo, la riga ritira i suoi capi sotto le parole, e un punto rosso cade dall’alto alla fine della frase: atterrando si schiaccia appena e le lettere vicine sentono il colpo. Sotto compare una riga piccola sul numero d’autunno. Tornando su, il punto risale e la frase riprende la sua onda.
Come funziona
Una lettera per elemento
La frase è fatta di un text di SVG per lettera, non di un textPath: così ogni lettera può avere il suo peso e la sua grandezza ottica, che textPath non sa cambiare lettera per lettera. Gli avanzamenti si misurano una volta sola a 100 pixel, per i due estremi del carattere, come differenza fra la frase tagliata dopo la lettera e prima (con una n in fondo, perché lo spazio finale non venga tolto): così restano anche le coppie di crenatura come Ta e wa. In mezzo si interpola.
La curva e la sua lunghezza
La curva è una sinusoide calcolata in 360 punti, da oltre il bordo sinistro a oltre il destro, con la lunghezza d’arco accumulata a ogni punto. Una ricerca binaria su quella lunghezza dà, per ogni lettera, il punto dove sta e la direzione della curva lì: la lettera si sposta in quel punto e ruota di quell’angolo, centrata sul suo avanzamento. Il disegno della curva è un path ricostruito a ogni fotogramma con gli stessi punti. Nelle valli ogni avanzamento si allarga con la curvatura in quel punto, perché le teste delle lettere non si tocchino.
Il peso nelle valli
Peso e grandezza ottica di Newsreader si muovono insieme su un numero solo, da 0 sulla cresta (peso 250, taglio da titolo sottile a opsz 72) a 1 nella valle (peso 740, taglio robusto e più largo a opsz 6). Il numero di ogni lettera dipende da quanto è in basso sulla curva, con una smoothstep, e font-variation-settings lo scrive in linea. Quando la curva si appiattisce il contrasto scende e tutte le lettere vanno verso il peso del titolo.
Lo scroll, la molla e il punto
Il palco è sticky e alto 100lvh in una sezione lunga circa cinque schermi; Lenis ammorbidisce lo scroll e un ScrollTrigger senza timeline legge l’avanzamento, che una media esponenziale insegue ancora (SMOOTH). Dall’avanzamento vengono lo spostamento della frase, lo scivolare dell’onda, quanto è piatta la curva e quanto si ritirano i suoi capi. La profondità dell’onda segue una molla, che oltrepassa la riga dritta di un pixel e si assesta. Il punto finale è una timeline vera, non legata allo scroll: parte quando l’avanzamento passa l’86% e torna indietro sotto l’80%; cadendo con power2.in schiaccia il cerchio e scava nella curva una campana di due pixel che torna con elastic.out.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PHRASE | script.js | 'Take the long way round' | La frase che corre sulla curva (il punto finale è il punto rosso). Corta è meglio: sul telefono deve stare nella larghezza. |
WAVE | script.js | 0.17 | Quanto è profonda la curva, in parte dell’altezza dello schermo (sul telefono ha un limite, perché le lettere non si accavallino sulle creste). |
WAVES | script.js | 1.4 | Quante onde attraversano lo schermo. |
LIGHT | script.js | 250 | Il peso delle lettere sulle creste (da 200 a 800). |
HEAVY | script.js | 740 | Il peso delle lettere nelle valli (da 200 a 800). |
SETTLED | script.js | 470 | Il peso della frase quando è dritta, come titolo. |
SIZE | script.js | 0.6 | Quanto è larga la frase posata, in parte dello schermo (di più sul telefono); non supera mai un sesto dell’altezza. |
LINE | script.js | 1 | Lo spessore della curva, in pixel. |
SMOOTH | script.js | 5 | Quanto in fretta la frase raggiunge lo scroll: meno è più morbido. |
RIDE | script.js | 1 | Quanto scroll serve per tutto: 2 è il doppio. |
Quando usarla
Per la frase d’apertura di una rivista, di un’agenzia di viaggi, di un racconto o di una pagina di presentazione: un motto da leggere scorrendo, che alla fine resta come titolo della sezione.
Sul telefono
La stessa animazione con le misure adattate: la frase è larga quasi quanto lo schermo, l’onda tiene la lunghezza di uno schermo da computer (così è più dolce e le lettere non si accavallano) e la riga finale resta dentro ai bordi. Tutto si ricalcola se la finestra cambia misura, anche a metà.
Con il movimento ridotto
Niente si muove e lo scroll non è ammorbidito: la frase è già dritta sulla riga, col punto rosso e la riga sotto, e compare in dissolvenza.
Trappole
- Misurando ogni lettera da sola si perdeva la crenatura, e la frase dritta sembrava spaziata (T a, w a y). Ora l’avanzamento di ogni lettera è la differenza fra due pezzi di frase, con una n in fondo perché lo spazio finale non sparisca.
- Alla fine la riga dritta tagliava le lettere sulla linea di base, come un barrato. La frase ora si stacca dalla riga lungo la normale della curva mentre i capi si ritirano, e la riga resta sotto le discendenti.
- Sul telefono, con la stessa quantità di onde in 390 pixel, la curva era così ripida che sulle creste le lettere si accavallavano: l’onda tiene almeno la lunghezza di 820 pixel e la profondità ha un limite.
- Nelle valli le teste delle lettere si avvicinano e le parole si toccavano («wayround»). Ogni avanzamento ora si allarga con la curvatura della curva nel punto dove sta la lettera, misurata a metà altezza delle minuscole; sulle creste resta com’è, perché stringere faceva toccare le lettere sottili.
Librerie
GSAP 3.15.0, ScrollTrigger 3.15.0, Lenis 1.3.26, Newsreader (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,5 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.
Collaudo
Provata il 21 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.
