Il tunnel che fa spazio

WebGL, Fisica, HoverWebGL, GSAPImpegnativaPeso compresso: Demo 9,0 KBGSAP 28 KBThree.js + RoomEnvironment 176 KBGratisScarica lo zip

Anelli e tubi d’oro e perle galleggiano senza peso in un anello spesso intorno al centro dello schermo: un tunnel visto da dentro, con il nome nel vuoto in mezzo. Il puntatore li spinge via e loro girano mentre si spostano; un clic apre la parete fino ai bordi e la lascia tornare. All’inizio arrivano di corsa da fuori mentre l’inquadratura si allarga.

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>The tunnel that makes room</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/cormorant@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/cormorant@5.3.0/wght-italic.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/manrope@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.178.0/build/three.module.min.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.178.0/examples/jsm/"
      }
    }
  </script>
</head>
<body>
  <!-- the tunnel: a WebGL canvas behind everything -->
  <canvas class="stage" data-stage aria-hidden="true"></canvas>

  <header class="bar">
    <a class="brand" href="#">Hoop House</a>
    <nav class="bar__nav" aria-label="Sections">
      <a href="#">Rings</a>
      <a href="#">Hoops</a>
      <a href="#">Pearls</a>
      <a href="#">Visit</a>
    </nav>
  </header>

  <!-- what sits in the empty middle of the tunnel -->
  <main class="hole">
    <svg class="mark" viewBox="0 0 64 64" aria-hidden="true">
      <circle cx="32" cy="32" r="22" fill="none" stroke="currentColor" stroke-width="5"/>
      <circle cx="32" cy="32" r="13" fill="none" stroke="currentColor" stroke-width="1.6" opacity="0.6"/>
    </svg>
    <h1 class="title">Fine jewellery, <em>weightless.</em></h1>
    <a class="shop" href="#">Shop the hoops</a>
  </main>

  <p class="hint" data-hint>Move the pointer to make room. Click to scatter everything.</p>

  <!-- where the poster and the collaudo put the pointer: on the tunnel wall, right of the middle -->
  <span class="aim" data-aim aria-hidden="true"></span>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script type="module" 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.

30 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 «Il tunnel che fa spazio» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

La home di una gioielleria inventata, Hoop House. Su un fondo verde bosco, più chiaro al centro, galleggiano 120 oggetti: anelli d’oro, tubi d’oro cavi come perline e perle, in tre ori diversi, lucidi o spazzolati. Stanno in un anello spesso intorno al centro, che resta vuoto: lì ci sono un piccolo marchio ad anello, il titolo «Fine jewellery, weightless.» e un bottone. In alto il nome e quattro link, in basso un suggerimento. All’arrivo gli oggetti entrano di corsa da fuori dallo schermo mentre l’inquadratura si allarga; poi girano piano su se stessi e ondeggiano. Il puntatore li spinge via, tanto più forte quanto più ci entra dentro: si spostano girando, si urtano fra loro e tornano quando il puntatore se ne va. Un clic apre la parete fino ai bordi della finestra e la richiude in un paio di secondi. Se per due secondi e mezzo nessuno muove il mouse, un puntatore invisibile gira lungo la parete.

Come funziona

La scena

Three.js disegna su un canvas trasparente sopra il fondo in CSS. I riflessi dell’oro vengono da una stanza di luci (RoomEnvironment) passata dal PMREMGenerator, con il tone mapping ACES. L’obiettivo sta a 18 unità dal centro e gli oggetti galleggiano intorno alla profondità −5; l’angolo parte da 18 gradi e a ogni fotogramma fa il 12% della strada verso 40, così mentre gli oggetti arrivano l’inquadratura si allarga.

Gli oggetti

Tre forme: un toro (raggio 1, spessore 0,3), una perlina cava fatta girando un rettangolo con gli angoli tondi (LatheGeometry) e una sfera. Ogni forma con la sua finitura è un InstancedMesh: oro lucido (ruvidità 0,16), oro spazzolato (0,42), perla con vernice, velluto e un po’ di iridescenza. Il colore di ognuno è setColorAt. Le posizioni vengono da un caso con il seme, quindi il tunnel nasce sempre uguale: angolo a caso, raggio fra 15 e 25 unità (fuori dallo schermo), profondità −5 più o meno 1.

La fisica

Sessanta passi al secondo, a tempo fisso. Ogni forza è un impulso diviso per la massa, con i numeri dell’originale: le masse vengono dal volume dei suoi collisori (4,8 s³ gli anelli, 2,4 s³ i tubi). Fuori dall’anello si torna dentro con 2 · (d − R); dentro, dopo un secondo e mezzo, si esce con 5 · (0,9R − d) e, sotto il raggio del buco, con 15 · (R − d). Il puntatore spinge con PUSH · (REACH + misura − distanza). Ogni passo la velocità si divide per 1 + passo · DAMPING e non supera 30 unità al secondo.

