Lo sfondo dei sassolini che si fanno spazio
Sfondi, Hover, Fisica
NuovaGratis
Torna alla libreria
Lo sfondo di vento a tratti
Uno sfondo animato da mettere dietro a un titolo o a una sezione: tanti tratti corti d'inchiostro portati dal vento su una carta bianco caldo, come in una carta meteorologica. L'aria gira intorno al titolo come intorno a uno scoglio, nessun tratto passa sulle parole, e dove va il puntatore il vento si arriccia in un mulinello; uno ogni trenta tratti è blu. Stile minimal.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Leeward</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the background: short ink strokes carried by the wind on a canvas behind the page, like a weather map; the air
parts round the title as round a rock, and curls into an eddy where the pointer goes -->
<main class="pagina" data-pagina>
<canvas class="fondo" aria-hidden="true" data-fondo></canvas>
<header class="testa">
<p class="marchio">Leeward</p>
<p class="testa__nota">Sailing school</p>
</header>
<section class="eroe">
<div class="blocco" data-blocco>
<p class="occhiello" data-entra>Weekend courses on the open water</p>
<h1 class="titolo">
<span class="riga"><span class="riga__dentro" data-riga>Learn to read</span></span>
<span class="riga"><span class="riga__dentro" data-riga>the wind.</span></span>
</h1>
<div class="azione" data-entra>
<a class="pillola" href="#">
<span class="pillola__scritta" data-testo="Find a course">Find a course</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.
20 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 vento a tratti» da Animorio e adattala al mio sitoCosa fa
Una pagina intera color carta bianco caldo, il fondo di una scuola di vela inventata, Leeward. Dietro a tutto, su un canvas, qualche centinaio di tratti corti d'inchiostro, ognuno la scia di un granello d'aria che segue il vento: una corrente da sinistra a destra, appena in salita, che un rumore lento fa girare un poco qua e là, così i tratti disegnano onde larghe come le frecce di una carta meteorologica. Ogni tratto nasce sfumando, corre per qualche secondo e sparisce; uno ogni trenta è blu, l'unico colore. Al centro il titolo: Weekend courses on the open water, poi due righe in Bricolage Grotesque stretto (Learn to read the wind.) e una pillola nera (Find a course) con la freccia; in alto il marchio e Sailing school. Intorno al titolo l'aria si apre come intorno a uno scoglio: i tratti lo aggirano curvando, ai suoi fianchi corrono più veloci, dietro lasciano una scia calma, e nessuno passa sulle parole. Dove va il puntatore il vento si arriccia in un mulinello e i tratti girano intorno; quando nessuno lo muove, un puntatore finto passeggia per la pagina e il mulinello è più leggero. All'apertura il vento entra da sinistra e riempie la pagina, e le righe del titolo salgono stringendosi e prendendo peso.
Come funziona
I granelli e le loro scie
Su un canvas a tutta pagina ci sono tanti granelli quanti ne stanno, uno ogni FITTI pixel quadrati (al massimo 1400). Ogni granello ha una vita di due-cinque secondi, una posizione e una scia: gli ultimi SCIA punti in un Float32Array che scorre di un posto a ogni fotogramma. Il tratto è la linea spezzata della scia, e la sua trasparenza sale e scende con la vita.
Il vento
In ogni punto il vento ha velocità VENTO e direzione DIREZIONE, girata di ± GIRA gradi da un rumore di Perlin 2D le cui coordinate girano in tondo in ventotto secondi: i tratti fanno onde larghe che cambiano piano.
Lo scoglio
Il titolo è un ostacolo: nella misura del suo ovale (x e y divise per i due raggi) il vento è quello intorno a un cilindro, v = c − conj(c / z²), dove c è la direzione del vento e z il punto come numero complesso. L'aria si apre davanti, accelera ai fianchi e si richiude dietro; il granello che finisse dentro rinasce altrove. Lontano dall'ovale l'effetto sfuma.
Il mulinello
Intorno al puntatore si aggiunge una velocità che gira (perpendicolare al raggio, forte MULINELLO px al secondo) con un poco di richiamo verso il centro, pesata da una campana di Gauss. Il puntatore segue quello vero su una molla; senza, una passeggiata finta legata al giro fa un mulinello più leggero.
Il disegno e l'apertura
Le scie vanno in sei Path2D secondo la trasparenza, più sei per i tratti blu: dodici stroke per fotogramma. All'apertura un fronte attraversa la pagina da sinistra e i tratti si accendono solo quando lui è passato. Col movimento ridotto i granelli corrono un secondo e mezzo senza essere disegnati e poi resta una foto sola.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
VENTO | script.js | 140 | La velocità del vento, in px al secondo. |
DIREZIONE | script.js | -6 | Da dove soffia, in gradi (0 da sinistra a destra, negativo sale un poco). |
GIRA | script.js | 24 | Di quanti gradi il rumore fa girare il vento qua e là. |
FITTI | script.js | 2300 | Un tratto ogni quanti px quadrati di pagina (più piccolo, più tratti). |
SCIA | script.js | 13 | Quanto è lunga la scia di ogni tratto, in fotogrammi. |
MULINELLO | script.js | 120 | Quanto forte gira il vento intorno al puntatore, in px al secondo. |
BLU | script.js | 30 | Un tratto blu ogni quanti (0 nessuno). |
SPESSORE | script.js | 1.1 | Lo spessore dei tratti, in px. |
Quando usarla
Come fondo della prima schermata di una scuola di vela o di kitesurf, di un'app del meteo o del vento, di un marchio di giacche e attrezzatura all'aperto, di uno studio di architettura del paesaggio o di una regata; in generale dietro a un titolo corto quando si vuole una carta chiara che si muove sempre, con l'aria di un disegno a penna. Il colore dei tratti e il blu si cambiano nel CSS.
Sul telefono
Le stesse animazioni a misure adattate: i tratti sono un poco più fitti per lo schermo piccolo, lo scoglio segue il titolo più piccolo e il mulinello si stringe. Il dito fa il mulinello mentre tocca e trascina; quando si alza torna il puntatore finto.
Con il movimento ridotto
Il vento è fermo: una sola foto dei tratti, già distesi intorno allo scoglio del titolo, senza scorrere e senza mulinello. Il titolo, la riga piccola e la pillola compaiono in dissolvenza.
Trappole
- Con il doppio dei tratti, scie più lunghe e il rumore che girava il vento di sessanta gradi la pagina diventava una matassa: meno tratti, scie corte e venti gradi la lasciano ariosa e la corrente si legge.
- Un mulinello grande come mezza pagina strappava i tratti e li accumulava a sinistra dello scoglio: più piccolo e, col puntatore finto, più leggero.
- I tratti nascevano anche dentro all'ovale del titolo e restavano incastrati: ogni granello che nasce o arriva dentro rinasce subito fuori.
Librerie
GSAP 3.15.0, Bricolage Grotesque (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 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.
