La striscia che si impenna
Scroll, 3D, WebGL, Immagini
Gratis
Torna alla libreria
La cupola di foto da girare
Galleria WebGL in stile minimal: siamo al centro di una cupola di stampe di moda e la si gira trascinando o con la rotella. La spinta si spegne piano con l'inerzia, le stampe si piegano mentre corrono e quelle alle nostre spalle cambiano foto, così la cupola non finisce mai.
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>Velure</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.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"
} }
</script>
</head>
<body>
<!-- a dome of prints around the camera: drag, swipe or scroll to turn it; it keeps going on its own momentum, the
prints bow while it runs, and the twelve frames are refilled behind your back so the dome never ends -->
<main class="pagina" data-pagina>
<canvas class="tela" aria-label="A dome of photographs, drag to turn it" role="img" data-tela></canvas>
<header class="testa">
<p class="testa__voce" data-entra>Autumn archive</p>
<p class="testa__voce" data-entra data-nota>Drag to turn</p>
</header>
<footer class="piede">
<h1 class="marchio" data-entra data-marchio>Velure</h1>
<p class="didascalia" data-entra><span class="didascalia__finestra"><span data-didascalia>Linen</span></span></p>
</footer>
</main>
<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.
17 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 «La cupola di foto da girare» da Animorio e adattala al mio sitoCosa fa
Lo schermo è l'interno di una cupola color carta e noi stiamo al centro: intorno, appese alla parete e tutte rivolte verso di noi, ci sono le stampe di Velure, un archivio di moda inventato, a tre altezze diverse che si alternano, così la fila sale e scende come un fregio. Le stampe non sono foto: sono campi di carta, di pietra, d'argilla e d'inchiostro con una forma sola fuori fuoco, un disco, una colonna, una stoffa piegata, un orizzonte, con la grana e una didascalia piccola in fondo; due sole sono color ruggine. All'apertura arrivano dall'alto in giù, una dopo l'altra, salendo dal basso e venendo avanti mentre si accendono; poi compaiono il marchio, VELURE, grande al centro in basso, e sotto il nome della stampa che sta davanti. Trascinando col mouse o col dito, o con la rotella, la cupola gira: la spinta diventa una velocità che si spegne piano, e mentre corre le stampe si piegano, il loro centro resta indietro come un foglio nell'aria, e il marchio prende peso. Le stampe che finiscono alle nostre spalle cambiano foto senza che si veda, così con dodici cornici la galleria non finisce mai; quando la stampa davanti cambia, il suo nome scivola nella didascalia. Quando nessuno la tocca, la cupola gira piano da sola e ogni tanto si dà una spinta.
Come funziona
Dodici cornici su una sfera
La camera di Three.js sta nell'origine e le stampe sono dodici piani appesi a un cerchio di raggio 0,95 per 15,2. L'altezza di ognuna viene da un angolo che cambia a giro di tre, 0,52 π più o meno 0,24, moltiplicato per il raggio e per 0,88; quelle sopra lo zero vengono tirate giù dell'80 per cento e tutte scendono di 0,9. Ogni piano fa lookAt verso il centro, così ci guarda. È alto 8,1 per 0,94 e largo secondo il suo formato, fra 5,6 e 9,9, con 16 per 16 segmenti perché si possa piegare.
Le stampe disegnate
Le immagini sono canvas 2D da 600 pixel di altezza: un tono pieno, una luce radiale morbida, una forma sfumata scelta da un elenco, la grana fatta con un generatore di numeri a seme fisso e una didascalia in Fraunces. Diventano CanvasTexture con i mipmap e l'anisotropia, così le stampe di lato non sfarfallano. La gestione dei colori di Three è spenta e l'uscita è lineare: i toni escono uguali a quelli scritti nel codice e il fondo del renderer è il bianco caldo di :root.
L'inerzia
Rotella, trascinamento e frecce non muovono la cupola: aggiungono velocità, tenuta fra meno 180 e 180. A ogni fotogramma la velocità si moltiplica per 0,92 elevato al numero di fotogrammi a 60 al secondo passati, e lo spostamento è la somma esatta di quella serie, 0,92 per v per uno meno il resto, diviso 0,08: così l'inerzia è uguale a 30, 60 o 120 fotogrammi al secondo. L'angolo della camera cresce dello spostamento per 0,005, per 0,5, per 0,253, e la camera guarda un punto a 0,9 raggi, quattro unità più in basso.
La piega nel vertex shader
Un ShaderMaterial per stampa, con le uniform della piega in comune. Nel vertex shader il punto scende del seno di uv.x per π per la velocità: i bordi restano dove sono e il centro si sposta di più, come un foglio che corre. La z si allontana della distanza dal centro in altezza alla 1,25, così le stampe in alto e in basso seguono la parete curva. PIEGA moltiplica la piega del sito: a 1 si vede appena, a 6 si vede bene.
La cupola che non finisce
A ogni fotogramma si mettono in classifica i dodici posti col prodotto scalare fra la loro posizione e la direzione in cui guarda la camera: gli otto più avanti sono visibili. Un posto che esce dagli otto è alle nostre spalle, e lì riceve la stampa successiva dell'elenco, con la sua geometria e la sua texture. Il primo della classifica dà il nome alla didascalia, che scivola via e torna con back.out nel verso in cui gira la cupola.
La regia
Tutto gira sul ticker di GSAP, senza setTimeout. L'entrata ha i tempi del sito: i posti ordinati dall'alto partono 1,25 più in basso, 0,45 più indietro e a scala 0,92, e arrivano in 0,78 per 0,89 secondi con power3.out, uno ogni 0,045 secondi, accendendosi in 0,48 per 0,89. Poi una timeline che si ripete dà una spinta ogni OGNI secondi, ma solo se nessuno ha toccato la cupola da quattro secondi. Un IntersectionObserver ferma il disegno quando la pagina non si vede.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
RAGGIO | script.js | 15.2 | Il raggio della cupola, come sul sito. |
ALTEZZA | script.js | 8.1 | L'altezza di una stampa. |
PIEGA | script.js | 6 | Quanto si piegano le stampe mentre la cupola corre (1 come sul sito). |
CURVA | script.js | 0.05 | Quanto le stampe in alto e in basso seguono la parete curva. |
ATTRITO | script.js | 0.92 | Quanto resta della velocità a ogni fotogramma: più vicino a 1, più a lungo gira. |
SPINTA | script.js | 110 | La spinta che la cupola si dà da sola ogni tanto. |
OGNI | script.js | 6.5 | Ogni quanti secondi arriva quella spinta. |
DERIVA | script.js | 0.035 | Quanto gira da sola, piano, in radianti al secondo. |
CAMPO | script.js | 60 | L'angolo verticale della camera, in gradi. |
Quando usarla
Come home di un fotografo, di uno studio di moda o di un archivio di immagini; come galleria di una collezione in un negozio di abbigliamento; come pagina di una mostra o di un festival di fotografia; ovunque si vogliano mostrare tante immagini insieme lasciando che sia chi guarda a farle girare.
Sul telefono
La stessa cupola: il dito trascina in orizzontale o in verticale (l'asse si blocca dopo sei pixel) e la spinta continua da sola. Nello schermo stretto la camera apre un poco l'angolo, così di lato si vede più di una stampa, e il marchio si misura anche sull'altezza.
Con il movimento ridotto
Le stampe compaiono al loro posto in dissolvenza; la cupola non gira da sola, non si dà spinte e non si piega. Il trascinamento e la rotella restano, con la loro inerzia, perché il movimento lo decide chi guarda.
Trappole
- Con la gestione dei colori di Three accesa, il bianco caldo del fondo passato da :root diventava più scuro della pagina: Color.set lo converte in lineare e l'uscita lineare non lo riporta indietro. Spenta ColorManagement e uscita lineare, il canvas e la pagina hanno lo stesso colore.
- L'inerzia calcolata come v per 0,92 a ogni fotogramma gira il doppio a 120 Hz: si usa la potenza dei fotogrammi passati e la somma esatta della serie, come fa il sito.
- Lo spostamento z della piega va fatto nelle coordinate del piano, dopo lookAt: lì la z guarda il centro, e togliendola le stampe si allontanano dalla camera invece di andare di lato.
- Le texture disegnate prima che il carattere sia caricato restano col carattere di ripiego: si aspetta document.fonts.load, ma al massimo 1,2 secondi.
- Senza i mipmap le stampe viste di sbieco sfarfallano mentre la cupola gira: CanvasTexture con LinearMipmapLinearFilter e anisotropia 8.
Librerie
Three.js 0.178.0, GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,8 KB; le librerie: GSAP 28 KB, Three.js 174 KB.
Collaudo
Provata il 22 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.
