Lo sfondo della lente gravitazionale
WebGL, Sfondi, Hover
NuovaGratis
Torna alla libreria
Lo sfondo di creste in fila
Sfondo animato in WebGL, nello stile minimal, da mettere dietro a un titolo: tante righe sottili d'inchiostro una dietro l'altra, come un grafico a creste, sollevate da un rumore lento; le righe davanti nascondono quelle dietro e il puntatore è un sasso nel ruscello: le creste vicine si alzano e la riga sotto di lui diventa vermiglia.
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>Halcyon Radio</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 page background drawn by one WebGL shader: rows of thin ink lines, one behind the other like a ridge plot,
each lifted by a slow field of noise; the lines in front hide the ones behind; the pointer is a stone in the
stream: the ridges near it rise, and the line under it takes the one accent -->
<main class="pagina" data-pagina>
<canvas class="tela" aria-hidden="true" data-tela></canvas>
<header class="testa">
<p class="marchio" data-entra>Halcyon Radio</p>
<p class="testa__nota" data-entra>Night broadcasts, 88.4</p>
</header>
<div class="centro" data-titolo>
<h1 class="titolo" data-entra data-peso>Listen to the quiet.</h1>
<p class="sotto" data-entra>Six hours of low signal, every night from one to seven.</p>
</div>
<p class="nota" data-entra data-nota>Move through the lines</p>
</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.
17 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 creste in fila» da Animorio e adattala al mio sitoCosa fa
Su un foglio bianco caldo ci sono tante righe d'inchiostro sottili, una dietro l'altra dall'alto in basso, come i profili di montagne viste una dopo l'altra o il grafico a creste di un segnale radio. Ogni riga si solleva in creste morbide più alte al centro e piatte ai lati, e le creste cambiano piano, respirando, in un giro di dodici secondi che torna uguale. Le righe davanti hanno sotto di sé la carta, così coprono quelle dietro dove si alzano: per questo le creste sembrano solide. All'apertura le righe salgono dal davanti verso il fondo e si posano con un filo di troppo, poi arrivano il nome della radio inventata, Halcyon Radio, e il titolo «Listen to the quiet.», che entra largo e leggero e si stringe prendendo peso. Il puntatore è un sasso in un ruscello: dove passa le creste vicine si alzano in un'onda, e la riga che gli scorre sotto diventa vermiglia, l'unico colore della pagina. Quando nessuno lo muove, un sasso finto disegna un otto lento sopra le creste. Dietro al titolo le righe si schiariscono, così le parole si leggono sempre.
Come funziona
Un quadrato e uno shader
La pagina è un canvas WebGL con un solo quadrato che la copre e un fragment shader che decide il colore di ogni pixel. Per ogni pixel lo shader passa le righe una alla volta, dalla più vicina (in basso) alla più lontana (in alto), e calcola dove sta la cresta di ognuna sopra quel punto.
La cresta di una riga
Ogni riga ha la sua base e un'altezza data da un rumore a tre ottave (fbm) letto in x e nell'indice della riga, moltiplicato per un inviluppo che la tiene alta al centro e piatta ai lati. Il rumore si legge spostandosi su un cerchio di raggio 0,55: dopo un giro intero, LOOP secondi, torna esattamente uguale, così l'animazione si ripete senza salti.
Chi sta davanti copre
Passando dalle righe davanti a quelle dietro, lo shader si ricorda se il pixel è già sotto la cresta di una riga più vicina, cioè fra la sua cresta e la sua base: in quel caso è carta e le righe dietro non si disegnano. È lo stesso trucco del pittore, fatto in un ciclo invece che con la profondità.
Il sasso nel ruscello
Il puntatore aggiunge a ogni riga una gobba gaussiana, larga STONE_SIZE della pagina e alta STONE, che pesa di più sulle righe la cui base è vicina al puntatore. La riga con la base più vicina prende il colore d'accento. Il sasso segue il puntatore con una molla misurata sul ticker di GSAP; dopo 2,4 secondi di calma torna il sasso finto, che fa un otto lento nello stesso giro del rumore.
Il titolo si legge
La posizione del titolo si misura dal DOM e passa allo shader come un rettangolo: con una distanza da rettangolo arrotondato (sdBox) e uno smoothstep largo, le righe vicine si schiariscono fino a quasi sparire. Così il titolo resta sopra lo sfondo senza un riquadro di carta.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LINES | script.js | 44 | Quante righe sul computer; sul telefono una ogni 16 px di altezza, almeno 22. |
AMPLITUDE | script.js | 0.15 | Quanto si alzano le creste, in parte dell'altezza della pagina. |
DETAIL | script.js | 3.2 | Quanto sono fitte le creste da un lato all'altro. |
LOOP | script.js | 12 | In quanti secondi il rumore e il sasso finto fanno un giro che torna uguale. |
STONE | script.js | 1.6 | Quanto si alzano le creste vicino al puntatore. |
STONE_SIZE | script.js | 0.09 | Quanto è largo il sasso, in parte della larghezza. |
LINE_WIDTH | script.js | 1.1 | Lo spessore delle righe, in px. |
TITLE_CLEAR | script.js | 0.84 | Quanto si schiariscono le righe dietro al titolo: 0 niente, 1 spariscono. |
Quando usarla
Come fondo della prima schermata di una radio, di un'etichetta discografica, di un podcast, di un osservatorio o di un'agenzia di viaggi in montagna; dietro al titolo di una pagina di dati o di un prodotto che parla di segnali, suono o paesaggio, quando si vuole un fondo vivo che resti sobrio.
Sul telefono
La stessa animazione: meno righe (una ogni 16 px di altezza), creste un poco più basse, sasso più largo e meno risoluzione per lo shader. Il dito che scorre sullo sfondo fa da sasso; appena lo si alza torna il sasso finto.
Con il movimento ridotto
Le creste sono già al loro posto e ferme: niente respiro, niente sasso, niente riga vermiglia. Il nome e il titolo compaiono in dissolvenza.
Trappole
- Le righe si disegnano dal davanti al fondo e non al contrario: così basta ricordarsi in un numero se il pixel è già coperto dalla carta di una riga più vicina, senza buffer di profondità.
- Il rumore che scorre nel tempo non torna mai uguale e il video dell'anteprima non sapeva quando fermarsi: leggendolo su un cerchio, il giro di LOOP secondi si chiude esattamente.
- Senza schiarire le righe dietro al titolo le parole si perdevano nelle creste: ora una distanza dal rettangolo del titolo le porta quasi a carta.
- Lo shader fa un ciclo per ogni riga e per ogni pixel: sul telefono la risoluzione si tiene a 1,25 (1,5 sul computer) (1,5 sul computer) e le righe scendono, così resta fluido.
- WebGL 1 vuole cicli con un numero fisso: il ciclo va fino a 72 e si interrompe con break quando l'indice esce dalle righe vere.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,3 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 22 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.
