Lo sfondo di fili come un tessuto
Sfondi, Hover
NuovaGratis
Torna alla libreria
Lo sfondo a costellazione
Uno sfondo animato da mettere dietro a un titolo, nello stile minimal: su un bianco caldo pochi punti d'inchiostro vagano piano e, quando due si avvicinano, li unisce un filo sottilissimo che sfuma con la distanza. Il puntatore attira appena i punti vicini e lancia verso i tre più vicini i suoi fili blu oltremare; due volte a giro i punti di un angolo si radunano nella costellazione della vela, ne compare il nome e la figura si scioglie.
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>Vela</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jost@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the background: a few points drifting on a canvas behind the page; points that come close are joined by a
hairline, the pointer draws them in and its threads take the accent, and now and then the points near a corner
gather into a small constellation and let it go -->
<main class="pagina" data-pagina>
<canvas class="fondo" aria-hidden="true" data-fondo></canvas>
<header class="testa">
<p class="marchio">Vela</p>
<p class="testa__nota">Observatory & planetarium</p>
</header>
<section class="eroe">
<div class="blocco" data-blocco>
<p class="occhiello" data-entra>Open nights, every Friday</p>
<h1 class="titolo">
<span class="riga"><span class="riga__dentro" data-riga>Look up and</span></span>
<span class="riga"><span class="riga__dentro" data-riga>join the dots.</span></span>
</h1>
<div class="azione" data-entra>
<a class="pillola" href="#">
<span class="pillola__scritta" data-testo="Book a night">Book a night</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.
22 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 costellazione» da Animorio e adattala al mio sitoCosa fa
Una prima pagina bianco caldo con il titolo di un osservatorio inventato, Vela: «Look up and join the dots.». Dal centro verso i bordi nascono una cinquantina di punti d'inchiostro, piccoli e pieni, che poi vagano piano, ognuno sul suo giro. Quando due punti si avvicinano li unisce un filo sottilissimo, più chiaro quanto più sono lontani, che si spezza quando si separano: la rete cambia sempre, ma intorno al titolo, alla riga piccola e al pulsante i fili si diradano e le parole restano sul bianco pulito. Il puntatore attira appena i punti che gli passano vicino, che lo raggiungono su una molla e tornano indietro con un piccolo dondolio quando si allontana, e lancia verso i tre più vicini i suoi fili nell'unico accento, un blu oltremare: ogni filo cresce dal punto verso il puntatore, passa di un niente e torna; i fili grigi fra due punti presi dal puntatore diventano blu anche loro. Due volte a giro, prima in basso a sinistra e poi in alto a destra, i sei punti più vicini a un angolo libero si radunano nella figura della vela e ci si posano con un filo di troppo: i fili d'inchiostro della costellazione si disegnano uno dopo l'altro, sotto compare il nome VELA, poi i fili si ritirano, il nome se ne va e i punti tornano a vagare. Quando nessuno muove il puntatore, uno finto gira piano intorno al titolo.
Come funziona
I punti e il loro giro
Su un canvas a tutta pagina (devicePixelRatio limitato a 2) i punti stanno su una griglia scossa con un generatore di numeri a caso col seme fisso, così sono sparsi senza buchi né mucchi e ogni apertura è uguale. Ogni punto vaga su due seni, uno per asse, con frequenze intere sul giro di GIRO secondi: quando la fase della timeline torna a zero, tutti i punti sono di nuovo al punto di partenza e il giro ricomincia identico.
I fili e le zone pulite
Per ogni coppia di punti più vicini di FILO pixel si disegna un filo con la trasparenza (1 meno la distanza su FILO) al quadrato: i fili lunghi quasi non si vedono e nascono e muoiono senza scatti. Intorno al blocco del titolo e alle scritte della testata una superellisse con una piuma fa da maschera: ogni filo prende la trasparenza del suo capo più coperto, quindi vicino alle parole la rete si dirada.
Il puntatore
Ogni punto ha uno spostamento suo, che una molla (MOLLA: rigidità e freno) porta verso il puntatore di al massimo ATTIRA pixel, con una curva liscia sulla distanza fino a RAGGIO. I tre punti più vicini ricevono un valore di legame che cresce su una molla un po' più viva, fino a 1,06: è la parte del filo blu disegnata dal punto verso il puntatore, che quindi arriva, passa di un niente e torna. Senza puntatore vero ne gira uno finto su un'ellisse intorno al titolo, legato alla stessa fase.
La vela
Nella timeline del giro due figure partono a un settimo e a metà del giro più un settimo. All'inizio di ognuna, per ogni stella della vela si sceglie il punto libero più vicino non ancora preso; il punto va verso la sua stella con un tween su un numero solo, back.out(0.7), che fa il filo di troppo. Poi i sette fili d'inchiostro si disegnano sfalsati, compare il nome scritto nel canvas con letterSpacing, e alla fine tutto torna indietro con power2.inOut. I fili grigi che toccano una stella si attenuano finché la figura c'è.
Apertura, ridotto e misure
All'apertura i punti nascono dal centro verso i bordi con un piccolo rimbalzo, e le due righe del titolo salgono dalla loro finestra prendendo peso: Jost passa da 200 a 420 mentre la spaziatura si stringe. Al resize si rimisurano pagina, zone pulite e punti; sul telefono i punti sono il 60% e i fili più corti. Un IntersectionObserver spegne tutto quando la pagina non si vede. Con il movimento ridotto la rete è disegnata ferma e il resto compare in dissolvenza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PUNTI | script.js | 56 | Quanti punti sul computer (sul telefono il 60%). |
FILO | script.js | 190 | Fin dove due punti si uniscono con un filo, in px (sul telefono un po' meno). |
ATTIRA | script.js | 22 | Di quanto il puntatore tira a sé i punti vicini, in px. |
RAGGIO | script.js | 210 | Fin dove i punti sentono il puntatore, in px. |
FILI_PUNTATORE | script.js | 3 | Quanti fili nell'accento lancia il puntatore verso i punti più vicini. |
GIRO | script.js | 18 | In quanti secondi il giro torna uguale; in un giro si formano due figure. |
NOME | script.js | 'Vela' | Il nome scritto sotto la costellazione. |
MOLLA | script.js | [90, 11] | La molla dei punti tirati dal puntatore: quanto è rigida e quanto è frenata. |
SPESSORE | script.js | 0.8 | Lo spessore dei fili, in px. |
Quando usarla
Come fondo della prima schermata di un osservatorio, di un planetario, di una rivista di scienza, di un'app di dati o di reti, di una conferenza, di uno studio che lavora sui collegamenti fra le cose; in generale dietro a un titolo corto quando si vuole un bianco vivo e silenzioso. I colori dei fili, dei punti e dell'accento si cambiano nel CSS, la figura e il nome nello script.
Sul telefono
Le stesse animazioni a misure adattate: meno punti, fili più corti, la vela un po' più grande in proporzione e la zona pulita che segue il titolo. Il dito attira i punti e lancia i fili mentre tocca e trascina; quando si alza torna il puntatore finto.
Con il movimento ridotto
La rete è disegnata ferma: niente vagare, niente puntatore, niente figure. La rete, il titolo, la riga piccola e la pillola compaiono in dissolvenza.
Trappole
- Il vagare con velocità a caso non torna mai uguale, e il video dell'anteprima non si sarebbe fermato da solo: ogni punto si muove su seni a frequenza intera sulla fase del giro, così a ogni ripresa la scena è identica.
- Il puntatore finto passava sopra al titolo e i fili blu lo attraversavano: ora gira su un'ellisse intorno alle parole, e i suoi fili prendono anche la trasparenza della zona pulita dove sta il puntatore (mai meno di un quarto).
- Sul telefono la vela, misurata sul lato corto, veniva piccola e i fili grigi della rete la coprivano: ora la misura prende anche la larghezza, i fili sono più corti e quelli che toccano una stella della figura si attenuano.
- Quando il puntatore vero arriva dopo quello finto, i fili blu partivano da dove era il finto e attraversavano la pagina: al primo movimento vero il puntatore salta subito dove è il mouse.
Librerie
GSAP 3.15.0, Jost (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 21 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.
