La parola di vetro
WebGL, 3D, Scroll, Testo
Gratis
Torna alla libreria
Il tempio che vola via
Scorri dentro l’anteprima
Un tempio inciso in WebGL che, mentre scorri, trema, si spacca e vola via a pezzi, dall’alto in basso, mentre il cielo dietro si riempie di rosso. I pezzi galleggiano muovendosi a scatti e il puntatore li spinge da parte.
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>The temple that flies away</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/cinzel@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/manrope@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="bar">
<a class="brand" href="#">Opera Aperta</a>
<nav class="bar__nav" aria-label="Sections">
<a href="#">Programme</a>
<a href="#">Tickets</a>
</nav>
</header>
<main>
<!-- a tall section: while it scrolls past, the scene stays on screen and the temple comes apart -->
<section class="ruin" data-ruin>
<div class="ruin__view">
<canvas class="ruin__canvas" data-canvas aria-hidden="true"></canvas>
<div class="ruin__open" data-open>
<p class="kicker">Summer season, in the open air</p>
<h1 class="ruin__title">Some nights the roof is in the way.</h1>
</div>
<div class="ruin__close" data-close>
<h2 class="ruin__title">Opera under an open sky.</h2>
<p class="ruin__note">Five nights from 10 to 14 July, with nothing between the voices and the stars.</p>
<a class="button" href="#">See the programme</a>
</div>
</div>
</section>
<section class="after">
<p class="kicker">The programme</p>
<ul class="nights">
<li><span class="nights__date">10 July</span><span class="nights__title">Orfeo ed Euridice</span></li>
<li><span class="nights__date">11 July</span><span class="nights__title">Dido and Aeneas</span></li>
<li><span class="nights__date">12 July</span><span class="nights__title">The Magic Flute</span></li>
<li><span class="nights__date">13 July</span><span class="nights__title">Norma</span></li>
<li><span class="nights__date">14 July</span><span class="nights__title">Gala under the stars</span></li>
</ul>
</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="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.
38 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 «Il tempio che vola via» da Animorio e adattala al mio sitoCosa fa
L’apertura di un festival d’opera all’aperto inventato, Opera Aperta: in alto «Some nights the roof is in the way.», sotto un tempio dorico disegnato in WebGL come un’incisione, con tre gradini, un muro di blocchi in ombra, sei colonne scanalate, l’architrave, il fregio coi triglifi, la cornice e il frontone. La sezione è alta quattro schermi e il tempio resta sullo schermo mentre scorre. Prima la pietra trema a piccoli scatti e le commessure si aprono; poi i pezzi si staccano dall’alto in basso: il frontone, la cornice, il fregio, l’architrave, i capitelli, poi i rocchi delle colonne, ognuno diviso in tre spicchi, e i blocchi del muro. Salgono girando su un asse tutto loro, si allontanano di lato e restano a galleggiare muovendosi a scatti, sei volte al secondo, come in un disegno animato a mano. Intanto il cielo si riempie di rosso dall’alto, con un bordo stracciato dalle stesse linee dell’incisione, e la scritta lascia il posto a «Opera under an open sky.»; restano i gradini. Il puntatore spinge da parte i pezzi che galleggiano vicino a lui, e quando se ne va tornano. Il tratteggio appartiene a ogni pezzo, quindi gira con lui, e scorre lungo se stesso otto volte al secondo, così il disegno ribolle.
Come funziona
Il tempio a pezzi
Lo script costruisce il tempio un pezzo alla volta: scatole per gradini, blocchi e cornici, prismi per il frontone, e per ogni colonna cinque rocchi divisi in tre spicchi, con venti scanalature (il raggio cala del 6 per cento in fondo a ognuna). Ogni vertice porta con sé il centro del suo pezzo, un numero a caso, quando il pezzo deve partire (prima i più alti, con un poco di caso), la direzione delle sue linee e da che parte si apre la crepa.
Il vertex shader muove tutto
La scena è un buffer solo: per ogni pezzo lo shader calcola quanto è partito, una rotazione su un asse a caso (SPIN), una salita (HEIGHT schermi, un poco meno per i pezzi bassi) e una deriva di lato (DRIFT). Il galleggiare usa il tempo a scatti, floor(tempo × STEPS) / STEPS, come lo shader delle colonne del sito.
Prima della partenza
Dentro CRACK, e finché non parte, ogni pezzo salta di poco a ogni scatto e si allontana di cinque centesimi dall’asse della sua colonna o dal centro del tempio: le commessure si aprono e la pietra trema. Lo scorrimento guida tre numeri, crepa, partenza e cielo, con un ritardo di 0,8 secondi.
L’incisione
Lo shader della pietra è quello del sito: la luce di ogni faccia si confronta con una trama di linee ondulate fatta dallo script, LINES per unità; sotto una prima soglia è inchiostro, sopra pietra, sopra una seconda carta, e le linee spostano le soglie. Al buio metà di ogni linea è inchiostro, alla luce niente, a metà le linee si rompono in puntini. Le linee si leggono nel posto di riposo del pezzo, quindi girano con lui; il muro sotto il tetto ha un’ombra in più, che sparisce quando il tetto se ne va.
I contorni
Prima della pietra si disegna una sua copia gonfiata di OUTLINE lungo le normali lisce (la media delle normali in ogni spigolo, così la copia non ha buchi), vista da dentro e tutta d’inchiostro: dove sporge, è il contorno.
Il cielo e il puntatore
Il cielo è un triangolo che copre lo schermo: il rosso scende dall’alto col bordo spostato dalle linee e da una grana che cambia a scatti, ed è inciso anche lui, più scuro in alto. Il puntatore diventa un punto sulla facciata del tempio (un raggio dalla camera incontra il piano delle colonne); i pezzi a meno di REACH se ne allontanano di PUSH, respirando fra 0,6 e 1, senza memoria: quando il puntatore se ne va, tornano.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
CRACK | script.js | [0.08, 0.26] | Dove la pietra trema e si crepa, come frazione della sezione (da, a). |
RISE | script.js | [0.22, 0.9] | Dove i pezzi partono, prima i più alti. |
SKY | script.js | [0.28, 0.7] | Dove il cielo diventa rosso. |
HEIGHT | script.js | 1.25 | Quanto salgono i pezzi, in altezze dello schermo. |
SPIN | script.js | 2.4 | Quanto girano salendo, in radianti. |
DRIFT | script.js | 2.6 | Quanto si allontanano di lato, in unità del tempio (una colonna è alta 5). |
PUSH | script.js | 1.6 | Quanto il puntatore spinge i pezzi che galleggiano vicino a lui. |
REACH | script.js | 2.8 | Fin dove arriva il puntatore, in unità del tempio. |
STEPS | script.js | 6 | Quante volte al secondo si muovono i pezzi che galleggiano. |
LINES | script.js | 8 | Quante linee incise in un’unità del tempio. |
OUTLINE | script.js | 0.035 | Lo spessore dei contorni, in unità del tempio. |
RED | script.js | [0.71, 0.14, 0.11] | Il rosso del cielo: rosso, verde e blu da 0 a 1. |
Quando usarla
Per la fine di un racconto o l’apertura di una pagina che deve lasciare il segno: un festival, una mostra, un lancio. Va bene con qualunque cosa fatta di pezzi, un edificio, un logo in rilievo, una scultura; lo shader a incisione si può dare a qualunque modello.
Sul telefono
La camera si allontana finché il tempio ci sta in larghezza e la vista sale, così il tempio resta in basso con molto cielo sopra. Il dito spinge i pezzi dove tocca; tutto il resto lo fa lo scorrimento.
Con il movimento ridotto
La sezione è alta uno schermo e niente si muove: il tempio è già aperto, coi pezzi fermi in aria sotto il cielo rosso e la scritta finale. Il puntatore non spinge.
Trappole
- Per spostare ogni pezzo dal vertex shader ogni vertice deve conoscere il centro del suo pezzo: il buffer ha 20 numeri per vertice, e ogni pezzo ha i suoi vertici anche dove tocca un vicino.
- La copia gonfiata del contorno va spinta lungo normali lisce: con le normali delle facce, negli spigoli delle scatole il contorno si apre.
- Le linee lette nella posizione del mondo scivolerebbero sui pezzi mentre girano: vanno lette nella posizione di riposo, che ogni vertice si porta dietro.
- Senza tempo a scatti i pezzi che galleggiano sembrano sott’acqua; a sei scatti al secondo sembrano disegnati.
- Su uno schermo alto il tempio messo in larghezza lascerebbe un mare di suolo sotto: la camera sale quanto serve per tenere il suolo a un decimo dal basso.
- Alla fine i pezzi devono stare sopra la scritta: la salita si misura in altezze dello schermo, non in unità del tempio, così sul telefono, dove la vista è più alta, salgono di più.
- Senza WebGL2 la sezione mostra solo il cielo rosso con la scritta finale.
Librerie
GSAP 3.15.0, Cinzel (font variabile) 5.3.0, Manrope (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 5 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.
