Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il meteo ora per ora
Il meteo di una città di mare in un widget il cui sfondo è il cielo vero dell'ora scelta, calcolato come fa l'aria: la luce del sole diffusa lungo ogni linea di vista su una Terra tonda, le nuvole illuminate marciando verso il sole, il mare che specchia tutto con la scia del sole. Scorrendo le ore il giorno passa come in un time-lapse: il sole scende lungo il suo arco e affonda nel mare, le nuvole corrono col vento, arriva la pioggia, escono le stelle, all'alba la nebbia si accende d'oro e si alza.
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 hour by hour</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/onest@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the weather of a seaside town hour by hour: the background is the sky of the hour chosen, worked out the way
the air does it (sunlight scattered along every line of sight, clouds lit from the sun, the sea mirroring it
all), and scrolling the hours runs the day like a time-lapse -->
<section class="sky" aria-labelledby="sky-place" data-sky data-autoclic>
<canvas class="sky__canvas" aria-hidden="true" data-canvas></canvas>
<header class="now" data-now>
<h2 class="now__place" id="sky-place" data-place></h2>
<p class="now__when" data-when></p>
<p class="now__temp"><span data-temp></span><span class="now__deg" aria-hidden="true">°</span><span class="sr"> degrees</span></p>
<p class="now__cond" data-cond></p>
<p class="now__range" data-range></p>
</header>
<div class="panel">
<dl class="facts">
<div class="fact">
<dt>
<svg class="fact__icon fact__wind" viewBox="0 0 16 16" aria-hidden="true" data-wind-icon><path d="M8 2.2v11.6M8 2.2 4.4 5.9M8 2.2l3.6 3.7"/></svg>
<span class="sr">Wind</span>
</dt>
<dd data-wind></dd>
</div>
<div class="fact">
<dt>
<svg class="fact__icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.9c2.2 3 4.3 5.4 4.3 8a4.3 4.3 0 0 1-8.6 0c0-2.6 2.1-5 4.3-8Z"/></svg>
<span class="sr">Chance of rain</span>
</dt>
<dd data-chance></dd>
</div>
<div class="fact">
<dt>
<svg class="fact__icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M1.4 8c1.7-2.9 4-4.4 6.6-4.4s4.9 1.5 6.6 4.4c-1.7 2.9-4 4.4-6.6 4.4S3.1 10.9 1.4 8Z"/><circle cx="8" cy="8" r="2.1"/></svg>
<span class="sr">Visibility</span>
</dt>
<dd data-vis></dd>
</div>
</dl>
<div class="hours" role="slider" tabindex="0" aria-label="Forecast hour" data-hours>
<span class="hours__lens" aria-hidden="true"></span>
<ol class="hours__track" aria-hidden="true" data-track></ol>
</div>
</div>
</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/Draggable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/InertiaPlugin.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.
282 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 ora per ora» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un widget dagli angoli tondi, largo 380 pixel e alto 424, e il suo sfondo è una finestra sul mare all'ora scelta. In alto a sinistra Larkmouth, Now, 17° in cifre grandi e sottili, Partly cloudy e la massima e la minima del giorno (H 17° L 12°). In basso un vetro fumé: il vento (SW 14 km/h, con una freccia che indica dove soffia), la probabilità di pioggia con una goccia e la visibilità con un occhio; sotto, le ore dalle 11 di oggi alle 14 di domani, ognuna con la sua icona e la temperatura (e la pioggia in azzurro quando è almeno del 20%), più il tramonto (Sunset 18:49) e l'alba (Sunrise 07:43). L'ora che sta nella lente chiara in mezzo è quella mostrata; le ore passate sono più tenui. Aprendo la pagina la striscia corre dalle 11, con la nebbia del mattino che si alza, fino a adesso: il cielo raggiunge l'ora. Trascinando le ore col mouse o col dito (con l'inerzia, e si fermano su un'ora), con la rotella, coi tasti o cliccando un'ora, il cielo segue senza salti, come un time-lapse. Il pomeriggio è azzurro, con cumuli bianchi dal lato del sole e grigi dove sono più spessi, il sole bianco abbagliante e sotto di lui la scia sul mare; scendendo il sole si fa oro e poi rosso, si schiaccia vicino all'orizzonte e affonda nel mare, mentre il cielo diventa malva e arancio e le nuvole basse si accendono di rosa da sotto. Dopo il tramonto l'aria bassa entra nell'ombra della Terra e il cielo passa dal rosso al malva e al blu, compare la falce della luna illuminata dal lato del sole e le nuvole arrivano dal largo col vento; alle 21 la pioggia scende in tende grigie sotto le nuvole lontane e in strisce oblique da vicino, e le nuvole sopra la città prendono la sua luce. Dopo mezzanotte il cielo si apre, le stelle escono fra le nuvole e girano piano attorno al polo scorrendo le ore; prima dell'alba la nebbia si posa sul mare a banchi, all'alba si accende di rosa e d'oro dal lato del sole e verso le dieci si alza. Le nuvole vanno sempre alla deriva col vento dell'ora, il mare luccica e piove davvero. Le cifre, il cielo, il vento, la pioggia e la visibilità cambiano con l'ora nella lente, e la freccia del vento gira. Le scritte sono bianche sul cielo scuro e diventano scure quando dietro di loro il cielo si fa chiaro (nebbia, nuvole illuminate), e il vetro prende la tinta del mare che ha sotto.
Come funziona
La luce diffusa dall'aria
Per 64 altezze della linea di vista, più fitte vicino all'orizzonte, lo script avanza in 16 passi attraverso l'aria di una Terra tonda (6360 km di raggio, 60 km d'aria) e somma a ogni passo la luce del sole diffusa dalle molecole (Rayleigh, l'azzurro) e dalla foschia (Mie), indebolita lungo la strada dall'aria, dalla foschia e dall'ozono. Rayleigh e Mie restano separati, così ogni punto del cielo li moltiplica solo per la sua funzione di fase, cioè per il suo angolo col sole; la tabella si rifà solo quando cambia l'ora. La Terra nasconde il sole all'aria bassa: dopo il tramonto il cielo passa dal rosso al malva e al blu da solo, con l'ombra della Terra sopra l'orizzonte, e l'ozono tiene azzurro il cielo del crepuscolo.
Le nuvole su uno strato in prospettiva
Le nuvole stanno su uno strato a 1,6 km: ogni punto del cielo lo incontra in un punto (x, z), dove un rumore frattale che si ripete senza cuciture, tagliato dalla copertura dell'ora, dice quanta nuvola c'è. Dove un punto della griglia copre molti texel le ottave fini si tolgono, e la densità si calcola anche ai quattro angoli di ogni punto e si fa la media, così i bordi non vengono a scalini. La luce: tre passi verso il sole attraverso lo strato dicono quanto la nuvola è in ombra; da sotto si vede il sole attraverso i bordi sottili (fase di Henyey-Greenstein, il bordo d'argento), la luce sparsa dentro (più grigia dove è spessa), la base accesa da sotto quando il sole è basso, il cielo e, di notte, la luce della città sulle nuvole sopra di lei. Lontano la foschia si mette davanti.
Il mare
Ogni punto del mare sa a che distanza sta da una camera 15 metri sopra l'acqua: lì la pendenza delle onde viene da due treni di increspature che vanno col vento, e la direzione riflessa prende il cielo da quella stessa tabella, col peso di Fresnel (Schlick). Dove le onde sono più piccole di un punto si usa la loro media, che inclina lo specchio verso un cielo più alto. La scia del sole è la probabilità che le faccette delle onde mandino il sole all'occhio (Beckmann, con la larghezza di Cox e Munk data dal vento); sopra, i luccichii nitidi si accendono e si spengono dove la scia è forte.
Nebbia, pioggia, stelle e luna
La nebbia è uno strato spesso 120 metri attraversato a passi fini, illuminata dal sole (d'oro all'alba, più forte dal suo lato) e da tutto il cielo, e il suo spessore cambia a banchi che vanno alla deriva. La pioggia sono tende grigie sotto le nuvole lontane (la densità presa lungo la linea di vista sotto la base) e strisce oblique per il vento da vicino. Le stelle hanno un posto fisso sulla sfera e girano attorno al polo con le ore: la latitudine, che resta dentro il codice, viene dall'altezza del sole a mezzogiorno e dalla lunghezza del giorno. La luna è una falce illuminata dal lato in cui sta il sole, con la luce cinerea sulla parte buia.
Dal calcolo ai pixel
Il cielo si calcola su una griglia di DETAIL pixel per punto (circa 10.000 punti) e si allarga liscio, il mare su un'altra griglia, così l'orizzonte resta netto. La luce è lineare: un'esposizione che si apre quando la luce cala (l'occhio si adatta, ma non del tutto), la curva filmica ACES e la gamma sRGB in una tabella sola. Sopra si disegnano nitidi il sole col suo alone, la luna, le stelle, i luccichii e la pioggia. L'inchiostro delle scritte guarda la luminosità dietro di loro (e il tratto più chiaro sotto il vetro), con due soglie per non tremare, e gira in un terzo di secondo; il vetro prende la tinta del mare scurita.
Le ore, le mani e l'anteprima
La striscia è un Draggable con l'inerzia che si ferma su un'ora; la sua posizione è il tempo, interpolato fra un'ora e l'altra, quindi il cielo si muove mentre si trascina. Dove sono le nuvole: il vento sommato ora dopo ora (tornando indietro tornano le stesse nuvole) più la deriva di chi guarda. Coi tasti è uno slider (frecce, Pagina su e giù, Inizio, Fine) che dice a voce l'ora, il cielo, la temperatura, la pioggia, il vento e la visibilità; la rotella scorre le ore e alle estremità lascia scorrere la pagina. Un clic da script (detail 0, l'anteprima della libreria) corre al momento bello dopo: tramonto, sera, pioggia, notte, nebbia, alba, mattina, adesso.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PLACE | script.js | 'Larkmouth' | La città. |
DAYS | script.js | ['Tuesday', 'Wednesday'] | Oggi e domani: il nome di domani compare a mezzanotte nella striscia delle ore. |
NOW | script.js | 14 | L'ora di adesso: le ore prima di lei sono il mattino passato, più tenui. |
SUNSET | script.js | '18:49' | L'ora del tramonto. |
SUNRISE | script.js | '07:43' | L'ora dell'alba. |
SUN_HEIGHT | script.js | 33 | Quanto sale il sole a mezzogiorno, in gradi: con l'alba e il tramonto dà tutto il suo arco (e il cielo delle stelle). |
HOURS | script.js | [[11, 'fogClearing', 13, 0, 9, 200, 3], …] | Le previsioni: l'ora, il cielo (un nome di SKIES), la temperatura, la probabilità di pioggia in %, il vento in km/h, da dove soffia in gradi e quanto lontano si vede in km. Dopo mezzanotte l'orologio riparte e la striscia continua nel giorno dopo. |
SKIES | script.js | { sunny: ['Sunny', 0.03, 0.2, 0, 0], … } | I cieli: il nome che si legge, quanta parte del cielo è nuvola, quanto sono spesse le nuvole, la pioggia e la nebbia, da 0 a 1. Il cielo calcolato e le icone vengono da questi numeri. |
TIME_LAPSE | script.js | 3 | Quanti km fanno le nuvole col vento, a 15 km/h, per ogni ora scorsa: più alto, più corrono quando si scorrono le ore. |
DRIFT | script.js | 4 | Quanto in fretta le nuvole vanno alla deriva mentre si guarda, in volte il vento vero. |
DETAIL | script.js | 3 | Quanti pixel copre ogni punto del cielo calcolato: più piccolo è più fine e più lento. |
STARS | script.js | 260 | Quante stelle escono di notte. |
RAIN | script.js | 150 | Quante gocce cadono con la pioggia più forte. |
CHANGE | script.js | 1.2 | I secondi che il cielo impiega a correre fino a un'ora scelta con un clic o un tasto. |
Quando usarla
Per l'app o il sito di una località di mare, di un porto, di un campeggio o di una scuola di vela, un'app per chi fotografa e aspetta la luce giusta, la pagina di un evento all'aperto, e in generale per una previsione in cui conta com'è il cielo, non solo i numeri.
Sul telefono
Il widget è largo 380 pixel e sul telefono si stringe alla larghezza dello schermo (358 su uno schermo da 390), sempre alto 424: il cielo si ricalcola per la misura nuova. Le ore si trascinano col dito, con l'inerzia, e in verticale la pagina scorre come sempre (touch-action pan-y). La tela si disegna a densità 2 al massimo, e se un telefono lento impiega più di 14 millesimi per un fotogramma il cielo si calcola su una griglia un po' più grossa invece di andare a scatti.
Con il movimento ridotto
Le ore non corrono: un'ora scelta con un clic, coi tasti o dall'anteprima arriva subito e il cielo vecchio si dissolve nel nuovo in 0,4 secondi. Il dito trascina ancora la striscia (è la mano a muoverla), ma senza inerzia; le nuvole non vanno alla deriva, il mare non luccica, le gocce vicine non cadono e non c'è entrata.
Trappole
- Le nuvole calcolate su una griglia grossa e poi allargate venivano a scalini, perché la densità passava da zero a piena dentro un solo punto: la densità si calcola anche ai quattro angoli di ogni punto e si fa la media, e le ottave fini del rumore si tolgono dove un punto copre molti texel.
- Con la luce presa dalla posizione geometrica del sole, al minuto dell'alba la nebbia era ancora buia e al tramonto il disco non si vedeva: l'aria solleva il sole basso di mezzo grado (rifrazione), e la luce si calcola dal sole visto.
- Un inchiostro mescolato a metà fra bianco e scuro, su un cielo di luminosità media, dava il peggior contrasto possibile: l'inchiostro è l'uno o l'altro, scelto con due soglie perché non tremi, e gira in un terzo di secondo.
- La scia del sole sotto il vetro, molto più chiara della media del mare, lasciava le ore bianche su bianco: per scegliere l'inchiostro del vetro conta anche il tratto più chiaro, e il vetro prende la tinta del mare scurita.
- Il disco del sole, disegnato sopra un alone sommato, sembrava più scuro del suo stesso alone (un anello bianco con un centro crema): il bagliore va sommato dopo, anche sopra il disco.
- Le nuvole riflesse nel mare lontano, dove un punto della griglia copre chilometri d'acqua, venivano a blocchi rosa: oltre qualche centinaio di metri il mare riflette solo il cielo, e le onde, più piccole di un punto, inclinano lo specchio in media.
- Il bagliore della notte e le nuvole riflesse nell'acqua passavano davanti alla nebbia, e all'orizzonte restava una riga fra cielo e mare: tutto quello che sta dietro la nebbia si moltiplica per la sua trasparenza, e cielo e mare nella nebbia prendono lo stesso colore.
- Un'ora lontana raggiunta di colpo (Fine, o col movimento ridotto) lasciava in grassetto l'ora di prima, perché si aggiornavano solo le ore vicine alla lente: si guardano tutte, ma si scrive solo quello che cambia.
Librerie
GSAP 3.15.0, Onest (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 25 KB; le librerie: GSAP + Inertia + Draggable 44 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.
