Lo sfondo a carta millimetrata
Sfondi, Scroll
NuovaGratis
Torna alla libreria
Lo sfondo delle onde d’interferenza allo scroll
Scorri dentro l’anteprima
Uno sfondo da scorrere, nello stile minimal: su un nero quasi puro, due sorgenti di onde circolari disegnate solo con le creste sottili, come due sassi in uno stagno visto dall’alto. Scorrendo le sorgenti si allontanano e la figura d’interferenza si apre: le creste si accendono dove si sommano e spariscono sulle linee di silenzio, e lungo le frange scorre un filo di luce. Il puntatore è una terza sorgente vermiglia, e un tocco ne ribalta la fase.
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>Antinode</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.3.0/wght.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a long section with a sticky stage: two sources of circular waves, drawn as thin crest lines on a canvas;
scrolling moves the sources apart and the interference pattern changes; the pointer is a third, weak source -->
<main class="corsa" data-corsa>
<section class="palco" data-palco>
<canvas class="onde" aria-hidden="true" data-onde></canvas>
<header class="testa">
<p class="marchio" data-entra>Antinode</p>
<p class="testa__nota" data-entra>Acoustic design studio</p>
</header>
<div class="frasi" aria-live="polite">
<p class="frase" data-frase><span class="frase__occhio">One source</span><span class="frase__testo">Every sound starts as a ring.</span></p>
<p class="frase" data-frase><span class="frase__occhio">Two sources</span><span class="frase__testo">Where crests meet, it grows.</span></p>
<p class="frase" data-frase><span class="frase__occhio">Further apart</span><span class="frase__testo">Where they cross, silence.</span></p>
</div>
<footer class="piede">
<p class="piede__nota" data-entra data-cenno>Scroll to part the sources, tap to flip your own</p>
<p class="piede__lettura" aria-hidden="true" data-entra>
<span class="lettura__nome">Spacing</span>
<span class="lettura__valore" data-distanza>0.0</span>
<span class="lettura__unita">λ</span>
<span class="lettura__fase" data-fase>In phase</span>
</p>
</footer>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.
27 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 delle onde d’interferenza allo scroll» da Animorio e adattala al mio sitoCosa fa
Una sezione lunga con un palco fermo, il fondo di uno studio di acustica inventato, Antinode. All’apertura cadono due sassi nello stesso punto, uno dopo l’altro: due piccole croci si posano con un rimbalzo e da lì gli anelli sottili si allargano fino ai bordi. Gli anelli sono le creste delle onde e si muovono piano verso l’esterno, più chiari vicino alle sorgenti. Scorrendo, le due sorgenti si separano lungo il lato lungo del palco, fino a cinque lunghezze d’onda e mezza: la luce di ogni tratto di cresta la decide l’interferenza vera, piena dove le onde arrivano insieme e nulla dove arrivano opposte, così compaiono le linee di silenzio. Le frange dove le onde si sommano sono iperbole coi fuochi nelle due sorgenti: si disegnano tenui e le percorre un filo di luce a trattini. A tre punti della corsa una frase cambia al centro, sopra un velo nero morbido (One source, Two sources, Further apart), e con lei passa un’onda più chiara; in basso la distanza si legge in lunghezze d’onda. Il puntatore è una terza sorgente, più debole, su una molla: le sue onde sono le sole vermiglie, e un tocco ne ribalta la fase con un piccolo rimbalzo (In phase diventa Opposite phase). Quando nessuno lo muove, una sorgente finta gira piano sul palco.
Come funziona
Il palco e la corsa
La sezione è alta 420lvh e il palco dentro è sticky, alto 100lvh. Un ScrollTrigger legge l’avanzamento da 0 a 1 (con Lenis per lo scorrimento morbido) e dà la distanza voluta fra le sorgenti: ferme insieme nel primo 14%, poi si separano con una curva morbida fino ad APERTURA lunghezze d’onda. La distanza vera la segue su una molla, così la figura non salta mai.
Le creste di una sorgente
Ogni sorgente disegna i suoi anelli a una lunghezza d’onda l’uno dall’altro, spostati in avanti di VELOCITA onde al secondo. Ogni anello è fatto di tratti di 7 px; quelli fuori dal palco si saltano. L’ampiezza cala piano con la distanza (1 diviso la radice di 1 + r / 3,4 lunghezze d’onda) e all’apertura un bordo morbido corre in fuori: prima del suo arrivo non c’è niente.
L’interferenza
Due onde uguali che arrivano in un punto con cammini r1 e r2 si sommano in 2 cos(k (r1 − r2) / 2). Ogni tratto prende come luce quel valore assoluto alla potenza 1,6, e finisce in uno di quattro mazzi di luce e spessore: quattro percorsi, quattro stroke per sorgente. Dove il valore va a zero le creste spariscono: sono le linee di silenzio.
Le frange e il filo di luce
I punti dove la differenza dei cammini è un numero intero di lunghezze d’onda stanno su iperbole coi fuochi nelle sorgenti: x = a cosh u, y = b sinh u, con a metà della differenza e b² = c² − a². Si disegnano in un percorso solo, tenue, e poi di nuovo con un tratteggio di 7 px ogni 88 il cui inizio avanza di FLUSSO px al secondo.
La sorgente del puntatore
Il puntatore è una terza sorgente su una molla (MOLLA), forte PUNTATORE: i suoi anelli si disegnano in vermiglio e si spengono lontano da lui. Un pointerdown porta la sua fase da 0 a π, o al contrario, con elastic.out in 0,9 s: gli anelli scivolano di mezza onda e passano un attimo oltre. Ogni frase nuova e ogni tocco fanno partire un’onda più chiara dalle sorgenti. Dopo 2,4 s senza il puntatore vero, una sorgente finta segue una curva lenta.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
ONDA | script.js | 0.07 | La lunghezza d’onda, in parti del lato corto del palco. |
VELOCITA | script.js | 0.55 | Quante onde al secondo partono da ogni sorgente. |
APERTURA | script.js | 5.5 | Quanto si allontanano le sorgenti alla fine della corsa, in lunghezze d’onda. |
PUNTATORE | script.js | 0.6 | Quanto è forte la sorgente del puntatore rispetto alle altre due. |
FLUSSO | script.js | 38 | Quanto scorre veloce la luce lungo le frange, in px al secondo. |
MOLLA | script.js | [70, 12] | La molla della sorgente del puntatore: quanto è rigida e quanto è frenata. |
SPESSORE | script.js | 1 | Lo spessore delle creste più vicine alle sorgenti, in px. |
Quando usarla
Come fondo da scorrere di uno studio di acustica o di sound design, di una sala da concerti, di un’azienda di altoparlanti o di cuffie, di un laboratorio di fisica o di un museo della scienza, di una pagina che racconta un prodotto per tappe; in generale dietro a frasi corte quando si vuole un fondo scuro che cambia mentre si scende. Il colore delle linee e l’accento si cambiano nel CSS.
Sul telefono
Le stesse animazioni a misure adattate: la lunghezza d’onda si misura sul lato corto, e in un palco alto le sorgenti si separano in verticale, così la figura riempie tutta la casella. Il dito sposta la terza sorgente e un tocco ne ribalta la fase; la pagina continua a scorrere in verticale.
Con il movimento ridotto
La figura è ferma, con le sorgenti a metà della loro distanza e senza la sorgente del puntatore: niente anelli che si allargano, niente filo di luce, niente onde più chiare. Le frasi cambiano allo scroll in dissolvenza.
Trappole
- Le isolinee della somma delle onde (marching squares) fanno tanti ovali piccoli dove le creste si incrociano e la figura diventa piena: meglio disegnare gli anelli di ogni sorgente e dare a ogni tratto la luce dell’interferenza.
- Con le sorgenti troppo lontane le frange diventano fitte e restano solo crocette: la distanza si misura in lunghezze d’onda e si ferma intorno a cinque e mezza.
- Il bordo che corre all’apertura non può andare alla velocità delle onde, che è lenta apposta: ha la sua velocità, FRONTE, molto più alta.
Librerie
GSAP 3.15.0, ScrollTrigger 3.15.0, Lenis 1.3.26, Geist (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,4 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.
Collaudo
Provata il 24 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.
