Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
Il sentiero delle quote
Scorri dentro l’anteprima
La strada per un rifugio di montagna in una sola linea sottile: scendendo, il sentiero sale a tornanti, il righello delle quote scorre sotto un segno fermo, la quota grande conta ogni metro e ogni tappa si posa sulla sua quota lettera per lettera, prendendo peso. All’ultima, la quota del rifugio si accende nel vermiglio. 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 trail of heights</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>
<!-- the way up to a made-up mountain hut, drawn with a single thin line. Scrolling down, the trail climbs in
switchbacks, the ruler of heights runs down beside it, and every stop lands on its own height, taking on
weight; at the last one the height of the hut lights up -->
<main>
<section class="apertura">
<p class="piccolo">Vellmar Hut</p>
<h1 class="titolo">Four hours up,<br>one line.</h1>
<p class="piccolo piccolo--tenue">Scroll down</p>
</section>
<section class="salita" data-salita>
<div class="palco">
<header class="testa">
<p class="marchio">Vellmar</p>
<p class="piccolo piccolo--tenue">The summer path</p>
</header>
<div class="lettura" data-lettura aria-hidden="true">
<p class="quota" data-quota>1,240</p>
<p class="piccolo piccolo--tenue lettura__sotto">metres above the sea</p>
</div>
<div class="vista">
<div class="mondo" data-mondo>
<svg class="sentiero" data-sentiero aria-hidden="true">
<defs>
<clipPath id="sentiero-scopre"><rect data-scopre x="0" y="0" width="0" height="0"></rect></clipPath>
</defs>
<path class="sentiero__guida" data-guida clip-path="url(#sentiero-scopre)"></path>
<path class="sentiero__passi" data-passi></path>
</svg>
<div class="righello" data-righello aria-hidden="true"></div>
<ol class="tappe">
<li class="tappa" data-tappa data-metri="1240">
<i class="tappa__riga" aria-hidden="true"></i>
<span class="tappa__metri">1,240 m</span>
<span class="tappa__nome">Tellow Bridge</span>
</li>
<li class="tappa" data-tappa data-metri="1610">
<i class="tappa__riga" aria-hidden="true"></i>
<span class="tappa__metri">1,610 m</span>
<span class="tappa__nome">Larch Gate</span>
</li>
<li class="tappa" data-tappa data-metri="1985">
<i class="tappa__riga" aria-hidden="true"></i>
<span class="tappa__metri">1,985 m</span>
<span class="tappa__nome">The Shelves</span>
</li>
<li class="tappa" data-tappa data-metri="2390">
<i class="tappa__riga" aria-hidden="true"></i>
<span class="tappa__metri">2,390 m</span>
<span class="tappa__nome">Grey Saddle</span>
</li>
<li class="tappa" data-tappa data-metri="2846">
<i class="tappa__riga" aria-hidden="true"></i>
<span class="tappa__metri">2,846 m</span>
<span class="tappa__nome">Vellmar Hut</span>
</li>
</ol>
</div>
</div>
<i class="livello" data-livello aria-hidden="true"></i>
</div>
</section>
<section class="apertura apertura--fine">
<h2 class="titolo titolo--medio">Beds from June<br>to September.</h2>
<p class="piccolo piccolo--tenue">Twenty-two of them, and a stove.</p>
</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="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.
34 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 «Il sentiero delle quote» da Animorio e adattala al mio sitoCosa fa
La pagina «come arrivare» di un rifugio inventato, Vellmar Hut, su un bianco caldo con l’inchiostro nero e un solo vermiglio tenuto per la fine. Lo schermo si ferma: a sinistra un righello di quote si disegna dal basso, con le tacche che cadono una dopo l’altra (una ogni 20 metri, più lunga e con la quota scritta ogni 100), e a destra compare il sentiero ancora da fare, una linea tratteggiata chiara che sale a tornanti. Un segno nero si apre sul righello, la quota grande entra cifra dopo cifra e la prima tappa, Tellow Bridge, si posa sulla sua quota. Poi, scorrendo, l’inchiostro sale lungo il sentiero, tornante dopo tornante, e tutto il disegno scende perché la punta resti alla stessa altezza dello schermo: il righello scorre sotto il segno fermo, le tacche già superate diventano nere e quelle vicine alla punta si allungano in una piccola onda. La quota grande conta ogni metro, stretta e sottile mentre si sale (gli assi di larghezza e di peso di Archivo), con le prime cifre che scattano quando cambiano, e si posa larga e pesante con un elastico a ogni tappa. A ogni tappa le tacche sentono il colpo e vibrano, il nome cade sulla sua quota una lettera dopo l’altra, ogni lettera da sottilissima a piena, con un pixel di rimbalzo e un piccolo schiacciamento, e una riga si stende dal sentiero fino al righello con la quota scritta in piccolo. Quando si riparte, la riga della tappa lasciata si schiarisce. All’ultima tappa, il rifugio a 2.846 metri, la quota grande, la sua riga, la quota piccola e il segno sul righello si accendono nel vermiglio. Tutto segue lo scorrimento, avanti e indietro.
Come funziona
Le tappe dalla pagina
Ogni tappa è una voce di un elenco con data-metri e il suo nome: lo script le legge, le mette in ordine e ne ricava la quota più bassa e la più alta. Da lì nasce la scala: una funzione trasforma una quota in un’altezza nel disegno, e tutto (tacche, tornanti, righe delle tappe) si piazza con quella. Fra una tappa e l’altra lo script inventa LEGS tratti di tornante, un po’ irregolari, con le tappe sempre dalla stessa parte.
Numeri al posto delle proprietà
La timeline, legata allo scorrimento con scrub SCRUB, muove soprattutto numeri: la quota raggiunta, il colpo sulle tacche, l’entrata del righello e, per ogni tappa, la riga, la quota piccola e lo schiarirsi. A ogni aggiornamento una funzione sola ridisegna tutto da quei numeri: dove sta la punta lungo i tornanti, quanta linea è già percorsa (stroke-dashoffset), dove va il disegno intero, quanto sono lunghe le tacche.
La punta ferma, il mondo che scende
Righello, sentiero e tappe stanno in un solo strato. A ogni fotogramma lo strato scende di quanto serve perché la quota raggiunta resti alla stessa altezza dello schermo, dove sta il segno nero sul righello: così sembra che il righello scorra sotto il segno. Il tratteggio del sentiero da fare è un secondo tracciato che parte dalla punta, con lo stroke-dashoffset uguale alla strada fatta perché i trattini restino fermi.
La quota che conta
Il numero grande è la quota raggiunta arrotondata, con le cifre tabellari che non ballano. Due variabili CSS, --wd e --wg, sono gli assi wdth e wght di Archivo: all’inizio di ogni salita scendono a NARROW e THIN, all’arrivo tornano a WIDE e HEAVY con un elastico. Solo le prime cifre fanno lo scatto quando cambiano: le ultime cambiano a ogni metro e scattando tremerebbero di continuo.
Il nome che prende peso
Ogni lettera del nome sta nel suo riquadro, con il peso in una variabile --w. All’arrivo le lettere cadono da 20 pixel con uno stagger, dalla trasparenza al pieno e da peso 100 a HEAVY, con la curva LAND (un back.out che rimbalza di circa un pixel); un secondo tween le schiaccia appena e le rimette dritte. Poi la riga si stende dal sentiero al righello con scaleX e la quota piccola sale al suo posto.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NARROW | script.js | 66 | La larghezza della quota grande mentre si sale (62 è la più stretta). |
WIDE | script.js | 104 | La larghezza su cui si posa a ogni tappa (125 è la più larga). |
THIN | script.js | 230 | Il peso della quota grande mentre si sale. |
HEAVY | script.js | 680 | Il peso su cui si posano la quota grande e i nomi delle tappe. |
LEGS | script.js | 4 | Quanti tratti di tornante fra una tappa e l’altra (un numero pari). |
WAVE | script.js | 1.4 | Quanto si allungano le tacche vicine alla punta. |
LAND | script.js | 'back.out(1.6)' | La curva delle lettere che si posano: il numero è quanto rimbalzano. |
SCRUB | script.js | 0.8 | Quanti secondi ci mette il disegno a raggiungere lo scorrimento. |
Quando usarla
Per la pagina «come arrivare» di un rifugio, di un albergo in montagna o di una casa vacanze in collina, per il percorso di una gita o di una corsa in salita, o per qualunque storia fatta di tappe con un numero che cresce. Le tappe si cambiano nell’HTML (data-metri e il nome): la scala e i tornanti si rifanno da soli. Con più di cinque tappe la sezione va allungata.
Sul telefono
Le stesse animazioni: il righello sta sul bordo sinistro, i tornanti si stringono nella metà destra senza scarti di lato, la quota grande è più piccola e il disegno è un po’ più alto, così le tacche restano distanti. I nomi delle tappe sono più piccoli e stanno fra la quota piccola e il sentiero.
Con il movimento ridotto
Niente spostamenti: righello e sentiero da fare sono già disegnati. Scorrendo si passa da una tappa all’altra a scatti: il disegno e la quota grande spariscono in dissolvenza e ricompaiono già alla tappa nuova, col sentiero percorso fin lì e la tappa scritta. All’ultima la quota del rifugio è già vermiglia.
Trappole
- La riga «metres above the sea» sotto la quota grande era scritta nell’HTML e si vedeva da sola, a schermo vuoto, prima che entrassero le cifre: ora la sua opacità segue l’entrata della quota.
- Con la fascia dell’intestazione colorata, le quote del righello che salivano sotto venivano tagliate a metà. Il disegno sta in una finestra con una mask-image a sfumare: sotto l’intestazione tutto svanisce invece di essere tagliato.
- Con il righello lungo solo quanto il sentiero, all’inizio e alla fine se ne vedeva il bordo a metà schermo. Ora continua 500 metri sotto la prima tappa e 500 sopra il rifugio.
- Con troppi pixel per metro si vedeva una tappa sola alla volta e si perdeva il senso della salita: con la scala più stretta si vedono la tappa appena lasciata e i tornanti fino a quella dopo.
- Con molti fromTo sulle stesse variabili (--wd, --wg, il colpo) e sulle lettere, la timeline usa immediateRender: false in tutti i tween e le lettere si nascondono a mano prima: altrimenti l’ultimo tween costruito impone il suo inizio fin dal primo fotogramma.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Archivo (font variabile, assi wdth e wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,1 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 16 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.
