Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
La strada che corre allo scroll
Scorri dentro l’anteprima
Animazione di scroll in stile minimal: una strada vista dal posto di guida, fatta solo di linee, che corre verso chi guarda tanto più veloce quanto più veloce si scorre, con le curve che arrivano dall’orizzonte. In basso la velocità, scritta grande, si allarga e prende peso accelerando; alla fine la strada frena e un cartello di una linea sola dice dove si è arrivati.
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 road that runs as you scroll</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a made-up guide to slow roads, Verge. The stage sticks while you scroll: a road seen from the driver's seat, made
only of lines, runs towards you as fast as you scroll; the speed is written at the bottom and grows wider and
bolder as you speed up. At the end of the section you arrive, and a sign drawn in one line says where. -->
<main>
<section class="corsa" data-corsa>
<div class="palco" data-palco>
<canvas class="strada" data-strada aria-hidden="true"></canvas>
<header class="testa">
<p class="marchio" data-entra>Verge</p>
<p class="testa__nota" data-entra>Slow roads, one at a time</p>
</header>
<div class="cartello" data-cartello aria-hidden="true">
<svg class="cartello__segno" viewBox="0 0 120 150" preserveAspectRatio="xMidYMax meet">
<path data-cartello-filo d="M60 150V62H8V8h104v54H60"/>
</svg>
<p class="cartello__nome" data-cartello-nome>Lower Harlow</p>
</div>
<p class="arrivo" data-arrivo>You have arrived.</p>
<div class="tachimetro" data-tachimetro>
<p class="tachimetro__numero"><span data-numero>0</span><span class="tachimetro__unita">km/h</span></p>
<span class="tachimetro__riga" aria-hidden="true"><span class="tachimetro__pieno" data-pieno></span></span>
</div>
<p class="cenno" data-entra><span class="cenno__dentro" data-cenno><span>Scroll to drive</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.
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 strada che corre allo scroll» da Animorio e adattala al mio sitoCosa fa
Una pagina bianco caldo con in alto il nome di una guida alle strade lente, Verge. All’apertura una strada si allunga dal fondo dello schermo fino all’orizzonte: due bordi sottili che si stringono in prospettiva, la mezzeria tratteggiata, dei paletti piccoli ai lati e la riga chiara dell’orizzonte; in basso a sinistra un grande «0 km/h», stretto e leggero, con una riga sottile sotto. Scorrendo la pagina resta ferma e si guida: i tratti della mezzeria e i paletti corrono verso chi guarda, tanto più veloci quanto più veloce si scorre, e la velocità sotto sale e scende con lo scroll, un numero intero che si allarga e prende peso quando si accelera e torna stretto quando si rallenta, mentre la riga sotto si riempie. Le curve, sempre le stesse e negli stessi punti, arrivano dall’orizzonte e piegano i bordi a destra e a sinistra, poi passano sotto chi guarda. Al massimo della velocità la mezzeria diventa rossa. Verso la fine della sezione la strada frena da sola fino a fermarsi, anche se si continua a scorrere; la vista fa un piccolo cenno in avanti e torna, a destra si disegna con una linea sola un cartello con il nome del posto, Lower Harlow, e in alto compare «You have arrived.». Risalendo si torna indietro sulla stessa strada.
Come funziona
Una strada in prospettiva vera
La strada è un canvas ridisegnato a ogni fotogramma. Davanti alla camera ci sono 160 passi di profondità, sempre più lunghi con la distanza (z cresce in progressione geometrica), e per ognuno lo script sa di quanto il centro della strada è spostato di lato. Un punto del mondo (x, altezza, z) va sullo schermo dividendo per z: x sullo schermo è la metà della larghezza più f per x diviso z, y è l’orizzonte più f per l’altezza della camera meno quella del punto, diviso z. La camera è messa in modo che la carreggiata, sul bordo basso dello schermo, sia larga quanto lo schermo.
Le curve che si accumulano
Le curve sono un elenco fisso: dove cominciano sulla strada, quanto sono lunghe e quanto girano. A ogni passo la curvatura del punto di strada che si sta guardando si aggiunge alla direzione, e la direzione allo spostamento laterale, come una macchina che segue la strada: così una curva lontana piega i bordi vicino all’orizzonte e, scorrendo, si avvicina fino a passare sotto chi guarda. Ogni curva comincia e finisce dolce (seno al quadrato), quindi i bordi non fanno mai uno spigolo.
La strada legata allo scroll
Un ScrollTrigger sulla sezione dà il punto dello scroll da 0 a 1, e una funzione lo trasforma in metri di strada: fermi nei primi quattro centesimi, poi a passo costante, e nell’ultimo tratto una parabola che frena fino a zero con la stessa pendenza dove le due parti si toccano. I tratti della mezzeria e i paletti stanno in punti fissi della strada, ogni 12 e ogni 40 metri: è la posizione che cambia, quindi corrono verso chi guarda da soli, tanto più veloci quanto più veloce si scorre, e il giro è sempre uguale.
Il tachimetro
La velocità è vera: i metri fatti in un fotogramma divisi per il tempo del fotogramma, in proporzione a una velocità di riferimento (100 km/h vuol dire tutta la strada in CRUISE secondi). Una media esponenziale la smorza in SMOOTH secondi, così il numero sale e scende senza tremare. Il numero intero cambia solo quando cambia davvero; gli assi del carattere seguono la velocità, wdth da 62 a 125 e wght da 300 a 820, e la riga sotto si riempie con scaleX.
L’arrivo e il movimento ridotto
Passata la frenata, una timeline legata allo scroll disegna il cartello con stroke-dashoffset su un path di una linea sola (palo e tabella), fa salire il nome dal largo e leggero allo stretto e pieno e accende la scritta dell’arrivo. Arrivando la vista fa un cenno: l’orizzonte scende di pochi pixel e torna con elastic.out. Con il movimento ridotto non c’è Lenis e la strada resta ferma; il numero dice comunque la velocità dello scroll, senza cambiare forma, e il cartello compare in dissolvenza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PLACE | script.js | 'Lower Harlow' | Il nome del posto d’arrivo, scritto sul cartello alla fine. |
MAX_KMH | script.js | 130 | La velocità che riempie la riga del tachimetro, dà al numero la larghezza e il peso massimi e accende la mezzeria. |
CRUISE | script.js | 8 | In quanti secondi si fa tutta la strada a 100 km/h: più è alto, più il tachimetro segna forte per lo stesso scroll. |
DASH_EVERY | script.js | 12 | Ogni quanti metri comincia un tratto della mezzeria. |
LANE_DASH | script.js | 0.45 | Quanto è lungo un tratto della mezzeria, come parte di quella distanza. |
CURVES | script.js | 1 | Quanto sono strette le curve: 0 è una strada dritta, 2 il doppio. |
POSTS | script.js | true | I paletti ai lati della strada. |
LINE | script.js | 1.5 | Lo spessore dei bordi e dei paletti, in pixel. |
SMOOTH | script.js | 0.35 | In quanti secondi il tachimetro segue la velocità vera: più è alto, più è calmo. |
RIDE | script.js | 1 | Quanto scroll dura il viaggio: 2 vuol dire il doppio. |
Quando usarla
Per la pagina di un viaggio, di un noleggio d’auto, di una scuola guida, di un marchio di macchine o di una guida di strade: un racconto allo scroll che fa sentire la strada e la velocità senza disegnare una macchina.
Sul telefono
La stessa animazione con le misure adattate: la carreggiata è un po’ più larga dello schermo, l’orizzonte un po’ più in basso, il numero più piccolo; col dito si guida come col mouse.
Con il movimento ridotto
Niente scroll ammorbidito e niente corsa: la strada resta ferma con le sue curve lontane, il numero dice la velocità dello scroll senza cambiare forma e alla fine il cartello compare in dissolvenza.
Trappole
- Con i passi di profondità tutti uguali la strada vicino all’orizzonte era fatta di pochi punti e le curve lontane facevano gli spigoli; con i passi in progressione geometrica i punti si addensano dove servono.
- La velocità calcolata da un fotogramma all’altro tremava (Lenis consegna lo scroll a piccoli scatti): la media esponenziale su SMOOTH secondi la rende calma senza farla arrivare in ritardo.
Librerie
GSAP 3.15.0, ScrollTrigger 3.15.0, Lenis 1.3.26, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,6 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.