Gli urti

Ogni oggetto è una palla o una capsula, cioè un segmento con un raggio: per due oggetti si cercano i punti più vicini dei loro segmenti (il metodo di Ericson). Se sono più vicini della somma dei raggi si allontanano, ognuno in proporzione alla massa dell’altro, e la parte di velocità che li avvicinava si annulla con un rimbalzo di 0,15. Un urto fuori centro aggiunge una rotazione. Lungo l’asse c’è un cilindro: nessun oggetto ci si avvicina più del buco.

Il puntatore e il clic

Il puntatore sullo schermo diventa un punto alla profondità degli oggetti con un Raycaster, ricalcolato a ogni passo con l’obiettivo del momento. Il dito vale finché resta giù. Il clic è un tween GSAP: in 0,35 secondi un valore va da 0 a 1 e in 1,4 torna a 0; intanto il raggio dell’anello va verso SCATTER e chi sta dentro viene spinto fuori con (R − d) · valore · 30. Senza puntatore per WANDER secondi ne gira uno invisibile lungo la parete.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`COUNT`	script.js	`120`	Quanti oggetti galleggiano su uno schermo largo; su uno stretto sei su dieci.
`MIX`	script.js	`[0.45, 0.3, 0.25]`	Le parti di anelli, tubi e perle.
`HOLE`	script.js	`3.4`	Il raggio del vuoto al centro, in unità della scena (la finestra è alta circa 17).
`PUSH`	script.js	`180`	Quanto spinge il puntatore: l’impulso per ogni unità che entra in un oggetto.
`REACH`	script.js	`3.5`	Fin dove spinge il puntatore, in unità, più la misura dell’oggetto.
`SCATTER`	script.js	`10`	Fin dove un clic apre la parete, come raggio: 10 è il bordo della finestra.
`SPIN`	script.js	`0.35`	Quanto girano da soli gli oggetti al massimo, in radianti al secondo.
`DAMPING`	script.js	`0.95`	Quanto in fretta si spegne il movimento: con 0,95 se ne perdono circa sei decimi al secondo.
`WANDER`	script.js	`2.5`	I secondi senza puntatore prima che ne giri uno invisibile lungo la parete (0 per mai).
`GOLD`	script.js	`['#f2d08c', '#dcae55', '#b9862f']`	Gli ori, uno a caso per ogni anello e ogni tubo.
`PEARL`	script.js	`'#f5efe4'`	Il colore delle perle.
`FOV`	script.js	`[18, 40]`	L’angolo dell’obiettivo all’inizio e quando tutto è arrivato, in gradi.

Provali nel Playground

Quando usarla

Per un’apertura che deve sembrare una vetrina e non una pagina: gioielli, profumi, dolci, giocattoli, materiali. Vuole oggetti che si riconoscono da lontano e poche parole nel vuoto in mezzo; per una pagina che deve caricarsi in un attimo o per un testo lungo è troppo.

Sul telefono

Su uno schermo stretto gli oggetti sono sei su dieci e più piccoli, e la risoluzione arriva al massimo a 1,75. Il dito appoggiato spinge come il puntatore finché resta giù, un tocco apre la parete; quando il dito si alza, dopo due secondi e mezzo gira il puntatore invisibile.

Con il movimento ridotto

Niente arrivo di corsa e niente movimento: il tunnel viene assestato prima di disegnarlo, sette secondi di fisica fatti in un attimo, e resta fermo. Il puntatore e il clic non fanno nulla, e il suggerimento in basso lo dice.

Trappole

La profondità va tenuta con una molla vera. Con la forza debole dell’originale gli urti spingevano gli oggetti fino dietro l’obiettivo, e da vicino coprivano il centro: qui la molla ha il suo freno e gli urti spingono soprattutto di lato (la profondità della direzione d’urto pesa 0,35).
Le perle sono piccole: con la massa del loro volume partivano come proiettili. Hanno una densità più alta, 18 s³.
Il clic dell’originale, spinta 120 e raggio 40, serve a uscire dalla scena: in una pagina che resta svuota lo schermo per secondi. Qui la parete si apre fino al bordo (raggio 10, spinta 30).
Il punto del puntatore va ricalcolato a ogni passo con l’obiettivo del momento: all’inizio l’angolo passa da 18 a 40 gradi e lo stesso punto dello schermo cade altrove.

Librerie

Three.js 0.178.0, GSAP 3.15.0, Cormorant (font variabile) 5.3.0, Manrope (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 9,0 KB; le librerie: GSAP 28 KB, Three.js + RoomEnvironment 176 KB.

Collaudo

Provata il 2 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Fatto

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.