Le colonne di colore
Hover, SVG
NuovaGratis
Torna alla libreria
L'anno di luce
Le ore di luce di un anno in un anello di 365 righe sottili, una al giorno, lunghe quanto il giorno: una lancetta vermiglia legge il giorno sotto il puntatore, il numero al centro conta sulla stessa molla e l'anno si inchiostra fino a lei; cambiando città ogni giorno scatta alla sua misura nuova, in un'onda che parte dalla lancetta. Stile minimal.
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>A year of daylight</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a year of daylight drawn as a ring: one hairline a day, as long as the hours of light of that day. A vermilion
hand reads the day under the pointer, the big number counts on a spring, the year is inked up to the hand, and
choosing another city every day springs to its new length in a wave that runs round from the hand -->
<main class="stage" data-stage>
<header class="top">
<span class="top__name">Almanac</span>
<span class="top__note">Hours of daylight, day by day</span>
</header>
<div class="dial" role="slider" tabindex="0" aria-label="Day of the year" aria-valuemin="1" aria-valuemax="365" data-dial>
<svg class="dial__svg" viewBox="-500 -500 1000 1000" aria-hidden="true">
<path class="guide guide--base" data-guide="0"></path>
<path class="guide guide--half" data-guide="12"></path>
<path class="guide guide--full" data-guide="24"></path>
<path class="guide guide--months" data-month-ticks></path>
<path class="days days--future" data-future></path>
<path class="days days--past" data-past></path>
<path class="hand" data-hand></path>
</svg>
<span class="scale scale--half" aria-hidden="true">12 h</span>
<span class="scale scale--full" aria-hidden="true">24 h</span>
<div class="months" aria-hidden="true" data-months></div>
<div class="read" aria-hidden="true">
<span class="read__date" data-date>June 21</span>
<span class="read__value" data-value>
<span class="read__num" data-hours>15</span><span class="read__unit">h</span>
<span class="read__num" data-minutes>12</span><span class="read__unit">m</span>
</span>
</div>
</div>
<nav class="cities" aria-label="City" data-cities>
<span class="cities__mark" aria-hidden="true" data-mark></span>
<button type="button" class="city" data-city="oslo" data-autoclic>Oslo</button>
<button type="button" class="city" data-city="rome" data-autoclic>Rome</button>
<button type="button" class="city" data-city="quito" data-autoclic>Quito</button>
<button type="button" class="city" data-city="ushuaia" data-autoclic>Ushuaia</button>
</nav>
<p class="hint">Move around the year</p>
</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.
32 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 «L'anno di luce» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo, in alto il nome di un almanacco inventato, Almanac, e a destra Hours of daylight, day by day. In mezzo un anello: dal cerchio interno escono 365 righe sottili, una per giorno, dal primo gennaio in cima e poi in senso orario, e ognuna è lunga quanto le ore di luce di quel giorno nella città scelta (calcolate dal sole, non scritte a mano). Fuori, un cerchio tratteggiato per le dodici ore e uno sottile per le ventiquattro, con le tacche dei mesi e i loro nomi; nella fessura in cima, fra l'ultimo giorno e il primo, la scala: 12 h e 24 h. Al centro la data e un numero grande, 15 h 14 m. Sotto, quattro città: Oslo, Rome, Quito e Ushuaia, con un trattino vermiglio sopra quella scelta. All'apertura i cerchi si disegnano, la lancetta vermiglia esce dal cerchio interno e fa un giro intero dell'anno: i giorni nascono dietro di lei, ognuno su una molla che va un filo oltre e torna, i mesi compaiono quando li passa, il numero conta, e la lancetta prosegue fino al 21 giugno, il giorno più lungo. Poi, passando sull'anello, la lancetta segue il puntatore su una molla e si ferma sul giorno; i giorni già passati sono neri e quelli da venire chiari, così l'anno si riempie fino alla lancetta, e i giorni vicini si sporgono un poco mentre lei corre. Il numero legge la riga sotto la lancetta: conta con lei, si fa stretto e sottile mentre corre (gli assi di larghezza e di peso di Archivo) e torna largo e pieno quando si posa. Scegliendo un'altra città il trattino scivola sopra il nome con un elastico, il nome prende peso, e ogni giorno scatta alla sua lunghezza nuova uno dopo l'altro, in un'onda che parte dalla lancetta e corre intorno ai due lati: Oslo si gonfia in un'estate lunghissima, Quito si chiude in un cerchio quasi perfetto, Ushuaia capovolge l'anno con l'estate a dicembre. Quando nessuno punta, dopo un momento la lancetta cammina da sola intorno all'anno. Con le frecce si va di un giorno, con Pagina su e giù di un mese, con Home e Fine al primo e all'ultimo giorno.
Come funziona
Le ore di luce dal sole
Niente tabelle scritte a mano: per ogni giorno la declinazione del sole viene dalla serie di Spencer, poi l'angolo orario in cui il bordo del sole tocca l'orizzonte, cos ω = (sin(−0,833°) − sin φ sin δ) / (cos φ cos δ), con φ la latitudine della città. Le ore di luce sono 2ω/15. I −0,833 gradi tengono conto del raggio del sole e dell'aria che piega la luce; oltre il circolo polare il coseno esce da −1…1 e il giorno vale 0 o 24 ore.
Un anello di righe in due tracciati
L'SVG ha un viewBox di 1000 con il centro nel mezzo: ogni giorno è un segmento che parte dal cerchio interno (raggio 200) ed è lungo le sue ore per 10,5 unità, così le 24 ore arrivano al cerchio esterno. I giorni non chiudono l'anello: in cima resta una fessura di 10 gradi per la scala. Tutti i giorni passati stanno in un solo path nero e quelli da venire in un path chiaro, riscritti a ogni fotogramma; vector-effect: non-scaling-stroke tiene le righe a un pixel a ogni misura.
Una molla per giorno
Ogni giorno ha la sua lunghezza e la sua velocità, integrate a mano sul ticker di GSAP (DAY_SPRING, col passo limitato a 1/30 di secondo). Cambiando città la lunghezza nuova non arriva subito: ogni giorno la riceve dopo SPREAD secondi per la sua distanza dalla lancetta, divisa per mezzo anno, così l'onda parte dalla lancetta e il lato opposto dell'anno cambia per ultimo. I giorni vicini alla lancetta hanno anche una seconda molla, la sporgenza, che cresce con la velocità della lancetta (LEAN).
La lancetta e il numero sulla stessa molla
Dal puntatore si prende l'angolo intorno al centro con atan2 e lo si trasforma nel giorno, fessura compresa; la lancetta ci va su HAND_SPRING per la strada più corta, senza mai fare il giro lungo passando da capodanno. Il numero non ha una molla sua: legge, fra i due giorni su cui sta la lancetta, la lunghezza di quel momento, quindi conta mentre lei corre e scavalca un filo quando la riga sotto di lei scatta. Larghezza e peso di Archivo seguono la velocità con cui cambia (WIDTH, WEIGHT).
L'apertura, le città e le mani
Una timeline GSAP disegna i cerchi (archi riscritti a ogni fotogramma), poi porta la lancetta per un anno e mezzo, fino al 21 giugno: un giorno nasce quando la lancetta lo passa e i mesi compaiono con un piccolo rimbalzo. Le città sono pulsanti con aria-pressed e data-autoclic; il trattino vermiglio scivola con elastic.out e si accuccia mentre corre. Il mouse guida la lancetta sull'anello e un poco intorno, il dito mentre lo trascina; l'anello è un role=slider con le frecce. Dopo 2,4 secondi senza nessuno la lancetta cammina da sola.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SPREAD | script.js | 0.8 | Quanti secondi impiega il cambio di città a fare il giro dell'anno partendo dalla lancetta. |
DAY_SPRING | script.js | [230, 17] | La molla di ogni giorno quando cambia lunghezza: quanto è rigida e quanto è frenata (meno freno, più rimbalza). |
HAND_SPRING | script.js | [160, 17] | La molla della lancetta: quanto è rigida e quanto è frenata. |
LEAN | script.js | 16 | Quanto si sporgono i giorni vicini alla lancetta mentre corre (l'anello è largo 1000). |
WIDTH | script.js | [100, 66] | La larghezza del numero fermo e mentre conta veloce (da 62 a 125). |
WEIGHT | script.js | [580, 230] | Il peso del numero fermo e mentre conta veloce (da 100 a 900). |
START | script.js | 'rome' | La città con cui si apre la pagina: oslo, rome, quito o ushuaia. |
WANDER | script.js | true | La lancetta cammina da sola intorno all'anno quando nessuno punta. |
Quando usarla
Per un dato che cambia nell'arco dell'anno e si legge giorno per giorno: la luce per un hotel o una casa vacanza (quante ore di sole ci sono a marzo), le presenze di un museo o di un ristorante, i ritmi di una coltivazione, la stagione di un festival. Funziona con un valore al giorno e poche serie da confrontare; per una serie sola senza stagioni basta un grafico a linea.
Sul telefono
Le stesse animazioni a misure adattate: l'anello è largo quanto lo schermo meno i nomi dei mesi, con una riga ogni due giorni perché restino distinte, e il numero scala con l'anello. La lancetta segue il dito mentre lo trascina sull'anello (lì la pagina non scorre) e si posa quando si alza; le città sono pulsanti grandi abbastanza da toccare.
Con il movimento ridotto
Niente molle, niente onda e niente lancetta che cammina da sola: la lancetta va subito sul giorno, il numero cambia senza contare e, cambiando città, l'anello si scambia con una breve dissolvenza. All'apertura tutto compare in dissolvenza già al suo posto, sul 21 giugno.
Trappole
- Il numero leggeva all'inizio la lunghezza della riga sotto la lancetta, ma nell'apertura i giorni nascono proprio quando lei li passa: il numero restava vicino a zero per tutto il primo giro. Durante l'apertura legge il valore finale, dopo la riga com'è in quel momento.
- I nomi dei mesi stanno al loro posto con translate(-50%, -50%) nel CSS: animati da GSAP perdevano la centratura. Il nome è dentro un secondo span, e GSAP muove solo quello.
- Con l'anno chiuso a cerchio, la scala 12 h e 24 h finiva sopra le righe di gennaio di qualche città. Lasciando una fessura di 10 gradi in cima fra l'ultimo giorno e il primo, la scala ci sta da sola e i cerchi guida si aprono lì.
- La lancetta deve andare per la strada più corta: dal 30 dicembre al 2 gennaio non deve fare il giro dell'anno all'indietro. La posizione è un numero di giorni che non si riavvolge, e il bersaglio nuovo si sceglie fra le sue copie a più o meno 365 giorni quella più vicina.
- Con 365 righe da un pixel su un telefono stretto l'anello diventava una macchia piena: al telefono si disegna una riga ogni due giorni, mentre la lancetta e il numero continuano a leggere ogni giorno.
- Il mouse sulle città spostava la lancetta verso giugno (sono sotto l'anello): la lancetta segue il mouse solo sull'anello e poco intorno, e fuori lo lascia andare.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10,0 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 14 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.
