Il menu sotto il foglio
Menu, 3D, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il vaso al sole
La card di un vaso di vetro soffiato, mezzo pieno d’acqua, su un tavolo chiaro al sole: il puntatore è il sole. Il vaso getta un’ombra del colore del suo vetro e l’acqua, che è una lente, raccoglie la luce in una macchia chiara; l’ombra è calcolata tracciando i raggi in tre colori attraverso le fette del vaso. Scegliendo un altro vetro il vaso si riscalda, un bagliore lo risale dal piede e si raffredda nel colore nuovo; Add to bag lo avvolge nella plastica a bolle e chiude la giunta col nastro.
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 vase in the sun</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/imbue@5.3.0/opsz.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/hanken-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the card of a hand-blown glass vase standing in the sun. The pointer is the sun: the vase throws a shadow in
the colour of its glass, with the bright line of light that the water inside focuses on the table. Another
glass heats the vase up again and it cools into the new colour; Add to bag wraps it in bubble wrap. The vase
and the light are worked out by the script -->
<article class="vase" aria-labelledby="vase-name" data-vase data-autoclic>
<div class="vase__shot" data-shot>
<canvas class="vase__canvas" role="img" aria-label="The Drift vase in sea glass, half full of water, standing in the sun on a pale table" data-canvas></canvas>
</div>
<div class="vase__body">
<div class="vase__head">
<h2 class="vase__name" id="vase-name">Drift vase</h2>
<p class="vase__price" data-price>€68</p>
</div>
<p class="vase__meta">Hand-blown glass · 24 cm</p>
<div class="glass" role="radiogroup" aria-labelledby="glass-label" data-glass>
<p class="glass__label" id="glass-label">Glass</p>
<p class="glass__name" aria-hidden="true" data-name>Sea glass</p>
<div class="glass__tiles">
<label class="tile">
<input class="tile__input" type="radio" name="glass" value="sea" checked>
<span class="tile__glass" aria-hidden="true"></span>
<span class="sr">Sea glass</span>
</label>
<label class="tile">
<input class="tile__input" type="radio" name="glass" value="amber">
<span class="tile__glass" aria-hidden="true"></span>
<span class="sr">Amber</span>
</label>
<label class="tile">
<input class="tile__input" type="radio" name="glass" value="cobalt">
<span class="tile__glass" aria-hidden="true"></span>
<span class="sr">Cobalt</span>
</label>
<label class="tile">
<input class="tile__input" type="radio" name="glass" value="smoke">
<span class="tile__glass" aria-hidden="true"></span>
<span class="sr">Smoke</span>
</label>
</div>
</div>
<div class="buy" data-buy>
<button class="add" type="button" data-add>
<span class="add__fill" aria-hidden="true" data-fill></span>
<span class="add__icon" aria-hidden="true">
<svg class="add__bag" viewBox="0 0 24 24" data-bag><path d="M5.6 8.4h12.8l-.9 11.2a1.2 1.2 0 0 1-1.2 1.1H7.7a1.2 1.2 0 0 1-1.2-1.1z"/><path d="M9 10.4V7.2a3 3 0 0 1 6 0v3.2"/></svg>
<svg class="add__tick" viewBox="0 0 24 24" data-tick><path d="M5.5 12.6l4.2 4.1 8.8-9.3"/></svg>
</span>
<span class="add__label" data-label>Add to bag</span>
</button>
<button class="undo" type="button" data-undo hidden>Undo</button>
</div>
<p class="sr" aria-live="polite" data-live></p>
</div>
</article>
</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.
39 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 vaso al sole» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una card bianca dagli angoli tondi. In alto la foto, disegnata dallo script: un tavolo chiaro al sole e sopra un vaso di vetro soffiato verde mare, a bottiglia, mezzo pieno d’acqua, con l’ombra lunga verso destra, verde come il vetro, e vicino al piede una macchia di luce chiara dove l’acqua raccoglie il sole. Sotto: Drift vase, €68, Hand-blown glass · 24 cm, Glass e Sea glass scritto nel suo verde, quattro tessere di vetro (Sea glass, Amber, Cobalt e Smoke) che fanno ombra sulla card nella stessa luce, con quella scelta che galleggia un po’ più in alto, e il pulsante scuro Add to bag con la sua borsa. All’arrivo la card sale e il vaso esce caldo dalla fornace: brilla arancio e si raffredda nel suo vetro, prima il collo sottile, per ultimo il piede spesso. Il puntatore sopra la foto è il sole: la luce viene da dove sta il puntatore, alta se il puntatore è vicino al vaso e bassa se è lontano. L’ombra gira intorno al vaso e si allunga, la macchia di luce scivola con lei, sul vetro corrono i riflessi del sole e, col sole dietro il vaso, il vetro si accende del suo colore; col sole davanti, l’ombra finisce dietro il vaso e si vede attraverso il vetro. Anche le ombre delle tessere seguono il sole. Lasciata la foto, il sole torna piano al suo posto. Scegliendo un altro vetro il vaso si riscalda: un bagliore giallo e arancio lo risale dal piede e illumina il tavolo, sotto il bagliore il vetro cambia colore e l’ombra cambia colore dal piede in su; poi il vaso si raffredda nel vetro nuovo, il collo per primo e il piede per ultimo. Anche il nome del vetro esce arancio e si raffredda nel suo colore. Col puntatore sopra, Add to bag si schiarisce e il manico della borsa si alza; premuto diventa Wrapping it up e si riempie, mentre un foglio di plastica a bolle gira intorno al vaso aderendo alla sua forma, con le bolle che prendono il sole, e due strisce di nastro di carta chiudono la giunta; l’ombra si fa morbida e lattiginosa, con un puntino di luce sotto ogni bolla. Alla fine il pulsante dice In your bag con una spunta che si disegna, nel colore chiaro del vetro, e accanto compare Undo, che toglie il nastro e svolge la plastica. Un altro vetro scelto col vaso incartato lo svolge prima di riscaldarlo.
Come funziona
Il vetro, pixel per pixel
Il vaso è un profilo di rivoluzione visto da una camera alzata di 26 gradi. Per ogni pixel lo script trova l’altezza che l’occhio vede per prima (le fette del vaso, ellissi posate dal labbro in giù) e quanto vetro attraversa lo sguardo: la parete davanti, l’acqua o l’aria, poi la parete dietro, oppure il fondo spesso. Il vetro toglie luce come il suo colore alla potenza del vetro attraversato (Beer-Lambert): chiaro in mezzo, profondo ai bordi e nel piede, mai nero, con un filo scuro al contorno. È uno strato che moltiplica il tavolo dietro, calcolato una volta per ogni vetro.
I riflessi e il sole
Sopra, uno strato che si somma a ogni fotogramma in cui il sole si muove: la stanza riflessa con Fresnel e una finestra alta a sinistra, il sole come un lampo stretto (Blinn, esponente 900) e come un alone largo, il riflesso dell’interno della parete dietro, che sott’acqua quasi sparisce perché fra vetro e acqua si riflette pochissimo, e il bagliore del vetro quando il sole gli sta dietro. La luce si somma in luce lineare, come differenza fra sRGB(dietro + luce) e sRGB(dietro): sommata in sRGB sbiancherebbe tutto.
L’ombra, raggio per raggio
Il vaso è tagliato in 56 fette orizzontali. In ogni fetta 220 raggi del sole, in rosso, verde e blu, attraversano il cerchio di vetro, l’acqua o l’aria e di nuovo il vetro: a ogni superficie si piegano con Snell, con l’indice che la fetta mostra a un raggio che scende obliquo (Bravais), e perdono luce con Fresnel e nel vetro col suo colore. Arrivano sul tavolo dopo un cammino uguale all’altezza della fetta per la cotangente dell’altezza del sole: dove si affollano c’è la luce dell’acqua, dove mancano c’è l’ombra. I tre colori hanno indici appena diversi (SPREAD) e l’ombra si ammorbidisce con la distanza (SOFT).
Sul tavolo
Le fette diventano due immagini piccole, una che scurisce il tavolo e una che aggiunge la luce raccolta, posate con una trasformazione affine lungo la direzione opposta al sole e schiacciate dalla prospettiva. Una parte della luce che passa il vetro soffiato (le bollicine e le onde del vetro fatto a mano) si sparge dentro l’ombra nel suo colore; sotto il piede l’ombra è ritagliata e il tavolo prende la luce del vetro spesso. I raggi si ritracciano solo quando l’altezza del sole cambia di più di un grado: il cammino sul tavolo invece si ricalcola a ogni fotogramma.
Il vetro che si riscalda
Ogni altezza del vaso ha la sua temperatura. Scegliendo un vetro, un fronte sale dal piede in HEAT[0] secondi: dietro di lui il vetro è caldo lungo una rampa, e dove il fronte è passato da poco il colore diventa quello nuovo, nascosto dal bagliore. Poi ogni altezza si raffredda in modo esponenziale, più in fretta dove il vetro è sottile, e il colore del bagliore viene da una scala che va dal rosso scuro al giallo bianco, più forte dove lo sguardo attraversa più vetro. Il tavolo intorno prende la luce calda.
La plastica a bolle
Un foglio che segue il profilo del vaso un poco più largo: il suo bordo gira da destra a sinistra, poi la fine del foglio torna fino alla giunta e due strisce di nastro la chiudono, in WRAP secondi. Le bolle sono un reticolo esagonale sulla superficie, della stessa misura a ogni altezza, disegnate tutte insieme in pochi tracciati; ognuna ha il riflesso del sole dove la sua cupola guarda il mezzo fra il sole e l’occhio. L’ombra si fa lattiginosa e prende un puntino di luce per bolla.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SUN | script.js | [232, 27] | Dove sta il sole quando nessuno punta: il giro intorno al vaso in gradi (0 davanti, 90 a destra, 180 dietro) e quanto è alto. |
HEIGHT | script.js | [17, 66] | Quanto sale il sole, in gradi: col puntatore lontano dal vaso e proprio sopra di lui. |
FOLLOW | script.js | [34, 0.9] | La molla che porta il sole dove sta il puntatore: quanto è rigida e quanto è frenata (1 = senza rimbalzi). |
WATER | script.js | 0.62 | Quanto è pieno d’acqua il vaso, da 0 a 1: l’acqua è la lente che raccoglie la luce. |
SPREAD | script.js | 3 | Quanto il vetro e l’acqua dividono la luce nei colori (1 = come il vetro vero). |
SOFT | script.js | 1.2 | Quanto è grande il sole, in gradi: più è grande, più le ombre sono morbide. |
HEAT | script.js | [0.55, 1.7] | Cambiando vetro: i secondi in cui il bagliore risale il vaso, e quelli in cui il vaso si raffredda. |
WRAP | script.js | 1.25 | I secondi in cui la plastica a bolle gira intorno al vaso e la giunta viene chiusa col nastro. |
WORDS | script.js | ['Wrapping it up', 'In your bag'] | Le scritte del pulsante mentre il vaso viene incartato, e dopo. |
Quando usarla
Per la scheda di un prodotto di vetro o di cristallo in un negozio online: un vaso, una caraffa, un bicchiere, una bottiglia, una lampada; ovunque un oggetto trasparente abbia colori da scegliere e meriti di essere visto nella luce vera, e per il momento in cui finisce nel carrello.
Sul telefono
La card è larga 340 pixel, o lo schermo meno 32, e la foto si ridisegna alla misura vera. Un dito appoggiato sulla foto mette lì il sole, e facendolo scorrere di lato il sole lo segue: la foto ha touch-action: pan-y, quindi in su e in giù la pagina scorre. Lasciato, il sole resta dove l’ha lasciato il dito. Le tessere sono di 44 pixel e i pulsanti alti 50.
Con il movimento ridotto
Il sole resta fermo al suo posto e non segue il puntatore, e il vaso non arriva caldo. Cambiando vetro il colore nuovo arriva in una dissolvenza, senza bagliore; la plastica a bolle compare e se ne va in dissolvenza, senza girare; la tessera scelta è già in alto, senza salire, e le scritte del pulsante cambiano in dissolvenza.
Trappole
- L’acqua, con l’indice di Bravais, è una lente forte: raccoglie quasi tutta la luce in una macchia appena oltre il piede, e il resto dell’ombra restava grigio, illuminato solo dal cielo azzurrino. Il vetro colorato si riconosce dall’ombra: meno luce di cielo e una parte della luce sparsa dalle bollicine del vetro soffiato, nel suo colore, dentro l’ombra.
- La poca luce che la lente sparge intorno all’ombra faceva una fascia chiara coi bordi netti dove finiva l’immagine dell’ombra: l’immagine è più larga, la luce in più conta solo sopra una soglia morbida e si spegne verso i bordi.
- Sotto il piede il tavolo, visto attraverso il vetro spesso, aveva l’ombra delle fette del piede stesso, una fascia scura che sporcava il fondo: l’ombra è ritagliata sotto il piede (un clip evenodd) e lì il tavolo prende la luce colorata del vetro.
- Il fronte caldo avanza di un passo per fotogramma, e il bagliore veniva a strisce orizzontali: dietro il fronte il vetro è caldo lungo una rampa liscia.
- Il bagliore arancio del piede che si raffredda, sopra il vetro cobalto, diventava magenta: il piede si raffredda un po’ più in fretta e la coda della scala del bagliore è un bruno scuro.
- Col sole che seguiva il puntatore su tutta la pagina, appena si scendeva a scegliere il vetro il sole finiva davanti al vaso e l’ombra spariva dietro: il sole segue il puntatore solo sopra la foto e, lasciata la foto, torna al suo posto.
- Tracciare 37.000 raggi a ogni fotogramma costava troppo: l’indice che una fetta mostra cambia poco con l’altezza del sole, quindi i raggi si ritracciano solo oltre un grado, il cammino sul tavolo si scala a ogni fotogramma e il peso di ogni raggio nel vetro si ricalcola solo quando la sua fetta cambia vetro.
- Sommare i riflessi in sRGB con il composito lighter sbiancava il vetro: la luce aggiunta è la differenza fra sRGB(dietro + luce) e sRGB(dietro), con quello che c’è dietro stimato dal tavolo visto attraverso il vetro.
Librerie
GSAP 3.15.0, Imbue (font variabile) 5.3.0, Hanken Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 22 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 6 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.
