Lo sfondo di fili come un tessuto
Sfondi, Hover
NuovaGratis
Torna alla libreria
Lo sfondo a curve di livello
Uno sfondo animato da mettere dietro a un titolo o a una sezione: le curve di livello di un paesaggio inventato, su un fondo quasi nero, che scorrono lente e in un giro tornano uguali. Due toni di grigio, la sola quota più alta nell'accento; sotto il titolo il terreno si spiana in un altopiano e il puntatore alza una collina con le sue curve intorno. 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>Altura</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 background: contour lines of an invented landscape on a canvas behind the page; the land drifts slowly and
under the title it flattens into a plateau, so no line ever crosses the words -->
<main class="pagina" data-pagina>
<canvas class="fondo" aria-hidden="true" data-fondo></canvas>
<header class="testa">
<p class="marchio">Altura</p>
<p class="testa__nota">Mountain lodge</p>
</header>
<section class="eroe">
<div class="blocco" data-blocco>
<p class="occhiello" data-entra>Twelve rooms above the tree line</p>
<h1 class="titolo" data-titolo aria-label="Above the weather.">Above the weather.</h1>
<div class="azione" data-entra>
<a class="pillola" href="#">
<span class="pillola__scritta" data-testo="Book a room">Book a room</span>
<svg class="pillola__freccia" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 8h10.5M9 3.8 13.2 8 9 12.2" /></svg>
</a>
</div>
</div>
</section>
</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.
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 «Lo sfondo a curve di livello» da Animorio e adattala al mio sitoCosa fa
Una pagina intera quasi nera, il fondo di un rifugio di montagna inventato, Altura. Dietro a tutto, su un canvas, le curve di livello di un paesaggio che non esiste: linee sottili grigio caldo che si chiudono in anelli sulle cime, si stringono sui pendii e si allargano nelle valli; una curva ogni cinque, la maestra, è più chiara, e solo la quota più alta è arancio, piccoli anelli che compaiono e spariscono sulle cime. Al centro, piccolo, il titolo: Twelve rooms above the tree line, poi Above the weather. in Archivo e una pillola chiara (Book a room) con la freccia; in alto il marchio e Mountain lodge. Sotto il titolo il terreno si spiana in un altopiano: le curve lo girano intorno e nessuna passa sulle parole. Il paesaggio scorre piano, due strati di rumore che girano in tondo a velocità diverse, così le colline cambiano forma, le cime si dividono e si uniscono, e in ventisei secondi tutto torna com'era. Dove va il puntatore il terreno si alza in una collina morbida: intorno si stringono anelli concentrici e in cima si accende un anello arancio, che lo segue su una molla e sparisce quando il puntatore se ne va. All'apertura il paesaggio sale dal piano: prima nascono piccoli anelli sulle cime più alte, poi si allargano e si moltiplicano fino a riempire la pagina, con un filo di troppo e il ritorno; le lettere del titolo salgono una dopo l'altra passando da larghe e leggere a strette e piene.
Come funziona
Il terreno
Una griglia di punti ogni 8 px (6 sul telefono) copre la pagina; in ogni punto l'altezza è 0,68 · rumore(p/SCALA + a) + 0,32 · rumore(2,3·p/SCALA + b), un rumore di Perlin 2D scritto nello script con un seme fisso. a e b girano su due cerchi (di raggio DERIVA, il secondo al doppio della velocità e al contrario) seguendo la fase di una timeline GSAP in ripetizione lunga GIRO secondi: il paesaggio cambia forma e a ogni giro torna identico.
Le curve con le marching squares
Per ogni cella della griglia si prendono le altezze dei quattro angoli e solo le quote comprese fra la più bassa e la più alta (QUOTA è il passo fra una quota e l'altra). Per ogni quota i quattro angoli danno un numero da 0 a 15, e una tabella dice quali lati della cella la curva attraversa; il punto esatto su ogni lato si trova per interpolazione. I segmenti vanno in tre Path2D, curve fini, maestre (una ogni MAESTRA) e la quota più alta, e ognuno si disegna con un solo stroke.
L'altopiano sotto il titolo
Si misura il blocco del titolo e intorno si calcola una distanza da un ovale un poco squadrato (una superellisse). Dentro, l'altezza si porta dolcemente, con una piuma di ALTOPIANO pixel, a metà fra due quote: lì il terreno è piano e nessuna curva lo attraversa, e le curve di fuori lo girano intorno come intorno a un lago.
La collina del puntatore
Il puntatore aggiunge al terreno COLLINA · e^(−d²/2·LARGA²): una collina più ripida del paesaggio, quindi intorno si chiudono anelli concentrici e in cima la quota più alta, nell'accento. Il centro della collina segue il puntatore su una molla, la sua altezza su un'altra, e quando il puntatore esce dalla pagina la collina si abbassa e sparisce.
L'apertura e la pausa
Una timeline porta l'ampiezza del terreno da 0 a 1 con back.out: le curve nascono sulle cime e si allargano. Le lettere del titolo, ognuna in due span (GSAP muove quello fuori), salgono con back.out mentre font-stretch passa da 125% a 100% e il peso da 300 a 640. Un IntersectionObserver e visibilitychange fermano il ticker e il giro quando la pagina non si vede.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
GIRO | script.js | 26 | In quanti secondi il paesaggio fa un giro intero e torna uguale. |
SCALA | script.js | 380 | La grandezza delle colline, in px: più grande, colline più larghe e meno curve. |
DERIVA | script.js | 0.45 | Quanta strada fa il paesaggio in un giro: più alto, cambia di più. |
QUOTA | script.js | 0.07 | La distanza fra una curva e l'altra: più piccola, più curve. |
MAESTRA | script.js | 5 | Ogni quante curve ce n'è una maestra, più chiara. |
COLLINA | script.js | 0.6 | Quanto alza il terreno il puntatore (0 niente collina). |
LARGA | script.js | 95 | Quanto è larga la collina del puntatore, in px. |
ALTOPIANO | script.js | 70 | Quanti px di terreno piano restano intorno al titolo. |
SPESSORE | script.js | 1 | Lo spessore delle curve, in px (le maestre e la più alta un poco di più). |
Quando usarla
Come fondo della prima schermata di un rifugio, di un hotel di montagna o di una casa vacanza in collina, di un marchio di abbigliamento da escursione, di una gara di corsa in montagna o di un'app di sentieri; in generale dietro a un titolo corto quando si vuole una pagina scura e viva che parli di luoghi. I due grigi e l'arancio si cambiano nel CSS.
Sul telefono
Le stesse animazioni a misure adattate: la griglia è più fitta (un punto ogni 6 px) così le curve restano morbide, il titolo è più piccolo e l'altopiano lo segue. Il dito alza la collina mentre tocca e trascina.
Con il movimento ridotto
Il paesaggio è fermo, già salito, con l'altopiano sotto il titolo: niente deriva, niente collina del puntatore. Il titolo, la riga piccola e la pillola compaiono in dissolvenza.
Trappole
- L'altopiano fatto come un rettangolo dagli angoli tondi lasciava intorno al titolo una curva che sembrava una cornice: con una superellisse più tonda e un poco più larga le curve lo girano intorno come intorno a un lago.
- Le scritte della testata stavano sopra le curve e si leggevano peggio: il canvas sfuma in cima con una mask-image, e la testata resta sul nero pulito.
- Con un punto ogni 10 px i piccoli anelli arancio sulle cime si vedevano a spigoli: con 8 px (6 sul telefono) sono tondi, e il disegno resta a 60 fotogrammi perché ogni cella guarda solo le quote che la attraversano.
- La prima collina del puntatore era bassa e larga e non si distingueva dal paesaggio: più alta e più stretta, è più ripida del terreno intorno e si vede subito come una cima con i suoi anelli.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,4 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
