Il nastro nel bottone
Hover, SVG, Testo
NuovaGratis
Torna alla libreria
La meridiana che dice l'ora
Una meridiana vista dall'alto, un ventaglio di tacche sottili e uno gnomone: il puntatore è il sole, l'ombra gira e si allunga su due molle, le cifre dell'ora scattano una a una e sotto l'ora si scrive in parole, half past four, lettera per lettera. 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>The sundial that tells the time</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a sundial seen from above: a fan of hairline ticks and a gnomon. The pointer is the sun: its shadow swings
and stretches on a spring, the time is written underneath in words and its digits click over -->
<main class="stage" data-stage>
<header class="top">
<span class="top__name">Meridian</span>
<span class="top__note">A sundial, seen from above</span>
</header>
<div class="dial" role="slider" tabindex="0" aria-label="Time of day" aria-valuemin="5" aria-valuemax="19" data-dial>
<svg class="dial__svg" viewBox="-500 -490 1000 720" aria-hidden="true">
<defs>
<linearGradient id="shade" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="-300" data-shade>
<stop offset="0" stop-opacity="0.82"></stop>
<stop offset="0.7" stop-opacity="0.42"></stop>
<stop offset="1" stop-opacity="0.08"></stop>
</linearGradient>
</defs>
<path class="rim" data-rim></path>
<path class="path" data-sunpath></path>
<path class="ticks" data-ticks></path>
<path class="ticks ticks--hours" data-hours></path>
<path class="ticks ticks--now" data-now></path>
<g data-shadow-turn><path class="shadow" fill="url(#shade)" data-shadow></path></g>
<path class="gnomon" data-gnomon></path>
<path class="sun" data-sun></path>
</svg>
<div class="labels" aria-hidden="true" data-labels></div>
</div>
<div class="read" aria-hidden="true">
<div class="read__row">
<span class="digits" data-digits>
<span class="slot" data-slot></span><span class="slot" data-slot></span><span class="digits__colon">:</span><span class="slot" data-slot></span><span class="slot" data-slot></span>
</span>
<span class="read__date" data-date>June 21</span>
</div>
<div class="words" data-words></div>
</div>
<p class="hint">Move the sun across the page</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.
23 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 meridiana che dice l'ora» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo, in alto a sinistra il nome di un marchio inventato, Meridian, e a destra A sundial, seen from above. In mezzo una meridiana orizzontale vista dall'alto: un ventaglio di tacche sottili, una ogni cinque minuti dalle cinque del mattino alle sette di sera, più lunghe per le ore e per i quarti, con i numeri delle ore fuori dal bordo. Le tacche non sono alla stessa distanza: come su una meridiana vera sono fitte intorno a mezzogiorno e larghe verso il mattino e la sera. Al centro lo gnomone, un triangolo sottile che punta a nord, e sotto di lui il cammino del sole, un arco puntinato. Il puntatore è il sole: andando da destra a sinistra si va dall'alba al tramonto (il sole sorge a est, sulla destra della pagina), andando in su e in giù si cambia stagione, in alto il sole alto di giugno e in basso quello basso di dicembre. Sull'arco puntinato il sole è un breve tratto vermiglio, e dall'altra parte dello gnomone l'ombra, un cuneo scuro che sfuma verso la punta: gira su una molla e si allunga su un'altra, cortissima a mezzogiorno d'estate, lunghissima all'alba d'inverno, sempre un filo oltre e poi indietro. Le tacche vicine all'ombra si allungano verso il centro mentre corre e la tacca che legge diventa nera, con il numero della sua ora. Sotto, le cifre dell'ora (16:30) scattano una per volta, ognuna nella sua finestrella, dal basso quando il tempo va avanti e dall'alto quando torna indietro, e si stringono quando contano veloci (l'asse di larghezza di Instrument Sans); accanto il giorno della stagione. Sotto ancora, grande, l'ora in parole: half past four, twenty to five, noon. Mentre l'ombra corre le parole si fanno sottili e chiare; quando si posa, la frase nuova arriva lettera per lettera dal basso, va un filo oltre e prende peso (l'asse del peso di Fraunces). All'apertura il bordo e le tacche si disegnano da mezzogiorno verso i due lati, lo gnomone si alza con un elastico, il sole sorge a destra e attraversa il cielo fino alle quattro e mezza. Quando nessuno muove il puntatore, dopo un momento il sole va avanti da solo di mezz'ora in mezz'ora, e dopo il tramonto ricomincia dal mattino. Con le frecce si va di un quarto d'ora, con Pagina su e giù di un'ora, con Home e Fine all'alba e al tramonto.
Come funziona
Le linee delle ore come su una meridiana vera
Su una meridiana orizzontale l'ombra dello stilo all'ora t fa con la linea di mezzogiorno un angolo che si ricava da tan(angolo) = sin(latitudine) × tan(H), dove H è l'angolo orario del sole, 15 gradi per ogni ora da mezzogiorno. Con atan2(sin(lat)·sin H, cos H) l'angolo è continuo anche oltre le sei, quindi le tacche vanno dalle 5 alle 19 e si stringono da sole intorno a mezzogiorno. L'SVG ha un viewBox di 1000 per 720 con lo gnomone nell'origine; ogni tacca è un segmento verso il bordo (raggio 420), in due path: le ore più scure, il resto più chiaro.
Il sole dal puntatore
La posizione orizzontale del puntatore diventa l'ora (destra l'alba, sinistra il tramonto), quella verticale la stagione, cioè la declinazione del sole fra +23,44 e −23,44 gradi. Da ora e stagione viene l'altezza del sole, sin(h) = sin(lat)·sin(dec) + cos(lat)·cos(dec)·cos(H), e la lunghezza dell'ombra di uno gnomone alto NODUS è NODUS / tan(h), con il sole mai sotto i 5 gradi perché l'ombra resti sulla meridiana. Il giorno accanto alle cifre viene dalla stessa declinazione, letta sulla strada da dicembre a giugno.
Due molle: una per girare, una per allungarsi
L'ora che l'ombra mostra va verso quella chiesta dal sole su TIME_SPRING, integrata a mano sul ticker di GSAP con il passo limitato a 1/30 di secondo; la lunghezza va verso quella del momento su LENGTH_SPRING, più morbida, così quando l'ombra gira veloce si allunga e si accorcia con un piccolo ritardo e un filo di rimbalzo. L'ombra è un cuneo disegnato verso l'alto dentro un gruppo ruotato: il gradiente in userSpaceOnUse ruota con lei e sfuma sempre verso la punta. Le tacche vicine hanno una molla ciascuna, che le allunga verso il centro in proporzione alla velocità (LEAN).
Le cifre che scattano e le parole che si posano
Ogni cifra sta in una finestrella con overflow nascosto: la cifra nuova entra dal basso (o dall'alto se il tempo torna indietro) con back.out e la vecchia esce dall'altra parte sfumando. Se una cifra cambia di nuovo prima di 0,24 secondi, scatta senza rotolare, così quando il tempo corre veloce non si accavallano. Le parole si arrotondano ai cinque minuti; si riscrivono quando la frase resta uguale per 0,22 secondi, o al massimo una volta ogni 0,85 secondi mentre l'ombra corre. Ogni lettera è uno span con font-weight: calc(var(--wt) + var(--lw)): il contenitore dà il peso della velocità (WEIGHT), la lettera che atterra porta --lw da −300 a 0.
L'apertura, il sole da solo e le mani
Una timeline GSAP disegna il bordo e il cammino del sole aprendoli dal centro, fa crescere ogni tacca con un back.out quando il disegno la raggiunge, alza lo gnomone con elastic.out, poi porta il sole dalle 5 a START: le molle fanno il resto. Il mouse guida il sole su tutta la pagina, il dito mentre lo trascina; la meridiana è un role=slider con le frecce. Dopo 2,4 secondi senza nessuno, una gsap.delayedCall porta il sole avanti di mezz'ora ogni 1,5 secondi.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TIME_SPRING | script.js | [150, 17] | La molla con cui l'ombra gira: quanto è rigida e quanto è frenata (meno freno, più rimbalza). |
LENGTH_SPRING | script.js | [210, 11] | La molla con cui l'ombra si allunga e si accorcia: quanto è rigida e quanto è frenata. |
NODUS | script.js | 140 | Quanto è alto lo gnomone (la meridiana è larga 1000): più alto, ombre più lunghe. |
LEAN | script.js | 18 | Quanto si allungano verso il centro le tacche vicine all'ombra mentre corre. |
WEIGHT | script.js | [540, 220] | Il peso delle parole ferme e mentre l'ombra corre (da 100 a 900). |
WIDTH | script.js | [100, 76] | La larghezza delle cifre ferme e mentre contano veloci (da 75 a 100). |
START | script.js | 16.5 | L'ora su cui si posa l'apertura, dalle 5 alle 19 (16.5 sono le quattro e mezza). |
WANDER | script.js | true | Il sole va avanti da solo, di mezz'ora in mezz'ora, quando nessuno muove il puntatore. |
Quando usarla
Per dire un orario in modo caldo e leggibile: gli orari di apertura di un ristorante o di un bar (a che ora si pranza, quando si chiude), l'ora del check-in di un hotel o di una casa vacanza, l'ora di un concerto o di un evento, il tramonto da una terrazza. Funziona dove l'ora è il messaggio e c'è spazio per una scena sola; per un orario fra tanti dati basta il testo.
Sul telefono
Le stesse animazioni a misure adattate: la meridiana è larga quanto lo schermo, i numeri delle ore e le cifre un poco più piccoli, le parole scalano con la larghezza. Il sole segue il dito mentre lo trascina in qualunque punto della pagina (lì la pagina non scorre, è una scena sola) e si ferma quando si alza; poi riparte da solo.
Con il movimento ridotto
Niente molle, niente tacche che si allungano, niente cifre che rotolano e niente sole che va da solo: l'ombra va subito all'ora e alla sua lunghezza, le cifre cambiano e le parole si scambiano con una breve dissolvenza. All'apertura tutto compare in dissolvenza già al suo posto, alle quattro e mezza.
Trappole
- Con la formula tan(angolo) = sin(lat) × tan(H) scritta con atan l'angolo salta di 180 gradi alle sei del mattino e alle sei di sera, dove tan(H) va all'infinito: con atan2(sin(lat)·sin H, cos H) resta continuo e la meridiana può andare dalle 5 alle 19.
- Il sole sotto l'orizzonte non fa ombra: con le stagioni vere, alle cinque di un mattino d'inverno l'altezza è negativa e l'ombra sarebbe sparita a metà corsa. L'altezza non scende mai sotto i 5 gradi e la lunghezza si ferma poco oltre il bordo.
- Mentre il tempo corre veloce le cifre cambiano a ogni fotogramma e i rotolamenti si accavallavano, con tre cifre a metà strada nella stessa finestrella. Una cifra che cambia di nuovo entro 0,24 secondi scatta senza rotolare, ed esce sempre e solo l'ultima.
- Le parole che aspettavano l'ombra ferma non cambiavano mai mentre il puntatore si muove senza sosta (il video dell'anteprima mostrava half past four per sette secondi): ora si riscrivono anche in corsa, al massimo una volta ogni 0,85 secondi.
- Con le righe della griglia in fr la meridiana alta 500 pixel faceva crescere anche la riga vuota sotto le parole, in proporzione, e la pagina diventava più alta dello schermo: le righe in fr contengono solo il titolo e il vuoto, la meridiana e le parole stanno in righe auto.
- Lo gnomone pieno copriva l'ombra corta di mezzogiorno d'estate: è disegnato solo col contorno, e l'ombra si vede sotto.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,6 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 15 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.
