La lettera che cade
Scroll, Testo, Transizioni
NuovaGratis
Torna alla libreria
Il sole dietro la riga
Scorri dentro l’anteprima
Una linea d’orizzonte sottile e un sole pieno: scendendo il sole tramonta dietro la linea, si schiaccia un poco quando è basso e lascia sulla riga un tratto della sua luce; poi la notte si apre fuori dalla linea e la pagina passa dal bianco caldo al nero. Il saluto cambia parola per parola, Good morning, Good evening, Good night, con le lettere che affondano dietro la stessa riga, e accanto scorrono le ore. 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 sun behind the line</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 made-up seaside hotel, Vespera. The stage sticks while you scroll: one thin horizon line and a round sun.
The sun goes down behind the line, the greeting changes word by word sinking behind the same line, the hours
roll by on the right, and when the last light is gone the night opens out of the line and turns the page
black. The night is a second copy of the scene, made by the script -->
<main>
<section class="corsa" data-corsa>
<div class="palco" data-palco>
<div class="scena" data-scena>
<div class="cielo" data-cielo><div class="sole" data-sole></div></div>
<div class="orizzonte" data-orizzonte></div>
<div class="luce" data-luce></div>
<h1 class="titolo" data-titolo>Good morning</h1>
<div class="ore" data-ore aria-hidden="true"><div class="ore__nastro" data-nastro></div></div>
<p class="nota" data-nota>A small hotel by the sea, twelve rooms facing the sunset.</p>
<header class="testa">
<a class="marchio" href="#" data-marchio data-entra-testa>
<svg class="marchio__segno" viewBox="0 0 26 16" aria-hidden="true">
<svg x="0" y="0" width="26" height="13" overflow="hidden"><circle data-marchio-sole cx="13" cy="13" r="6"/></svg>
<path d="M1 13.5h24"/>
</svg>
<span class="marchio__nome">Vespera</span>
</a>
<a class="pillola" href="#" data-pillola data-entra-testa><span class="pillola__fondo" data-pillola-fondo></span><span class="pillola__testo">Book a room</span></a>
</header>
<p class="cenno" data-entra-testa><span class="cenno__dentro" data-cenno><span>Scroll</span><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 3v13M4.5 10.5 10 16l5.5-5.5"/></svg></span></p>
</div>
</div>
</section>
</main>
<!-- an invisible copy of the title, to measure it -->
<div class="misura" data-misura aria-hidden="true"></div>
<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="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.
22 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 sole dietro la riga» da Animorio e adattala al mio sitoCosa fa
La pagina di un piccolo hotel sul mare inventato, Vespera: carta bianco caldo, il nome in alto a sinistra con un piccolo sole che si posa su una riga, la pillola Book a room a destra. In mezzo ci sono solo tre cose: una linea d’orizzonte sottile, un sole rotondo color vermiglio e, appoggiato sopra la linea, il saluto Good morning in un grande carattere graziato. Sulla destra c’è un righello verticale delle ore, con una tacca ogni quarto d’ora: l’ora all’altezza dell’orizzonte è quella di adesso, scritta più nera e più spessa delle altre. All’arrivo la linea si disegna da sinistra, il sole sale fuori da lei, va un pixel troppo in alto e si riassesta, le lettere del saluto salgono una dopo l’altra e le ore scorrono fino alle dieci. Scorrendo il palco resta fermo e il sole scende. Quando è basso si schiaccia un poco, come il sole vero vicino al mare, e quando tocca la linea la riga sotto di lui prende il suo colore. Proprio lì il saluto cambia: le lettere di morning affondano dietro la linea una dopo l’altra, assottigliandosi, e da lì sale evening, stretta e leggera all’inizio, che arriva un pixel troppo in alto e si posa; Good, che resta, fa un piccolo inchino quando la parola nuova atterra. Il sole sparisce dietro l’orizzonte ma sulla linea resta un tratto vermiglio largo quanto lui, l’ultima luce, che si accorcia verso il centro fino a sparire. Allora la notte si apre fuori dalla linea: due bordi netti si allontanano, uno verso l’alto e uno verso il basso, e fra loro la pagina è nera e l’inchiostro chiaro. Mentre la notte si apre, evening affonda e sale night. Ogni saluto è un poco più morbido del precedente (l’asse SOFT di Fraunces): la notte ha le lettere tonde. Intanto il righello delle ore scorre: veloce durante il giorno, più lento dal tramonto in poi, perché la sera è lunga. Quando la notte è tutta aperta l’ora sull’orizzonte, le 23, si accende nel colore del sole e le lettere fanno un saltino dal centro verso i lati. Col mouse ogni lettera salta e si riassesta, il piccolo sole del marchio tramonta e risorge e la pillola si gonfia. Risalendo tutto torna indietro: la notte si richiude nella linea e il sole risorge.
Come funziona
Il palco e la linea
Una sezione alta sette schermi e dentro un palco sticky alto 100lvh. La linea d’orizzonte è un div alto un pixel, messo a un pixel intero (Math.round) perché resti netta. Il cielo è un contenitore alto fino alla linea con overflow hidden: il sole sta lì dentro, quindi scendendo sotto la linea sparisce da solo, senza maschere. Anche il titolo è tagliato con clip-path esattamente alla linea, e le lettere che scendono le passano dietro.
Il sole che tramonta
La posizione del sole è un numero da 0 a 1 in uno stato, mosso dalla timeline con lo scroll: lo script lo trasforma in pixel a ogni fotogramma, così cambiare misura alla finestra non rompe niente. Quando il fondo del sole è a meno di un raggio dalla linea, scaleY scende fino a 1 − SQUASH, col quadrato della distanza: è lo schiacciamento del sole vero vicino all’orizzonte. Il tratto vermiglio sulla linea è largo quanto la corda del cerchio alla quota della linea (2·√(R² − d²)) e, dopo il tramonto, resta largo un diametro finché la sua luce non si spegne.
La notte come seconda copia
La notte è la stessa scena clonata con cloneNode, con le variabili dei colori scambiate e sopra la prima. All’inizio clip-path la chiude a zero; aprendosi diventa inset(alto 0 basso 0) con i due bordi che partono dalla linea e vanno ai margini. Tutto quello che si muove (lettere, sole, ore) si muove insieme nelle due copie: le liste di GSAP contengono le due copie e lo stagger è una funzione che conta dentro una copia sola (i % n).
Il saluto che cambia
Le parole che tutti i saluti hanno in comune (Good) restano; il resto di ogni saluto sta in una griglia con una cella sola, così le parole stanno una sopra l’altra. La parola vecchia scende di yPercent 135 con power2.in e font-variation-settings che la assottiglia, la nuova sale con back.out(0.6), cioè un pixel o due di troppo. Ogni saluto ha SOFT e wght un po’ più alti del precedente. La misura del titolo si prende su una copia invisibile, al peso di ogni saluto: sul telefono va su due righe.
Le ore e la regia
Il righello è una striscia di tacche costruita dallo script e spostata con translate3d perché l’ora del momento cada sull’orizzonte; le etichette vicine alla linea prendono opacità e peso. Tutto è una timeline sola con ScrollTrigger e scrub, e Lenis per lo scorrimento morbido. L’ora corre veloce fino al tramonto e poi più lenta. Lo stato si ridisegna nel ticker di GSAP solo quando qualcosa è cambiato; il saltello finale e quelli in hover sono tween a tempo con elastic.out.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
GREETINGS | script.js | ['Good morning', 'Good evening', 'Good night'] | I saluti della giornata, in ordine: le prime parole uguali restano ferme, il resto cambia affondando dietro la linea. Il primo cambio arriva quando il sole tocca l’orizzonte, l’ultimo quando si apre la notte. |
FIRST_HOUR | script.js | 10 | L’ora in cima alla pagina, sul righello. |
LAST_HOUR | script.js | 23 | L’ora in fondo alla pagina, quella che si accende alla fine. |
HORIZON | script.js | 0.64 | A che altezza sta l’orizzonte, in parte dell’altezza dello schermo. |
SUN_SIZE | script.js | 1 | Quanto è grande il sole; il titolo si stringe per restargli accanto. |
SQUASH | script.js | 0.06 | Quanto si schiaccia il sole basso quando tocca la linea (0 = resta tondo). |
LAST_LIGHT | script.js | 1 | Quanto resta sulla linea il tratto dell’ultima luce dopo il tramonto (0 = niente). |
RIDE | script.js | 1 | Quanto scroll serve per tutto: 2 è il doppio. |
--sole | style.css | #ff4b1f | Il colore del sole, dell’ultima luce e dell’ora che si accende. |
--notte | style.css | #0c0c0b | Il colore della pagina di notte. |
Quando usarla
Per l’apertura di un hotel, di una casa vacanza, di un ristorante con la terrazza sul tramonto: una pagina che dice «da noi la giornata finisce così». Va bene anche per un sito che cambia col passare delle ore, per un evento al tramonto o per passare da una sezione chiara a una scura.
Sul telefono
Uguale: il saluto va su due righe, con la parola che cambia appoggiata sulla linea, il sole è un poco più piccolo e il righello delle ore più stretto. Tutto il resto si muove allo stesso modo.
Con il movimento ridotto
Niente scende né si apre e Lenis resta spento: lo scroll passa da tre soste, il giorno col sole alto, il tramonto col sole a metà dietro la linea e la notte, e fra una sosta e l’altra la scena cambia con una dissolvenza.
Trappole
- La g di morning, evening e night scende sotto la riga di base: con il titolo appoggiato proprio sulla linea il taglio le mozzava la coda. Il titolo sta più su di 0,29 volte il corpo, e il taglio resta sulla linea.
- Un passaggio di colore continuo dal bianco al nero passa per un grigio dove testo e fondo hanno lo stesso valore e non si legge niente: la notte è una seconda copia della scena con i colori della notte, aperta con clip-path, e ogni punto della pagina è sempre o giorno o notte.
- Un clip-path a zero ma con la linea dentro mostrava per un attimo la linea chiara della notte sul bianco: a notte chiusa il taglio è inset(0 0 100% 0), che non lascia vedere niente.
- Con la stessa lista di lettere per le due copie, uno stagger normale fa partire prima tutte le lettere del giorno e poi quelle della notte: lo stagger è una funzione che conta dentro una copia sola.
- Le parole dei saluti stanno una sopra l’altra: la parola nascosta, che è l’ultima nel codice, riceveva il mouse al posto di quella visibile. Solo il saluto del momento ha pointer-events.
- Un’ora che scorre sempre alla stessa velocità faceva tramontare il sole alle nove e mezza di sera e lasciava la pagina chiara fino alle undici: l’ora corre veloce fino al tramonto e poi rallenta.
Librerie
GSAP 3.15.0, ScrollTrigger 3.15.0, Lenis 1.3.26, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 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.
