Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
Il faro nella tempesta
Scorri dentro l’anteprima
Un faro su uno scoglio, al tramonto. Scorrendo il tempo peggiora: le nuvole si chiudono, le onde si alzano e si infrangono con la schiuma, cade la pioggia di traverso e un lampo spacca il cielo. Il fascio del faro gira, trova una barca di soccorso fra le onde e la accompagna fino al porto. Poi la tempesta passa e torna il sereno, con il sole, l’arcobaleno e i gabbiani.
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 lighthouse in the storm</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena" data-scena>
<div class="palco" data-palco>
<!-- il mare, il faro, la barca, la pioggia: lo script li disegna su misura dello schermo -->
<svg class="mare" data-mare aria-hidden="true" focusable="false"></svg>
<div class="lampo" data-lampo aria-hidden="true"></div>
<header class="testata">
<p class="marchio">
<svg class="marchio__segno" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M12.5 12h7l2 16h-11z" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linejoin="round"/><path d="M11 12h10M13 6.5h6V12h-6zM16 3v3.5" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M4 28h24" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"/></svg>
<span>Gullstone Sea Rescue</span>
</p>
<a class="dona" href="#"><span class="dona__fondo" aria-hidden="true"></span><span class="dona__testo">Donate</span></a>
</header>
<section class="racconto" data-racconto aria-live="polite"></section>
<p class="cenno" data-cenno>Scroll into the storm</p>
</div>
</main>
<!-- il racconto: da che punto della discesa (0-1) vale ogni riga -->
<ul class="capitoli" data-capitoli hidden>
<li data-da="0" data-nome="Seven in the evening">Most nights, the sea is kind.</li>
<li data-da="0.1" data-nome="Nine o'clock">Some nights, it isn't.</li>
<li data-da="0.3" data-nome="Midnight">Force nine. Rain sideways. A boat past the rocks.</li>
<li data-da="0.44" data-nome="The light">We keep the light turning until it finds them.</li>
<li data-da="0.66" data-nome="Four in the morning">Every crew home. Every time.</li>
<li data-da="0.82" data-nome="Morning">Volunteers on call since 1897. Join the watch.</li>
</ul>
<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.
33 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 faro nella tempesta» da Animorio e adattala al mio sitoCosa fa
La pagina di un’associazione di soccorso in mare inventata, Gullstone Sea Rescue. Il palco resta fermo per nove schermi e lo scorrimento è il tempo di una notte. In apertura è sera: cielo viola e pesca, il sole che tocca il mare, il faro a strisce rosse e bianche sul suo scoglio, a sinistra un molo con tre case e il fanale verde. Scendendo le nuvole arrivano dai due lati e chiudono il cielo, il cielo e il mare si fanno scuri, le quattro file di onde si alzano e le creste si fanno appuntite e bianche di schiuma; quando un’onda arriva sullo scoglio salta in aria uno spruzzo di gocce, e lo stesso succede contro il molo. Comincia la pioggia, piegata dal vento, e a metà tempesta un lampo: il fulmine si disegna dall’alto in basso, la scena si illumina due volte e tutto trema. Intanto il faro gira: due fasci opposti si allungano e si accorciano come se girassero davvero, e quando puntano verso chi guarda la lanterna abbaglia. All’orizzonte spunta una barca di soccorso arancione; il fascio smette di girare, la trova e la segue mentre lei lotta fra le onde, avanza, viene ricacciata indietro, riparte e arriva al molo, sempre più grande man mano che si avvicina. Poi il vento cala, la pioggia smette, le nuvole se ne vanno verso destra, il faro si spegne, sorge il sole del mattino, si disegna l’arcobaleno e arrivano i gabbiani. Le finestre delle case si accendono nella notte e si spengono al mattino; le scritte cambiano a ogni momento della storia, parola per parola, e al mattino il testo diventa scuro sul cielo chiaro.
Come funziona
Il palco e il racconto
La scena è alta nove schermi e dentro c’è un palco sticky alto 100lvh con un SVG grande quanto lui: il viewBox è la sua misura in pixel. Un solo tween con ScrollTrigger (scrub 0,8) porta un numero da 0 a 1 lungo tutta la discesa; a ogni fotogramma quel numero diventa il progresso di una timeline in pausa, la storia, che muove una manciata di valori: nubi, tempesta, pioggia, barca, aggancio del fascio, sereno, arcobaleno, gabbiani.
Le onde di Gerstner
Ogni fila di onde è un tracciato rifatto a ogni fotogramma: un punto ogni 9 pixel, spostato in su e in giù da un coseno e di lato da un seno. Lo spostamento di lato stringe i punti sulla cresta, che diventa appuntita, come nelle onde di Gerstner; la forza della tempesta alza l’ampiezza e la ripidità, che però resta sotto il limite in cui la curva si ripiegherebbe su se stessa. Sopra ogni cresta abbastanza alta un tratto bianco e spesso fa la schiuma, che scende sul davanti dell’onda.
Il fascio che gira
Il faro gira in un piano che vediamo di taglio: per due fasci opposti si prende il coseno dell’angolo, che dice da che parte puntano e quanto sono lunghi sullo schermo. Quando il coseno è vicino a zero il fascio guarda verso di noi e la lanterna abbaglia. I coni hanno un gradiente che si perde lontano e mix-blend-mode: screen, così schiariscono il cielo, la pioggia e la barca che toccano. Quando la barca arriva, l’angolo si sposta verso di lei per la via più corta e il fascio la segue.
La barca che si avvicina
La barca va da un punto all’orizzonte al molo con una serie di tween sullo stesso numero: avanti, indietro di poco con power2.out, avanti, di nuovo indietro e infine fino al porto. Più si avvicina più cresce, e la sua altezza è una via di mezzo fra la fila d’onde lontana e quella vicina, lette nel punto giusto con una ricerca binaria. Si inclina secondo la pendenza dell’onda, e nella tempesta un po’ di più; la bandiera sull’albero sventola.
Pioggia, spruzzi e lampo
La pioggia è un solo tracciato con tutte le gocce, piegate dal vento: costa come una linea sola. Gli spruzzi sono cerchi con velocità e gravità, lanciati quando la cresta di un’onda arriva sullo scoglio o sul molo. Il lampo è una piccola timeline a tempo (non legata allo scroll) che parte quando la discesa passa il 33%: il fulmine si disegna con stroke-dashoffset, un velo chiaro lampeggia due volte e l’SVG trema con elastic.out.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
STORM | script.js | 1 | Quanto si alzano le onde nella tempesta: 0,3 mare mosso, 1,6 burrasca. |
RAIN | script.js | 160 | Quante gocce cadono nel momento peggiore. |
RAIN_ANGLE | script.js | 22 | Di quanti gradi il vento piega la pioggia: 0 cade dritta. |
BEAM_SPEED | script.js | 1 | Quanti giri fa il fascio del faro ogni cinque secondi. |
FOAM | script.js | 1 | Quanta schiuma salta sullo scoglio e sul molo quando arriva un’onda: 0 niente spruzzi. |
LIGHTNING | script.js | true | Il lampo a metà tempesta: false lo spegne. |
--cielo-tempesta-alto | style.css | #0b1018 | Il cielo della tempesta; accanto ci sono quelli della sera e del mattino, il mare, le nuvole, il faro e la barca. |
Quando usarla
Per chi deve raccontare una protezione o un salvataggio: un’associazione di soccorso, una compagnia di assicurazioni, una raccolta fondi, un servizio di emergenza, un marchio di abbigliamento da vela o da pioggia, oppure una storia che passa dal pericolo alla calma mentre si legge.
Sul telefono
La stessa animazione con le misure adattate: faro, barca, case e onde più piccoli, l’orizzonte un po’ più basso per lasciare spazio al testo in alto, il molo più largo in proporzione, il fulmine fra il testo e il faro. Lo scorrimento resta di nove schermi.
Con il movimento ridotto
Niente onde che corrono, niente pioggia che cade, niente spruzzi, niente fascio che gira, niente lampo che lampeggia e niente scorrimento morbido: la storia si ferma in sei quadri, uno per ogni riga di testo, e si passa da uno all’altro in dissolvenza. Nel quadro della tempesta il fulmine c’è, disegnato e fermo.
Trappole
- Con le onde di Gerstner, se la ripidità per l’ampiezza per il numero d’onda supera 1, i punti della cresta si scavalcano e la curva fa un cappio. La ripidità si stringe a 0,92/(A·k) a ogni fotogramma, così la burrasca resta appuntita senza annodarsi.
- Un lampo legato allo scroll con lo scrub dura quanto ci si mette a scorrere: scendendo piano il cielo restava bianco per secondi. Il lampo è una timeline a tempo che parte quando la discesa passa il punto giusto.
- Il fascio che punta la barca saltava dall’altra parte del faro quando l’angolo passava da 179 a -179 gradi. Si sposta verso la barca per la via più corta, con la differenza fra gli angoli riportata fra -180 e 180.
- Il testo con text-shadow dentro le parole a scomparsa (overflow: hidden) mostrava l’ombra tagliata a rettangoli intorno a ogni parola. Niente ombra: al mattino il colore del testo passa dal chiaro allo scuro insieme al cielo.
- Gli spruzzi con molta velocità di lato finivano in mezzo al mare come coriandoli lontani dallo scoglio. Partono quasi dritti in su, vivono poco più di mezzo secondo e cadono con la gravità.
Librerie
GSAP 3.15.0, Lenis 1.3.26, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 14 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.
Collaudo
Provata il 10 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.
