Lo sfondo di creste in fila
Sfondi, WebGL, Hover
NuovaGratis
Torna alla libreria
Lo sfondo della lente gravitazionale
Sfondo animato in WebGL, nello stile minimal, da mettere dietro a un titolo: una griglia di righe sottili e una parola grande si piegano attorno a una massa invisibile che segue il puntatore, come la luce attorno a una galassia. Le lettere si stirano in archi e, quando la massa passa sopra una lettera, si chiude un anello di Einstein vermiglio. Un clic o un tocco dà un colpo alla massa.
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>Umbra</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 word behind a gravitational lens: a WebGL 2 shader bends a hairline grid and a big word around an invisible
mass that follows the pointer; where the light is stretched most, the arcs turn vermilion -->
<main class="pagina" data-pagina>
<canvas class="tela" aria-hidden="true" data-tela></canvas>
<h1 class="parola" data-parola>Umbra</h1>
<header class="testa">
<p class="marchio" data-entra>Umbra</p>
<p class="testa__nota" data-entra>Deep sky observatory</p>
</header>
<footer class="piede">
<p class="nota" data-entra data-nota>Move to bend the light</p>
<p class="scala" data-entra aria-hidden="true"><i data-scala></i>1″</p>
<p class="misura" data-entra>Einstein radius <span data-raggio>0.00</span>″</p>
</footer>
</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.
23 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 della lente gravitazionale» da Animorio e adattala al mio sitoCosa fa
Su un foglio bianco caldo a quadretti sottili, con una croce di registro ogni quattro righe come su una lastra fotografica, c'è una parola grande, Umbra, il nome di un osservatorio inventato. Davanti c'è una massa che non si vede: la luce che le passa vicino si piega, come attorno a una galassia o a un buco nero, e la griglia e la parola si curvano intorno a lei. All'inizio la pagina è dritta; poi la massa arriva, con una molla che si assesta, e le righe si gonfiano in cerchi. La massa segue il puntatore, o il dito, con un piccolo ritardo e un'ondeggiata di un pixel quando si ferma; quando nessuno la porta gira piano attorno alla parola. Passando vicino alle lettere le stira in archi lunghi, e dall'altra parte della massa compare la loro seconda immagine, piccola e capovolta, come succede davvero nel cielo. Dove la luce si stira di più l'inchiostro diventa vermiglio, l'unico colore: quando la massa passa proprio sopra una lettera, la lettera si apre in un anello di Einstein, un cerchio rosso dentro un cerchio nero. Dentro il cerchio la carta è appena più scura, l'ombra che dà il nome all'osservatorio. Un clic o un tocco dà un colpo alla massa, che si gonfia e torna con un elastico; in basso il raggio di Einstein si legge in secondi d'arco, con la scala della lastra accanto.
Come funziona
Un pixel guarda dove lo manda la lente
Tutto è un solo fragment shader WebGL 2 su un triangolo grande quanto la pagina. Per ogni pixel θ è la distanza dalla massa e θE il raggio di Einstein: la lente puntiforme dice che quel pixel vede il foglio nel punto β = θ · (1 − θE² / |θ|²). Il foglio non si sposta mai: è lo shader che, pixel per pixel, va a leggere un punto diverso. Una piccola costante sotto |θ|² evita la divisione per zero proprio sopra la massa.
La griglia fatta con le derivate
La griglia non è un'immagine: nello shader le righe si ricavano da fract() delle coordinate del foglio divise per il passo, e si misurano in pixel con fwidth(), così restano sottili e nitide anche dove la lente le stira o le stringe. Ogni quattro righe una è più scura e all'incrocio c'è una croce di registro. Dove le righe sarebbero più fitte di un pixel la griglia si spegne, e sul cerchio di Einstein, dove tutto il cerchio guarda lo stesso punto del foglio, si spegne del tutto: se no disegnerebbe un anello attorno al puntatore.
La parola e l'anello vermiglio
La parola è disegnata una volta in un canvas 2D grande come la pagina e caricata come texture; lo shader la legge nel punto β. L'ingrandimento della lente puntiforme è 1 / |1 − (θE/θ)⁴|: dove supera GLOW l'inchiostro passa al vermiglio, in un salto corto, così gli archi più stirati hanno un bordo rosso netto. Quando sotto la massa c'è una lettera, tutto il cerchio di Einstein la guarda e nasce l'anello.
La massa su una molla
La massa segue il puntatore con una molla vera: accelerazione = rigidità · (mira − posizione) − smorzamento · velocità, in tre passi piccoli per fotogramma sul ticker di GSAP. Con 70 e 13 la molla è poco sotto il critico, così si ferma con un'ondeggiata appena visibile. Senza puntatore da due secondi e mezzo la mira è una curva di Lissajous lenta attorno alla parola.
L'entrata e i colpi
All'entrata le scritte piccole compaiono sfalsate e il raggio di Einstein sale da zero col suo elastic.out(1, 0.55) in 2,2 secondi: le righe si gonfiano e si assestano. Un clic porta la massa a PULSE volte e la riporta con elastic.out(1, 0.32); se nessuno tocca, ogni sette secondi una timeline le dà da sola un colpo più piccolo. Il raggio in basso si aggiorna solo quando cambia la seconda cifra decimale.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | Umbra | La parola dietro la lente. |
MASS | script.js | 0.17 | Il raggio di Einstein, in frazione del lato corto della pagina: più alto, la lente piega di più. |
STIFFNESS | script.js | 70 | Quanto è rigida la molla che porta la massa verso il puntatore. |
DAMPING | script.js | 13 | Quanto la molla frena: più basso, la massa ondeggia di più prima di fermarsi. |
GRID | script.js | 34 | Il passo della griglia, in px. |
LINE | script.js | 1 | Lo spessore delle righe, in px. |
PULSE | script.js | 1.55 | Quanto cresce la massa a un clic o a un tocco. |
DRIFT | script.js | 1 | La velocità della deriva quando nessuno tocca. |
GLOW | script.js | 4 | Da quale ingrandimento la luce diventa vermiglia: più alto, archi vermigli più sottili. |
WEIGHT | script.js | 720 | Il peso della parola. |
Quando usarla
Come sfondo dell'apertura di un osservatorio, di un planetario, di un museo della scienza, di una rivista di astronomia o di un'azienda dello spazio; dietro al titolo di una conferenza di fisica; come pagina d'ingresso di uno studio di design che vuole un fondo vivo ma pulito, che si muove solo quando lo si tocca.
Sul telefono
La stessa animazione: la parola si misura sulla larghezza e sull'altezza, il raggio di Einstein sul lato corto. Il dito che trascina porta la massa; senza dito la massa gira da sola attorno alla parola e ogni tanto prende un colpo. La scala della lastra si nasconde sotto i 520 px.
Con il movimento ridotto
La lente è già al suo posto e ferma, in basso a destra della parola, che si legge tutta: niente entrata, niente deriva e niente colpi. Il puntatore sposta la lente subito, senza molla; le scritte compaiono in dissolvenza.
Trappole
- Sul cerchio di Einstein β vale quasi zero: tutto il cerchio legge lo stesso punto del foglio. Se lì c'è una riga della griglia, il cerchio intero diventa una riga, un anello che segue il puntatore. La griglia e le croci si spengono dove l'ingrandimento è alto; resta solo la parola, che fa l'anello quando ci passa sopra.
- Righe disegnate con una soglia fissa sulle coordinate del foglio spariscono o diventano macchie dove la lente le stringe: lo spessore va misurato in pixel dello schermo con fwidth(), e la griglia va spenta dove una riga sarebbe più sottile di un pixel.
- Il passaggio fra nero e vermiglio con una soglia larga faceva un alone sfocato arancio attorno agli archi; con un salto corto (da GLOW a 1,35 volte GLOW) il bordo rosso è netto.
- Il carattere arriva dopo il primo disegno: la texture della parola si rifà appena document.fonts.load lo dice pronto, e a ogni resize.
- In GLSL ES 3.0 una variabile vec2 non si inizializza da un float: «vec2 cella = passo * 4.0» non compila. Va dichiarata float.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,9 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 23 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.
