Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
L’eclissi che spegne la pagina
Scorri dentro l’anteprima
La giornata dell’eclissi di un osservatorio, nello stile minimal: scendendo, la Luna, solo un contorno sottile, passa davanti a un Sole vermiglio e lo morde in una falce sempre più fina, e tutta la pagina si scurisce con la luce che resta. Alla totalità la Luna si posa al centro, due anelli sottili si disegnano intorno e la pagina è notte; poi riparte e torna il giorno.
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 eclipse that dims the page</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>
<!-- the eclipse day of a made-up observatory, Halo. Scrolling, the Moon, only a thin outline, slides across the Sun
and bites it into a crescent; the more Sun it covers, the darker the whole page gets. At totality the Moon settles
in the middle, a thin vermilion ring draws itself around it and the page is night; then the Moon moves on and
the day comes back. The word of the phase loses weight with the light -->
<main>
<section class="apertura">
<p class="piccolo">Halo Observatory</p>
<h1 class="titolo">For six minutes,<br>the day goes out.</h1>
<p class="piccolo piccolo--tenue">Scroll to bring the Moon across.</p>
</section>
<section class="racconto" data-racconto>
<div class="palco" data-palco>
<header class="testa">
<p class="marchio">Halo</p>
<p class="piccolo piccolo--tenue">Total eclipse, viewing day</p>
</header>
<svg class="cielo" data-cielo aria-hidden="true">
<defs>
<mask id="morso" maskUnits="userSpaceOnUse">
<rect class="morso__tutto" data-morso-tutto fill="#fff"></rect>
<circle data-morso-luna fill="#000"></circle>
</mask>
</defs>
<circle class="sole" data-sole mask="url(#morso)"></circle>
<circle class="corona corona--larga" data-corona-larga></circle>
<circle class="corona" data-corona></circle>
<circle class="luna" data-luna></circle>
<g class="righello" data-righello></g>
</svg>
<div class="fase" aria-live="polite">
<p class="fase__finestra">
<span class="fase__parola" data-fase>Daylight</span>
<span class="fase__parola" data-fase>Partial</span>
<span class="fase__parola" data-fase>Totality</span>
<span class="fase__parola" data-fase>Partial</span>
<span class="fase__parola" data-fase>Daylight</span>
</p>
<p class="lettura">Sun covered <span class="lettura__cifra" data-coperto>0%</span></p>
</div>
</div>
</section>
<section class="apertura apertura--fine">
<h2 class="titolo titolo--medio">Bring a chair.<br>We bring the glasses.</h2>
</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/ScrollTrigger.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.
29 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’eclissi che spegne la pagina» da Animorio e adattala al mio sitoCosa fa
La giornata dell’eclissi di un osservatorio inventato, Halo, su un bianco caldo con l’inchiostro nero e un solo vermiglio. Dopo l’apertura lo schermo si ferma: a destra un Sole pieno vermiglio, in alto a sinistra la Luna, che è solo un contorno sottile e grigio. Scendendo la Luna scivola in diagonale verso il Sole e, dove lo copre, il Sole sparisce: resta una falce sempre più sottile. Tutta la pagina segue la luce che rimane: resta chiara a lungo, poi vicino alla totalità diventa grigia e quasi nera, e le scritte passano dal nero al bianco caldo. A sinistra la parola della fase, grande in un serif variabile, cambia in una finestra (Daylight, Partial, Totality, Partial, Daylight): la vecchia esce in alto, la nuova sale da sotto, e perde peso e si ammorbidisce mentre la luce cala; sotto, la percentuale di Sole coperto conta. Alla totalità la Luna arriva al centro, va un capello oltre e si assesta con un piccolo elastico, e due anelli vermigli sottili si disegnano intorno a lei partendo dall’alto, il secondo più largo e più tenue un attimo dopo. Prima che la Luna riparta gli anelli corrono via nello stesso verso, poi la falce ricompare dall’altra parte e la pagina torna chiara. In basso una linea del tempo sottile ha il primo contatto, la totalità (un tratto vermiglio corto, perché dura sei minuti) e l’ultimo contatto alla loro distanza vera: un segno vermiglio cammina sulle ore con l’orario sopra. Tutto segue lo scorrimento, avanti e indietro.
Come funziona
Un SVG e una maschera
Il Sole, la Luna, gli anelli e la linea del tempo stanno in un SVG con il viewBox uguale ai pixel del palco fissato (position: sticky, alto 100lvh). Il Sole è un cerchio pieno con una maschera: un rettangolo bianco grande quanto il palco e, sopra, un cerchio nero che si muove con la Luna. Dove c’è il nero il Sole non si vede, quindi la falce viene da sola, giusta a ogni posizione, senza disegnarla. La Luna visibile è solo un contorno sottile e semitrasparente.
Un solo numero per tutta la storia
La timeline, legata allo scorrimento con scrub SCRUB, porta un numero u da 0 a 1: per quattro passi la Luna arriva, per TOTALITY passi resta ferma al centro, per altri quattro se ne va. Da u si ricavano il posto della Luna sulla sua retta (inclinata di ANGLE gradi), l’orario e la parola della fase. Il passaggio fra due parole cade dove la geometria dice: il primo contatto è quando la distanza fra i centri è uguale alla somma dei raggi.
La pagina segue la luce
A ogni fotogramma lo script calcola l’area coperta del Sole con la formula della lente fra due cerchi e la scrive nella percentuale. Il buio è quella copertura alla terza potenza, come il cielo vero che cambia poco finché resta un filo di Sole: con gsap.utils.interpolate mescola il bianco caldo e il quasi nero nella variabile --fondo, e il colore del testo passa dal nero al bianco fra il 40 e il 62 per cento di buio. Lo stesso numero toglie peso alla parola della fase (asse wght) e le dà morbidezza (asse SOFT di Fraunces).
L’assestamento e gli anelli
Arrivata al centro, la Luna va oltre di poco più di due pixel e torna con elastic.out: è un secondo valore della timeline sommato al suo posto. Gli anelli sono cerchi con stroke-dasharray lungo quanto la circonferenza, girati di 90 gradi per partire dall’alto: lo stroke-dashoffset va dalla circonferenza a zero e li disegna, poi da zero a meno la circonferenza e la coda insegue la testa finché spariscono. Il secondo parte un attimo dopo.
La linea del tempo e le misure
I quattro orari di TIMES stanno sulla linea alla loro distanza vera, per questo la totalità è un tratto corto; il segno vermiglio cammina sulle ore e i nomi sotto la linea si schiariscono quando l’orario ci passa sopra. Tutte le misure (centro e raggio del Sole, la linea) si ricalcolano a ogni refresh di ScrollTrigger e a ogni resize, anche a metà dell’eclissi.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SUN | script.js | 0.25 | Il raggio del Sole, come parte dell’altezza del palco. |
MOON | script.js | 1.035 | Quanto la Luna sembra più grande del Sole: più è grande, più largo resta il bordo nero intorno agli anelli. |
ANGLE | script.js | 20 | La pendenza della strada della Luna, in gradi (0 è orizzontale). |
TOTALITY | script.js | 2.2 | Quanto dura la totalità, in passi del racconto (la Luna ne impiega 4 per arrivare). |
TIMES | script.js | ['09:58', '11:24', '11:30', '12:56'] | I quattro orari: primo contatto, inizio e fine della totalità, ultimo contatto. |
SCRUB | script.js | 0.6 | Quanti secondi ci mette il disegno a raggiungere lo scorrimento. |
Quando usarla
Per la pagina di un osservatorio, di un planetario o di un evento all’aperto, per un articolo di scienza o per qualunque racconto in cui la pagina deve passare dal giorno alla notte e tornare: un’apertura, un momento sospeso a metà, un ritorno.
Sul telefono
Uguale, con misure adattate: il Sole sta al centro in alto e più piccolo, la parola della fase sotto, la linea del tempo in fondo con le scritte più piccole. La Luna entra già da fuori dello schermo.
Con il movimento ridotto
La Luna non viaggia: cinque quadri fermi (giorno, falce, totalità, falce, giorno) che si danno il cambio con una dissolvenza, con gli anelli già disegnati alla totalità; la pagina si scurisce e si schiarisce piano, le parole della fase si alternano in dissolvenza e il segno sulla linea del tempo salta da un quadro all’altro.
Trappole
- Disegnare la falce come una forma calcolata (due archi) si rompe quando la Luna è quasi tutta sopra il Sole; con la maschera SVG non c’è niente da calcolare e la falce è sempre giusta.
- Un buio proporzionale alla copertura scurirebbe la pagina troppo presto e lascerebbe le scritte grigie su grigio a lungo: con la copertura alla terza potenza la pagina resta chiara quasi fino alla fine, e il cambio di colore del testo avviene in un tratto corto.
- La finestra della parola della fase tagliava la coda della y di Totality: ha più spazio sotto, compensato con un margine negativo.
- La percentuale prima della frase spostava le parole quando cambiava il numero di cifre: messa in fondo (Sun covered 64%) non sposta niente.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,5 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 19 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.
