Il pulsante di vetro liquido
Pulsanti, WebGL, Hover, Fisica
NuovaGratis
Tutti i componenti
Il meteo dietro il vetro
Il meteo della settimana di un paesino di valle, visto dal vetro di una finestra di rovere: dietro, il paese sfocato con le finestre accese; sul vetro gocce di pioggia vere, che si uniscono, scivolano a scatti e lasciano la scia, e ognuna è una piccola lente che mostra il paese nitido e capovolto. Scegliendo un giorno il tempo sul vetro cambia: il vento le spinge di traverso, il sole le asciuga, la neve le gela e fa crescere la brina dai bordi, il temporale lampeggia. Dentro il vetro si appanna, e col dito se ne pulisce una striscia.
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 weather behind the glass</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the week's weather in a small valley town, seen through the pane of an oak window: behind the glass the town,
out of focus, drawn by the script; on the glass real raindrops, which merge, slide and leave their trails, and
every drop is a small lens that shows the town upside down and sharp. The sun dries them, the snow puts frost
on the edges and a drift on the sill, the wind drives them sideways, the storm flashes. The day and the
temperatures are burnt into the frame; a brass plate slides under the day chosen. A finger, or the mouse held
down, wipes a clear strip in the mist on the inside of the glass -->
<section class="window" aria-label="Weather in Ashcombe" data-window data-autoclic>
<span class="window__wood window__wood--top" aria-hidden="true"></span>
<span class="window__wood window__wood--left" aria-hidden="true"></span>
<span class="window__wood window__wood--right" aria-hidden="true"></span>
<span class="window__wood window__wood--bottom" aria-hidden="true"></span>
<span class="window__flash" aria-hidden="true" data-flash></span>
<header class="head">
<div class="head__where">
<h2 class="head__place">Ashcombe</h2>
<p class="head__note"><span class="swap" data-note></span></p>
</div>
<p class="head__temp">
<span class="head__num" aria-hidden="true" data-temp></span><span class="head__deg" aria-hidden="true">°</span>
<span class="head__low" aria-hidden="true"><span class="swap" data-low></span></span>
<span class="sr" data-temp-sr></span>
</p>
</header>
<div class="pane" data-pane>
<canvas class="pane__glass" aria-hidden="true" data-glass></canvas>
<span class="pane__bead" aria-hidden="true"></span>
</div>
<div class="days" role="radiogroup" aria-label="Day" data-days>
<span class="days__plate" aria-hidden="true" data-plate></span>
</div>
<p class="sr" aria-live="polite" data-live></p>
</section>
</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.
67 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 meteo dietro il vetro» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una finestra di rovere chiaro dagli angoli tondi, larga 380 pixel e alta 424, con la venatura vera del legno: orizzontale sulle traverse, verticale sui montanti. Sulla traversa di sopra, scritti a fuoco nel legno, il paese (Ashcombe), una riga sul tempo (Rain all afternoon), la massima in cifre grandi e morbide (11°) e la minima (Low 7°). Sulla traversa di sotto i cinque giorni, ognuno col nome, una piccola icona incisa e la massima; sotto il giorno scelto c'è una targhetta di ottone spazzolato. In mezzo il vetro: dietro, sfocato, il paese col campanile, i tetti di ardesia, gli alberi, il muretto e le luci accese alle finestre e ai lampioni, e la pioggia che cade lontano a righe sottili. Sul vetro le gocce: cadono, si uniscono quando si toccano, e quando sono abbastanza pesanti scivolano giù a scatti, con la coda, raccogliendo le goccioline che incontrano e lasciandone dietro una scia. Ogni goccia è una lente: dentro c'è il paese nitido, piccolo e capovolto, col bordo scuro, la mezzaluna chiara in basso e il riflesso in alto a sinistra. Dentro il vetro c'è la condensa, più fitta in basso e negli angoli, che rende il paese lattiginoso; trascinando il dito (o il mouse premuto) se ne pulisce una striscia, che mostra il paese più nitido e le gocce limpide e poi si appanna di nuovo piano. Scegliendo un giorno, in un secondo e mezzo: la targhetta scivola sotto il giorno con un rimbalzo e la luce le corre sopra, la massima conta fino alla cifra nuova, le righe cambiano, il paese dietro si dissolve nella luce del giorno nuovo. Col vento le gocce corrono di traverso e la pioggia lontana cade storta; con la neve le gocce gelano, la brina cresce dai bordi in felci di ghiaccio, dietro cadono i fiocchi e sul davanzale si posa un cumulo; col sole la brina si scioglie, le gocce si asciugano dalle più piccole e il vetro si fa limpido sul paese al sole; col temporale piove fitto e ogni pochi secondi un lampo illumina il cielo e anche il legno intorno al vetro.
Come funziona
Il paese, due volte
Il paese dietro il vetro è disegnato su una tela, sempre lo stesso (un seme solo per colline, case, campanile, alberi e lampioni) nella luce del tempo del giorno: cielo, nuvole, nebbia sulle colline, finestre accese o col cielo dentro, neve sui tetti, sole basso. È più largo del vetro di 30 pixel per lato, per le lenti vicino al bordo. Sotto la copia nitida c'è la copia sfocata, fatta dimezzando la tela quattro volte e ingrandendola di nuovo. Cambiando giorno il paese nuovo si dipinge sull'altra tela e lo shader dissolve l'uno nell'altro.
Le gocce: cadono, si uniscono, scivolano
Ogni goccia ha posizione, raggio e una soglia sua: arrivano a caso, quando due si toccano diventano una sola col volume delle due (il raggio è la radice cubica della somma dei cubi) e il centro verso la più grande. Sopra la soglia la goccia scivola, più veloce quanto più la supera, ma il vetro la trattiene a scatti, più spesso quando è appena abbastanza pesante; ondeggia un poco mentre cerca la strada, mangia le goccioline che incontra, ne lascia dietro una ogni tanto e perde la sua acqua. Le goccioline fini stanno su un livello a parte che si asciuga piano. Il passo di tempo è al massimo 1/30 di secondo.
Una mappa delle altezze
A ogni fotogramma ogni goccia si disegna su una tela come una piccola cupola, sommando (lighter), così due gocce vicine si fondono in una forma sola. Nel verde c'è il contorno, uguale per tutte, quindi una soglia fissa è il bordo; nel rosso c'è l'altezza, che cresce col raggio, così la pendenza in un punto della cupola è la stessa per una goccia piccola e per una grande; nel blu quanto è grande, per dare solo un bordo leggero alle goccioline. Le gocce in movimento si allungano nella direzione in cui corrono e tre cupole più piccole dietro diventano la coda.
Lo shader: ogni goccia è una lente
Lo shader legge la mappa: dalla pendenza (quattro letture intorno al punto) per l'altezza calcola di quanto piegare lo sguardo, verso il centro della goccia e oltre, così il paese dentro è piccolo, nitido e capovolto. Dalla stessa pendenza viene la normale: bordo scuro, mezzaluna di luce in basso, riflesso in alto a sinistra. Fuori dalle gocce il paese è sfocato quanto è appannato il vetro; davanti passano la pioggia lontana a righe e i fiocchi, calcolati nello shader, che le gocce capovolgono anche loro. Poi la condensa lattiginosa con la sua grana, la brina, il cumulo sul davanzale e un riflesso della stanza.
Condensa, dito, brina
La condensa è una tela piccola, grigia, che a ogni fotogramma si avvicina alla sua meta (più fitta in basso e negli angoli); il dito disegna su un'altra tela, che torna bianca molto più piano: la condensa che si vede è il prodotto delle due, così il tempo nuovo arriva in fretta ma la striscia pulita resta. La brina si calcola una volta sola: felci di ghiaccio che crescono dai bordi con rami a sessanta gradi, e ogni pezzetto tiene nel rosso il momento in cui la brina lo raggiunge; lo shader mostra la brina fino a un tempo che cresce col giorno di neve.
I giorni e l'anteprima
I giorni sono un gruppo di scelte (frecce, Home e Fine); il tempo sul vetro passa al giorno nuovo con tween GSAP sui suoi valori (pioggia, vento, condensa, brina, ghiaccio, sole, cumulo). Un clic da script sulla finestra (l'anteprima della libreria) fa il giro: un dito pulisce la condensa, poi vento, neve, sole e temporale, e di nuovo oggi. Quando non piove e niente si muove (dopo il sole) il disegno si ferma. Senza WebGL la stessa simulazione si disegna su una tela 2D: il paese sfocato, ogni goccia un pezzo del paese nitido ritagliato e capovolto, la condensa e la brina sopra.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
DAYS | script.js | [['Today', 'rain', 11, 7, 'Rain all afternoon'], …] | I giorni: il nome sul telaio, il tempo (rain, wind, snow, sun o storm), la massima, la minima e una riga sul tempo. |
CHANGE | script.js | 1.6 | I secondi che il tempo sul vetro impiega a cambiare. |
RAIN | script.js | 1 | Quanto forte piove sul vetro: 0 mai, 2 il doppio. |
DROP_SIZE | script.js | 1 | Quanto sono grandi le gocce quando arrivano. |
SLIDE | script.js | 1 | Quanto facilmente le gocce pesanti scivolano giù. |
LENS | script.js | 1 | Quanto ogni goccia piega il paese dietro: 0 niente lente. |
MIST | script.js | 1 | Quanto si appanna il vetro dentro: 0 mai. |
WIPE | script.js | 34 | Quanto è larga la striscia pulita dal dito, in pixel. |
FROST | script.js | 1 | Quanto entra la brina dai bordi nel giorno di neve. |
Quando usarla
Per il sito di una casa vacanze, di un rifugio, di un agriturismo o di un albergo di montagna (il tempo che si vedrà dalla finestra), per l'app del meteo di un paese, per un widget di casa o di una stazione meteo, e in generale per un meteo che si vuole sentire addosso, non solo leggere.
Sul telefono
La finestra è larga 380 pixel e sul telefono si stringe allo schermo (358 su uno schermo da 390), sempre alta 424; la massima è un po' più piccola. I giorni si toccano col dito. Sul vetro il dito pulisce la condensa: lì la pagina non scorre (touch-action none), sul legno sopra e sotto sì. La tela si disegna a densità 2 al massimo, le gocce e la condensa a densità 1.
Con il movimento ridotto
Le gocce non si muovono: per ogni giorno il vetro si calcola subito, fuori vista (tre secondi della sua pioggia, poi tutto fermo), e il paese vecchio si dissolve nel nuovo in 0,45 secondi. Niente pioggia né fiocchi che cadono dietro, niente lampi, niente entrata che si muove: la finestra compare in dissolvenza. Il dito pulisce ancora la condensa, che non torna; quando niente cambia la tela non si ridisegna.
Trappole
- Con l'altezza delle cupole uguale per tutte le gocce, le piccole piegavano il paese quanto le grandi e sembravano bolle col bordo nero: l'altezza ora cresce col raggio, e lo spostamento è la pendenza per l'altezza, che cresce col raggio come in una lente vera.
- Le goccioline fini avevano lo stesso bordo scuro delle gocce grandi e il vetro sembrava pieno di anellini: il blu della mappa dice quanto è grande la goccia, e sotto una certa misura il bordo è appena accennato.
- Cambiando giorno la condensa doveva arrivare in fretta, ma così la striscia pulita col dito spariva in un attimo: il livello della condensa e il passaggio del dito ora stanno su due tele diverse, che si moltiplicano, e la striscia si riappanna piano qualunque tempo faccia.
- La striscia pulita non si distingueva, perché dietro il paese era sfocato anche dove il vetro era pulito: ora la sfocatura cresce con la condensa, e nella striscia il paese torna quasi nitido.
- La venatura del legno, fatta col rumore di un filtro SVG, mostrava una cucitura dove la piastrella si ripeteva: stitchTiles la rende continua.
- Nel giorno di neve la condensa e la brina insieme coprivano tutto il vetro di bianco e il paese spariva: la condensa ora è più leggera quando nevica e le felci di brina più corte, fitte solo negli angoli, così il paese innevato si vede in mezzo.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 23 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 17 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.
