Certificati che si impilano
Hover, Immagini
NuovaGratis
Torna alla libreria
La vetrata che si illumina
Una grande vetrata a sesto acuto in una stanza in penombra. Dove passa il puntatore il sole attraversa i vetri, che si accendono di colore pieno con un piccolo rimbalzo e gettano macchie colorate sul pavimento. Un clic accende tutta la vetrata in un'onda dal centro.
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 stained-glass window that lights up</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/wght-italic.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stanza" data-stanza>
<!-- the room: stone surround, sill and floor flags, drawn once by the script -->
<canvas class="strato" data-fondo aria-hidden="true"></canvas>
<!-- the warm wash the window throws on the walls -->
<div class="calore" data-calore aria-hidden="true"></div>
<!-- the coloured light on the floor: a small canvas, blurred, added on top with screen -->
<canvas class="strato strato--luce" data-pavimento aria-hidden="true"></canvas>
<!-- the window: panes of glass and lead came -->
<canvas class="strato" data-tela role="img" aria-label="A tall pointed stained-glass window with a rose and three tulips: the panes light up where the sun and the pointer pass, and throw coloured light on the floor"></canvas>
<!-- the glow around the lit panes and the dusty beams -->
<canvas class="strato strato--luce" data-alone aria-hidden="true"></canvas>
<header class="testata entra">
<p class="marchio">Hollin & Vane</p>
<p class="sotto">Glass studio and gallery</p>
</header>
<div class="luce entra" aria-live="polite">
<p class="luce__etichetta">In the light</p>
<p class="luce__riga"><span class="luce__nome" data-nome>Amber</span></p>
</div>
<div class="didascalia">
<h1 class="titolo entra">The Rose and Tulip Window</h1>
<p class="nota entra" data-nota>Move across the glass to let the sun through. Click and every pane lights up.</p>
</div>
<div class="buio" data-buio aria-hidden="true"></div>
</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.
30 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 vetrata che si illumina» da Animorio e adattala al mio sitoCosa fa
Una stanza buia con una vetrata a sesto acuto incorniciata di pietra: in alto un rosone con petali, foglie e una corona a due colori in un cielo di raggi blu, nel mezzo una rete di losanghe ad anelli di colore, in fondo tre tulipani; tutto intorno una cornice di vetri piccoli. Ogni tassello ha il suo filo di piombo nero e la grana del vetro soffiato. A riposo i vetri sono quasi spenti. Dove passa il puntatore la luce li attraversa: si accendono di colore pieno con una molla che li fa scattare un po' oltre e tornare, intorno c'è un alone, nella polvere si vedono i raggi, e sul pavimento ogni vetro getta la sua macchia di colore, morbida e allungata dalla prospettiva. Da solo il sole passa lentamente da una parte all'altra e la macchia sul pavimento si inclina con lui. In basso a destra il nome del vetro nella luce (Ruby, Cobalt, Amber...) cambia con un piccolo salto. Un clic accende tutta la vetrata in un'onda che parte dal centro, con una cresta più chiara sul fronte.
Come funziona
La vetrata è fatta di poligoni
Lo script disegna tutto in unità della vetrata: larga 1, alta 2,45. Il contorno è un arco equilatero (due archi di raggio 1 con il centro sull'imposta opposta) più i fianchi e il fondo, sempre in 64 punti: così il contorno esterno e quello rientrato si accoppiano punto per punto e fra i due nascono i vetri della cornice. Raggi, losanghe e fondi si tagliano col contorno interno con Sutherland-Hodgman, che funziona perché l'arco a sesto acuto è convesso. Petali e foglie sono lenti, il rosone è un disco, una corona e un bottone. Ogni vetro diventa un Path2D, il suo baricentro e un tono a caso fra 0,86 e 1,08.
Tre luci per ogni vetro
A ogni giro ogni vetro calcola quanta luce gli arriva da tre parti: il sole, una campana gaussiana larga 0,75 che GSAP porta avanti e indietro in GIRO_SOLE secondi (yoyo, sine.inOut) lungo un arco; il puntatore, una campana larga RAGGIO che si accende in 0,45 secondi quando entra e si spegne in 1,4 quando esce; l'onda del clic. Le tre si sommano come luci vere: 1 − (1 − a)(1 − b)(1 − c). Il sole cala del 45% quando c'è il puntatore, così la luce che conta è la tua.
La molla del vetro
Ogni vetro non va dritto alla sua luce: ha una molla con velocità. V += ((meta − L) × RIGIDO − V × SMORZA) × dt e L += V × dt, con dt in sessantesimi di secondo (al massimo 2). Con i valori di partenza la molla è smorzata a metà: il vetro si accende, va un po' oltre e torna. Sopra 1 il colore si mescola al bianco, quindi quel piccolo eccesso si vede come un lampo di sole nel vetro.
Tre canvas: vetri, alone, pavimento
Il canvas dei vetri è grande quanto la vetrata, a piena risoluzione: riempie i Path2D, moltiplica la grana del vetro soffiato (strisce e bolle disegnate una volta, tagliate dal contorno) e ripassa il piombo. Alone e pavimento sono canvas a un quarto della risoluzione, ingranditi dal CSS, sfocati con filter: blur e sommati con mix-blend-mode: screen. Sul pavimento ogni punto del vetro va in prospettiva: la cima della vetrata cade più vicino a chi guarda e più larga, e il sole che si sposta inclina tutta la macchia.
L'onda e il nome del vetro
Il clic fa partire una timeline GSAP che porta il raggio dell'onda da −0,15 a 1,75 in ONDA secondi, aspetta 0,7 e la spegne in 2,2. Ogni vetro si accende con smoothstep della distanza dal fronte, più una cresta gaussiana che si spegne vicino ai bordi. Dieci volte al secondo lo script cerca il vetro sotto il puntatore (o sotto il sole) con un controllo punto-nel-poligono, dall'ultimo disegnato al primo: se il nome resta lo stesso per due controlli, quello vecchio esce in alto e il nuovo entra dal basso con back.out, nel colore del suo vetro.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
RAGGIO | script.js | 0.42 | Quanto è larga la luce del puntatore, in larghezze della vetrata. |
SOLE, GIRO_SOLE | script.js | 0.72, 12 | Quanto accende il sole che passa da solo, e in quanti secondi attraversa la vetrata. |
RIGIDO, SMORZA | script.js | 0.07, 0.2 | La molla di ogni vetro: più rigida si accende prima, meno smorzata rimbalza di più. |
ONDA | script.js | 1.7 | I secondi dell'onda del clic, dal centro ai bordi. |
MACCHIE, SFOCA | script.js | 0.9, 12 | Quanto sono accese le macchie sul pavimento e quanto sono morbide. |
--rubino, --cobalto, --ambra, --smeraldo, --viola, --opale, --notte | style.css | #d3233f, #2a5fd6, #f5a623, #1f9a5e, #7d48c0, #ecdfb6, #22358a | I sette vetri: lo script li legge dal CSS, per vetri, alone e pavimento. |
Quando usarla
Per la pagina di uno studio di vetrate, di un museo, di una chiesa o di un luogo con una luce speciale; e per qualunque immagine fatta di tasselli (un logo, un mosaico) che deve premiare chi ci passa sopra.
Sul telefono
Stesse animazioni, vetrata più grande rispetto allo schermo e più in alto, così il pavimento ha spazio. Il dito trascinato porta la luce e la spegne quando si alza; un tocco fa partire l'onda. Il nome del vetro sale in alto a destra.
Con il movimento ridotto
Il sole sta fermo e i vetri non rimbalzano: la luce del puntatore arriva e se ne va con una dissolvenza. Il clic accende tutta la vetrata insieme in sei decimi di secondo, senza onda, e la spegne piano. Il nome del vetro cambia con una dissolvenza.
Trappole
- La grana del vetro va moltiplicata solo dentro il contorno (clip col Path2D del contorno): il bianco di un canvas in multiply sopra un fondo trasparente si vede, e intorno all'arco compare un rettangolo bianco.
- Lo smorzamento della molla va moltiplicato per dt e dt va limitato (qui a 2): con un fotogramma lungo una molla non limitata esplode e i vetri lampeggiano.
- Ogni canvas a piena risoluzione e a tutto schermo costa a ogni giro: il canvas dei vetri è grande quanto la vetrata, e alone e pavimento sono a un quarto e li ingrandisce il CSS, che tanto li sfoca.
- Le macchie sul pavimento vanno disegnate nello stesso ordine dei vetri e piene, non in lighter: il rosone sta sopra i raggi, e sommandoli il pavimento diventerebbe bianco dove si sovrappongono.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 11 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.
