Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
La parola con l'ombra del giorno
Una parola grande sulla linea dell'orizzonte e la sua ombra lunga e piatta, fatta di righe sottili: il puntatore è il sole e l'ombra gira intorno alla parola come la luce di un giorno intero, lunga verso destra all'alba, corta e dritta in giù a mezzogiorno, lunga verso sinistra al tramonto. Le lettere seguono il sole una dopo l'altra: larghe e sottili col sole basso, strette e piene a mezzogiorno. 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 word with the day's shadow</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- one big word and its long, flat shadow drawn in hairline hatching. The shadow turns round the word like the
light of a whole day: long at dawn, short at noon, long again at sunset. The pointer moves the sun -->
<main class="stage" role="slider" tabindex="0" aria-label="Time of day" aria-valuemin="5" aria-valuemax="19"
aria-valuenow="9.5" aria-valuetext="09:30" data-stage>
<header class="top">
<p class="time" aria-hidden="true">
<span class="time__digits" data-digits>09:30</span>
<span class="time__phase"><span class="time__word" data-phase>Morning</span></span>
</p>
<p class="top__note">Shade, all day long</p>
</header>
<!-- the sky: a hairline arc with the hours, the ground at its two feet and the sun -->
<svg class="scene" aria-hidden="true" data-scene>
<defs>
<clipPath id="above">
<rect data-above></rect>
</clipPath>
</defs>
<path class="arc" data-arc></path>
<g class="ticks" data-ticks></g>
<path class="ground" data-ground></path>
<g clip-path="url(#above)">
<g class="sun" data-sun>
<circle r="9"></circle>
</g>
</g>
</svg>
<!-- the long shadow, drawn in hairlines on a canvas -->
<canvas class="shade" aria-hidden="true" data-shade></canvas>
<!-- the word: it stands on the horizon, and below the horizon it is cut off -->
<div class="horizon" aria-hidden="true" data-horizon>
<div class="word" data-word></div>
</div>
<h1 class="sr-only" data-label></h1>
<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.
24 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 parola con l'ombra del giorno» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo, una parola grande, Umbra, sta in piedi su una linea d'orizzonte che non si vede, sotto un arco sottile che fa da cielo, con una tacca per ogni ora dalle sei del mattino alle sei di sera (quella di mezzogiorno più lunga e più scura) e un tratto di terra ai due piedi. Il sole è un piccolo cerchio vermiglio che corre sull'arco. Dalla parola parte la sua ombra: un'ombra lunga e piatta, come nella grafica, cioè la parola tirata lungo la luce, disegnata con righe sottili che tagliano la luce di sbieco e che sfuma verso la punta. Il puntatore è il sole: andando da sinistra a destra si va dall'alba al tramonto. All'alba l'ombra corre lunghissima verso destra e esce dalla pagina; salendo il sole si accorcia e gira in giù, a mezzogiorno è un breve blocco di righe sotto le lettere; il pomeriggio si allunga di nuovo verso sinistra, al tramonto attraversa tutta la pagina e poi sparisce quando il sole va sotto l'orizzonte, dietro il trattino di terra. Le lettere seguono l'altezza del sole sugli assi di larghezza e peso di Anybody: col sole basso sono larghe e sottili, a mezzogiorno strette e piene; cambiano una dopo l'altra, prima quella più vicina al sole, su una molla che va un filo oltre e torna. Quando il sole passa una tacca, la tacca dà un piccolo colpo elastico. In alto a sinistra l'ora (09:30) e il momento del giorno, Dawn, Morning, Noon, Afternoon, Sunset, Night, che cambia scivolando dentro la sua finestrella; a destra Shade, all day long. All'apertura l'arco si disegna da sinistra a destra con le tacche che spuntano, le lettere salgono una per una da sotto l'orizzonte e il sole sorge fino alle nove e mezza, con l'ombra che nasce lunga e si accorcia. Quando nessuno muove il puntatore, il giorno va avanti da solo dall'alba al tramonto e poi ricomincia. 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
Il sole sull'arco
La posizione orizzontale del puntatore diventa l'ora, da poco dopo le cinque a poco prima delle sette di sera, e l'ora mostrata la segue su una molla (SUN_SPRING) integrata a mano sul ticker di GSAP, col passo limitato a 1/30 di secondo. L'ora diventa un angolo sull'arco, π alle sei del mattino e 0 alle sei di sera, e il sole sta sull'ellisse centrata sulla parola; l'altezza del sole è 62 gradi per il seno della frazione di giorno, negativa prima delle sei e dopo le diciotto. Sotto l'orizzonte il sole è tagliato da un clipPath e l'ombra sfuma via.
L'ombra lunga in nove raddoppi
L'ombra va dal sole alla parola e oltre: la direzione è quella dal sole al centro della parola, la lunghezza è SHADOW per la misura delle lettere diviso la tangente dell'altezza del sole, così all'alba è lunghissima e a mezzogiorno corta. Su un canvas si disegnano le lettere, poi lo si copia su un secondo canvas due volte, la seconda spostata lungo la luce; si ripete nove volte raddoppiando lo spostamento e le copie diventano 511, una forma piena senza buchi. Si lavora solo nel rettangolo che contiene lettere e ombra, ed è questo che la rende veloce.
Le righe sottili dentro l'ombra
Dalla forma si tolgono le lettere stesse (destination-out), poi un gradiente lungo la luce la fa sfumare verso la punta (destination-in). Sul canvas visibile, alla risoluzione dello schermo, si tracciano le righe sottili (HATCH) inclinate di ANGLE gradi rispetto alla luce, contate dal centro della pagina perché non scivolino; la forma le tiene solo dove c'è ombra. Righe parallele alla luce non si leggerebbero come una forma, solo come strisce.
Le lettere che seguono il sole
Ogni lettera è uno span con font-variation-settings: un solo numero da 0 a 1, l'altezza del sole, diventa larghezza (WIDTH) e peso (WEIGHT). Ogni lettera legge l'altezza com'era STAGGER secondi prima per ogni posto che la separa dal lato del sole, da una breve memoria dell'ultimo secondo, e ci arriva su una sua molla. Sul canvas le lettere si ridisegnano col peso uguale, la larghezza più vicina fra quelle che il canvas conosce e la scatola misurata della lettera vera.
L'apertura e il giorno da solo
Una timeline GSAP disegna l'arco con stroke-dasharray su pathLength 1, fa spuntare le tacche con back.out mentre il disegno le raggiunge, alza le lettere da sotto l'orizzonte (un contenitore con overflow nascosto che finisce proprio sulla linea di base) e porta il sole all'ora START. Dopo 2,4 secondi senza nessuno una timeline in ripetizione porta il sole dall'alba al tramonto in DAY secondi; quando ricomincia, il sole salta sotto l'orizzonte senza molla, così non torna indietro sul cielo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'Umbra' | La parola sull'orizzonte: corta è meglio, la misura si adatta da sola alla pagina. |
START | script.js | 9.5 | L'ora su cui si posa l'apertura, dalle 5 alle 19 (9.5 sono le nove e mezza). |
DAY | script.js | 11 | In quanti secondi il sole va dall'alba al tramonto quando va da solo. |
SHADOW | script.js | 0.5 | Quanto è lunga l'ombra: più alto, ombre più lunghe a ogni ora. |
HATCH | script.js | [6, 1] | Le righe dell'ombra: la distanza fra una riga e l'altra e lo spessore, in pixel. |
ANGLE | script.js | 62 | L'angolo fra le righe e la luce: 90 le mette di traverso, sotto i 30 diventano strisce. |
SUN_SPRING | script.js | [120, 15] | La molla con cui il sole segue il puntatore: quanto è rigida e quanto è frenata. |
WIDTH | script.js | [146, 70] | La larghezza delle lettere col sole basso e a mezzogiorno (da 50 a 150). |
WEIGHT | script.js | [250, 820] | Il peso delle lettere col sole basso e a mezzogiorno (da 100 a 900). |
STAGGER | script.js | 0.07 | Quanti secondi passano fra una lettera e l'altra quando seguono il sole. |
Quando usarla
Per un nome o una parola che parla di luce, sole e ombra: il titolo di una casa vacanza o di un hotel al mare, l'insegna di un bar con la terrazza, un marchio di ombrelloni, creme solari o occhiali da sole, la pagina di un fotografo che lavora con la luce naturale. Funziona dove c'è una scena sola e la parola è il messaggio; non è adatto a un titolo fra tanti altri contenuti.
Sul telefono
Le stesse animazioni a misure adattate: la parola occupa quasi tutta la larghezza, l'arco del cielo è più alto che largo, le scritte in alto e in basso sono un poco più piccole. 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 il giorno riparte da solo.
Con il movimento ridotto
Niente molle, niente lettere che salgono, niente tacche che saltano e niente giorno che va da solo: la scena compare in dissolvenza già al suo posto alle nove e mezza, e col puntatore o con le frecce l'ombra e le lettere vanno subito all'ora scelta.
Trappole
- La prima versione faceva l'ombra con un filtro SVG, nove feOffset e feMerge sulla parola: giusta ma lentissima, oltre un secondo per fotogramma nel browser senza scheda grafica, e anche le drop-shadow CSS una dentro l'altra restavano lente. Sul canvas, lavorando solo nel rettangolo di lettere e ombra, il costo è come quello di una parola che cambia peso.
- Un canvas disegnato su se stesso viene prima copiato tutto intero: con nove raddoppi erano nove copie della pagina a ogni fotogramma. Con due canvas che si passano il disegno l'uno all'altro il tempo si è dimezzato.
- Il canvas non sa disegnare una larghezza qualsiasi di un carattere variabile (fontStretch conosce solo nove parole, da ultra-condensed a ultra-expanded): le lettere dell'ombra prendono la larghezza più vicina e si stirano fino alla scatola della lettera vera. Dove restavano un filo più larghe le righe spuntavano intorno ai bordi delle lettere: ora le lettere si tolgono dall'ombra e lì resta solo carta, invisibile.
- Le righe parallele alla luce erano belle all'alba ma a mezzogiorno diventavano strisce verticali che non si leggevano come ombra: inclinate di 62 gradi rispetto alla luce la forma si legge a ogni ora.
- Con un y assoluto su ogni lettera di un testo SVG ogni lettera diventava un pezzo a sé, centrato da solo, e la parola si accavallava: le lettere ora sono span HTML che salgono con un transform.
- La timeline del giorno, creata in pausa, con fromTo scriveva subito l'ora delle cinque nello stato: col movimento ridotto la scena si apriva di notte. Serve immediateRender: false.
Librerie
GSAP 3.15.0, Anybody (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,3 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.
