Lo sfondo di creste in fila
Sfondi, WebGL, Hover
NuovaGratis
Torna alla libreria
Lo sfondo di nebbia colorata
Uno sfondo animato da mettere dietro a un titolo o a una sezione: una nebbia morbida di tre tinte, albicocca, pervinca e burro, che si muove piano su una carta bianco caldo, con una grana fine da pellicola. Un solo shader WebGL piccolo; dietro al titolo la nebbia si alleggerisce e la nuvola pervinca si sporge verso 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>Hush</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the background: a soft fog of three tints drawn by one small WebGL shader, with a fine film grain; the tints
drift slowly and the nearest one leans towards the pointer -->
<main class="pagina" data-pagina>
<canvas class="fondo" aria-hidden="true" data-fondo></canvas>
<header class="testa">
<p class="marchio">hush</p>
<p class="testa__nota">A sleep app</p>
</header>
<section class="eroe">
<div class="blocco" data-blocco>
<p class="occhiello" data-entra>For light sleepers and long days</p>
<h1 class="titolo" data-titolo>Let the evening go quiet.</h1>
<div class="azione" data-entra>
<a class="pillola" href="#">
<span class="pillola__scritta" data-testo="Get the app">Get the app</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.
19 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 nebbia colorata» da Animorio e adattala al mio sitoCosa fa
Una pagina intera color bianco caldo, il fondo di un'app per dormire inventata, hush. Sopra la carta si muove una nebbia di tre tinte: una nuvola albicocca in alto a sinistra, una pervinca a destra, una color burro che sale dal fondo. Le nuvole girano piano su orbite diverse, i loro bordi si sfrangiano come fumo perché lo spazio sotto di loro è storto da due onde lente, e dove si incontrano le tinte si mescolano in rosa, lilla e sabbia. Su tutto c'è una grana fine da pellicola, ferma, che toglie anche le righe delle sfumature. Al centro, piccolo, il titolo: For light sleepers and long days, poi Let the evening go quiet. in Mona Sans e una pillola nera (Get the app) con la freccia; in alto il marchio e A sleep app. Dietro al titolo la nebbia si fa più leggera, così le parole restano nette. La nuvola pervinca si sporge piano verso il puntatore, su una molla lenta, e torna al suo giro quando il puntatore se ne va. In ventidue secondi la nebbia fa un giro intero e torna com'era. All'apertura la nebbia sale dalla carta in quasi tre secondi e le parole del titolo affiorano una dopo l'altra: sfocate, un filo più larghe e leggere, poi nette e al loro peso.
Come funziona
Un solo shader
Un canvas a tutta pagina con WebGL e un solo triangolo che copre lo schermo; la risoluzione è limitata a devicePixelRatio 1,5, che per una nebbia morbida basta. Lo shader parte dal colore della carta e ci mescola sopra tre nuvole, ognuna una gaussiana e^(−d²/r²) nella sua tinta, con la forza DENSA.
I bordi come fumo
Prima di misurare la distanza dalle nuvole il punto si sposta di STORTA pixel lungo due onde annidate (un seno dentro l'altro) che scorrono con la fase: le nuvole restano tonde da lontano ma i bordi si piegano e si sfrangiano. Tutto è fatto di seni della fase, quindi a ogni giro torna identico.
Le orbite e il giro
I centri delle tre nuvole si calcolano in JavaScript a ogni fotogramma: ognuno gira su un'ellisse con giri interi per ogni giro della fase, che è una timeline GSAP in ripetizione lunga GIRO secondi. Il centro della nuvola pervinca si sposta verso il puntatore di SEGUE volte la distanza, seguendolo su una molla lenta e frenata.
La calma dietro al titolo e la grana
Si misura il blocco del titolo e lo shader riceve il suo centro e i suoi raggi: dentro, la forza della nebbia scende di CALMA, con un passaggio morbido (smoothstep) verso fuori. Alla fine si aggiunge una grana ferma, un hash dalle coordinate del pixel per GRANA: si vede come carta fotografica e toglie le righe che le sfumature lunghe fanno sugli schermi a 8 bit.
I colori, l'apertura, la pausa
Le tinte stanno in :root e si leggono col getComputedStyle; un canvas di un pixel le traduce in rgb, così vanno bene in qualunque forma e il Playground le cambia dal vivo. Una timeline porta la nebbia da 0 a 1 con power2.inOut e fa affiorare le parole (opacità, blur da 10 px a 0, font-stretch da 118% a 100%, peso da 380 a 520, back.out). Senza WebGL resta una nebbia ferma di sfumature CSS; IntersectionObserver e visibilitychange fermano tutto quando la pagina non si vede.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
GIRO | script.js | 22 | In quanti secondi la nebbia fa un giro intero e torna uguale. |
NUVOLE | script.js | 0.4 | Quanto sono grandi le nuvole di colore, rispetto alla pagina. |
DENSA | script.js | 0.85 | Quanto è densa la nebbia, da 0 (solo carta) a 1. |
STORTA | script.js | 70 | Quanto le onde storcono la nebbia, in px: 0 nuvole tonde. |
GRANA | script.js | 0.035 | Quanta grana da pellicola: 0 la toglie. |
CALMA | script.js | 0.45 | Quanto si alleggerisce la nebbia dietro al titolo, da 0 a 1. |
SEGUE | script.js | 0.35 | Quanto la nuvola pervinca si sporge verso il puntatore, da 0 a 1. |
Quando usarla
Come fondo della prima schermata di un'app di benessere, sonno o meditazione, di un marchio di cosmetici o profumi, di una pagina di presentazione di un prodotto digitale; in generale dietro a un titolo corto quando si vuole un colore che vive senza disegni. Le tre tinte e la carta si cambiano nel CSS.
Sul telefono
La stessa nebbia a misure adattate: le nuvole sono grandi in proporzione alla pagina alta e stretta, il titolo va su due righe. Il dito tira a sé la nuvola pervinca mentre tocca e trascina.
Con il movimento ridotto
La nebbia è ferma, già salita, nella posizione d'inizio del giro: niente orbite e niente puntatore. Il titolo, la riga piccola e la pillola compaiono in dissolvenza, senza sfocatura.
Trappole
- Le sfumature larghe su uno schermo a 8 bit fanno righe visibili, soprattutto nel pervinca: la grana ferma le rompe, e a quella forza non si vede come sporco ma come carta.
- La grana va tenuta ferma: se cambia a ogni fotogramma frizza come la neve di un televisore e stanca, mentre ferma la nebbia ci scorre sopra e sembra stampata.
- Il colore letto dal CSS arriva in qualunque forma (esadecimale, rgb, nomi): invece di scrivere un lettore per ognuna, un canvas di un pixel lo dipinge e se ne leggono i tre numeri. Si rilegge ogni venti fotogrammi, così il Playground lo cambia dal vivo senza costare niente.
- Se la nuvola insegue il puntatore su una molla svelta la nebbia sembra un cursore: con una molla lenta e solo un terzo della strada si sporge, e resta nebbia.
Librerie
GSAP 3.15.0, Mona Sans (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.
