Lo sfondo a moiré di cerchi

Sfondi, HoverGSAP, Canvas, Solo CSSMediaPeso compresso: Demo 5,8 KBGSAP 28 KBGratisScarica lo zip

Uno sfondo animato da mettere dietro a un titolo o a una sezione: due famiglie di cerchi concentrici a filo d'inchiostro su una carta bianco caldo. Il centro della prima gira piano, quello della seconda segue il puntatore su una molla, e dove i cerchi si incrociano nascono le frange del moiré, che si aprono a ventaglio e corrono sulla carta. Stile minimal.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Loupe</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz-italic.css">
  <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>
  <!-- the background: two families of hairline concentric rings on a canvas behind the page; one drifts slowly, the
       other follows the pointer, and where they overlap the moire fringes bloom and sweep across the paper -->
  <main class="pagina" data-pagina>
    <canvas class="fondo" aria-hidden="true" data-fondo></canvas>

    <header class="testa">
      <p class="marchio">Loupe</p>
      <p class="testa__nota">Opticians since 1984</p>
    </header>

    <section class="eroe">
      <div class="blocco" data-blocco>
        <p class="occhiello" data-entra>Eyewear, fitted by hand</p>
        <h1 class="titolo">
          <span class="riga"><span class="riga__dentro" data-riga>Look <em class="accento">twice,</em></span></span>
          <span class="riga"><span class="riga__dentro" data-riga>then see clearly.</span></span>
        </h1>
        <div class="azione" data-entra>
          <a class="pillola" href="#">
            <span class="pillola__scritta" data-testo="Book an eye test">Book an eye test</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

Apri il Playground

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 moiré di cerchi» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Una pagina intera color carta bianco caldo, il fondo di un ottico inventato, Loupe. Dietro a tutto, su un canvas, due famiglie di cerchi concentrici sottilissimi d'inchiostro, uno ogni nove pixel, che verso gli angoli sfumano e lasciano la carta vuota. Al centro il titolo: Eyewear, fitted by hand, poi due righe in Newsreader (Look twice, then see clearly.) con la parola twice in corsivo vermiglio, l'unico colore, e una pillola nera (Book an eye test) con la freccia; in alto il marchio in corsivo e Opticians since 1984. Il centro della prima famiglia gira piano intorno al centro della pagina; il centro della seconda segue il puntatore su una molla, e la seconda famiglia respira, un poco più larga e un poco più stretta. Dove i cerchi si incrociano nascono le frange del moiré: bande più scure e più chiare che si aprono a ventaglio fra i due centri e corrono su tutta la carta a ogni spostamento del puntatore. Dietro al titolo i cerchi si schiariscono in un ovale morbido. Quando nessuno muove il puntatore, un puntatore finto passeggia per la pagina su una curva che torna uguale. All'apertura le due famiglie si allargano dal loro centro come un'increspatura, una dopo l'altra, e le frange compaiono quando si incontrano; le righe del titolo salgono dalla loro finestra prendendo peso.

Come funziona

Due famiglie di cerchi

Su un canvas a tutta pagina (devicePixelRatio limitato a 2) ogni famiglia è una serie di cerchi concentrici, uno ogni PASSO pixel, fino all'angolo più lontano. Il moiré non si programma: nasce da solo dove due serie di righe sottili e regolari si sovrappongono con i centri un poco lontani, perché i cerchi ora coincidono e ora cadono negli spazi vuoti dell'altra famiglia.

Dodici tratti per famiglia

Verso i bordi i cerchi sfumano: da metà di LONTANO (una frazione della diagonale) fino a LONTANO la trasparenza scende a zero. Per non cambiare globalAlpha a ogni cerchio, i cerchi vanno in dodici Path2D secondo la loro trasparenza e ogni gruppo si disegna con un solo stroke: ventiquattro stroke per fotogramma in tutto.

Il centro sul puntatore e il respiro

Il centro della seconda famiglia segue il puntatore su una molla (MOLLA) integrata a mano sul ticker di GSAP; il passo dei suoi cerchi cambia del RESPIRO per cento con un seno legato alla fase del giro. Basta spostare un centro di pochi pixel perché le frange corrano di molto: è la lente d'ingrandimento del moiré.

La gomma dietro al titolo

Dopo i cerchi si passa a destination-out e si riempie un ovale con un gradiente radiale (il contesto stirato con scale), pieno al centro e trasparente sul bordo: dietro alle parole i cerchi si schiariscono di CALMA senza un bordo netto.

L'apertura, il puntatore finto, la pausa

Una timeline porta il raggio massimo delle due famiglie da 0 a 1, la seconda mezzo secondo dopo, con gli ultimi novanta pixel sfumati come il bordo di un'increspatura. Le righe del titolo salgono con back.out mentre il peso passa da 250 a 400. Dopo 2,4 secondi senza il puntatore vero il centro segue una curva di Lissajous legata al giro; IntersectionObserver e visibilitychange fermano tutto quando la pagina non si vede.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`PASSO`	script.js	`9`	La distanza fra un cerchio e l'altro, in px (sul telefono un poco meno).
`SPESSORE`	script.js	`1`	Lo spessore dei cerchi, in px.
`GIRO`	script.js	`24`	In quanti secondi il centro che va da solo fa un giro intero e torna uguale.
`DERIVA`	script.js	`0.14`	Quanto si allontana quel centro dal centro della pagina, in frazioni della pagina.
`RESPIRO`	script.js	`0.035`	Quanto si allarga e si stringe la seconda famiglia (0.035 vuol dire il 3,5%).
`MOLLA`	script.js	`[55, 12]`	La molla del centro che segue il puntatore: quanto è rigida e quanto è frenata.
`LONTANO`	script.js	`0.52`	Fin dove arrivano i cerchi prima di sfumare, in frazioni della diagonale della pagina.
`CALMA`	script.js	`0.9`	Quanto si schiariscono i cerchi dietro al titolo (0 per niente, 1 spariscono).

Provali nel Playground

Quando usarla

Come fondo della prima schermata di un ottico o di un marchio di occhiali, di uno studio di design, di una galleria d'arte cinetica, di uno studio di registrazione o di un festival di musica elettronica; in generale dietro a un titolo corto quando si vuole una carta chiara che si muove appena e sorprende quando si muove il mouse. Il colore dei cerchi e l'accento si cambiano nel CSS.

Sul telefono

Le stesse animazioni a misure adattate: i cerchi sono un poco più fitti e il titolo più piccolo, con la gomma che lo segue. Il dito sposta il centro della seconda famiglia mentre tocca e trascina; quando si alza torna il puntatore finto.

Con il movimento ridotto

I cerchi sono fermi, già allargati, con le frange al loro posto: niente giro, niente molla, niente apertura. Il titolo, la riga piccola e la pillola compaiono in dissolvenza.

Trappole

I cerchi fino agli angoli, tutti pieni, riempivano la pagina di inchiostro e il moiré diventava un rumore: con i cerchi che sfumano verso i bordi la carta resta vuota negli angoli e le frange si leggono al centro.
Cambiare globalAlpha cerchio per cerchio voleva centinaia di stroke a ogni fotogramma: i cerchi raggruppati in dodici livelli di trasparenza sono ventiquattro stroke in tutto.
Due famiglie con lo stesso centro non fanno nessun moiré: il puntatore finto passeggia su una curva che resta sempre un poco lontana dal centro della prima famiglia.

Librerie

GSAP 3.15.0, Newsreader (font variabile) 5.3.0, Archivo (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 5,8 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.