Lo sfondo di fili come un tessuto
Sfondi, Hover
NuovaGratis
Torna alla libreria
Lo sfondo di aurora a righe
Uno sfondo animato da mettere dietro a un titolo o a una sezione: un'aurora boreale disegnata solo con righe verticali sottili, tutte dello stesso verde menta, su una notte quasi nera. Due tende ondeggiano e si piegano piano, più luminose al bordo basso e nelle pieghe, e il cielo si accende un poco dove passa il puntatore. 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>Kaamos</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/saira@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the background: northern lights drawn only with thin vertical rules on a canvas behind the page; two curtains
ripple and fold slowly, brightest at their lower edge, and the sky leans towards the pointer -->
<main class="pagina" data-pagina>
<canvas class="fondo" aria-hidden="true" data-fondo></canvas>
<header class="testa">
<p class="marchio">Kaamos</p>
<p class="testa__nota">Glass cabins, Lapland</p>
</header>
<section class="eroe">
<div class="blocco" data-blocco>
<p class="occhiello" data-entra>Nine cabins under the northern lights</p>
<h1 class="titolo">
<span class="riga"><span class="riga__dentro" data-riga>Stay up</span></span>
<span class="riga"><span class="riga__dentro" data-riga>for the sky.</span></span>
</h1>
<div class="azione" data-entra>
<a class="pillola" href="#">
<span class="pillola__scritta" data-testo="Book a cabin">Book a cabin</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.
18 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 di aurora a righe» da Animorio e adattala al mio sitoCosa fa
Una pagina intera quasi nera, il fondo di un albergo di capanne di vetro inventato in Lapponia, Kaamos. Nella metà alta, su un canvas, un'aurora boreale fatta solo di righe verticali sottili, una ogni quattro pixel, tutte nello stesso verde menta: ogni riga parte dal bordo basso della tenda, dove è più luminosa, e sfuma salendo. Le tende sono due, una vicina e una più alta e più fioca; il loro bordo basso ondeggia, si piega e si raddrizza, e dove si piega di più la tenda si vede di taglio ed è più accesa, come nelle aurore vere. Righe vicine sono un poco diverse fra loro, così si vedono i raggi, e un brivido sottile corre lungo le pieghe. In trenta secondi tutto torna com'era. Dove passa il puntatore la tenda si abbassa un poco e si accende; quando nessuno lo muove, un puntatore finto va avanti e indietro sotto il cielo. In basso il titolo: Nine cabins under the northern lights, poi due righe in Saira (Stay up for the sky.) e una pillola chiara (Book a cabin) con la freccia; in alto il marchio e Glass cabins, Lapland. Intorno al titolo l'aurora si spegne. All'apertura le tende scendono dal cielo da sinistra a destra, una riga dopo l'altra, e le righe del titolo salgono stringendosi e prendendo peso.
Come funziona
Le tende col rumore
Per ogni riga, una ogni RIGA pixel, tre rumori di Perlin 2D scritti nello script con un seme fisso danno il bordo basso della tenda, la sua altezza e la sua luce; le loro coordinate girano su un cerchio seguendo la fase di una timeline GSAP in ripetizione lunga GIRO secondi, così l'aurora cambia forma e a ogni giro torna identica. PIEGHE è la larghezza delle pieghe in pixel.
Una sfumatura per tutte
Si crea una sola sfumatura lineare da 0 a 1, piena in basso e spenta in cima. Ogni riga è un rettangolo largo SPESSORE disegnato con setTransform che stira quella sfumatura dal suo bordo basso alla sua cima (la scala verticale è negativa, così sale): settecento righe con un fillRect ciascuna e nessun gradiente nuovo a ogni fotogramma. globalAlpha è la luce della riga.
Le pieghe e i raggi
La pendenza del bordo basso, misurata fra due punti a sei pixel, accende la riga: dove la tenda si piega la si vede di taglio. Un quarto rumore, più fine, rende diverse le righe vicine (i raggi), e un seno che corre lungo la pagina, alla velocità di BRIVIDO, fa il brivido.
Il cielo che guarda
Il puntatore conta solo in orizzontale: una campana di Gauss centrata sulla sua x abbassa il bordo della tenda, la allunga e la accende di SGUARDO. La x segue il puntatore su una molla; senza il puntatore vero una passeggiata finta va avanti e indietro, legata al giro.
L'apertura e la gomma
All'apertura ogni riga nasce con un ritardo che cresce da sinistra a destra e si allunga dall'alto verso il suo bordo basso. Dietro al titolo una gomma ovale (destination-out con un gradiente radiale) spegne le righe; le righe del titolo salgono con back.out mentre font-stretch passa da 125% a 100% e il peso da 300 a 520.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
RIGA | script.js | 4 | La distanza fra una riga e l'altra, in px (sul telefono un poco meno). |
SPESSORE | script.js | 1 | Lo spessore delle righe, in px. |
GIRO | script.js | 30 | In quanti secondi l'aurora fa un giro intero e torna uguale. |
PIEGHE | script.js | 520 | Quanto sono larghe le pieghe delle tende, in px. |
ALTA | script.js | 0.34 | Quanto sono alte le tende, in frazioni della pagina. |
BRIVIDO | script.js | 0.22 | Quanto corre il brivido lungo le pieghe (0 niente). |
SGUARDO | script.js | 0.7 | Quanto il cielo si accende verso il puntatore (0 niente). |
Quando usarla
Come fondo della prima schermata di un albergo o di case vacanza al nord, di un viaggio organizzato, di un osservatorio o di un planetario, di un'app per il sonno o la meditazione, di un festival notturno; in generale dietro a un titolo corto quando si vuole una notte viva e calma. Il verde dell'aurora si cambia nel CSS (con un rosa o un viola diventa un'aurora più rara).
Sul telefono
Le stesse animazioni a misure adattate: le righe sono un poco più fitte, le tende un poco più in basso per riempire lo schermo alto, il titolo più piccolo e in basso. Il dito abbassa e accende la tenda mentre tocca e trascina; quando si alza torna il puntatore finto.
Con il movimento ridotto
L'aurora è ferma, già scesa: niente ondeggiare, niente brivido, niente risposta al puntatore. Il titolo, la riga piccola e la pillola compaiono in dissolvenza.
Trappole
- Le righe fatte a pezzi con la trasparenza a scalini lasciavano gradini e rettangoli nel cielo: una sola sfumatura stirata su ogni riga con setTransform è liscia e costa meno.
- Col bordo basso troppo regolare le tende sembravano un profilo di colline: la luce che cresce dove la tenda si piega e i raggi diversi fra righe vicine la fanno leggere come un'aurora.
- Le tende passavano dietro alla riga piccola sopra al titolo: la gomma ovale ha un margine più largo in alto.
Librerie
GSAP 3.15.0, Saira (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,7 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.
