Il sottomarino negli abissi

Scroll, SVGGSAPImpegnativaPeso compresso: Demo 18 KBGSAP + ScrollTrigger 45 KBLenis 5,3 KBGratisScarica lo zip

Scorri dentro l’anteprima

La pagina di un museo del mare: scendendo, un piccolo sottomarino giallo si tuffa dalle onde e scende fino al fondale. La luce cala per fasce di profondità, i banchi di pesci si aprono al suo passaggio, passano meduse, un calamaro e un polpo dumbo, e nel buio il faro accende un cono di luce che a 4.800 metri spazza un relitto. Un contametri meccanico conta la profondità.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The submarine in the deep</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/martian-mono@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the header of the made-up museum -->
  <header class="testata">
    <p class="marchio">Bellwether <span>Sea Museum</span></p>
    <a class="testata__link" href="#fine"><span>Plan a visit</span></a>
  </header>

  <main>
    <!-- the dive: a tall section with a still stage; scrolling moves the camera down the water column -->
    <section class="discesa" data-discesa>
      <div class="palco" data-palco>
        <svg class="mondo" data-mondo aria-hidden="true"></svg>
        <svg class="buio" data-buio aria-hidden="true"></svg>
        <svg class="sotto" data-sotto aria-hidden="true"></svg>

        <!-- the opening, in the sky above the water -->
        <div class="apertura" data-apertura>
          <p class="apertura__etichetta" data-entra>New in the Deep Gallery</p>
          <h1 class="apertura__titolo">
            <span class="riga"><span data-riga>Down to</span></span>
            <span class="riga"><span data-riga>the <em>dark.</em></span></span>
          </h1>
          <p class="apertura__testo" data-entra>Ride the little yellow sub <em>Pip</em> from the waves to the seabed, 4,800 metres below.</p>
        </div>
        <p class="cenno" data-cenno>
          Scroll to dive
          <svg viewBox="0 0 24 32" aria-hidden="true"><path d="M12 3V27M4 19L12 28L20 19" /></svg>
        </p>

        <!-- one caption for every band of depth -->
        <div class="didascalie" data-didascalie>
          <article class="didascalia" data-zona="0">
            <p class="didascalia__quota"><span>0 to 200 m</span></p>
            <h2 class="didascalia__nome"><span>The sunlight zone</span></h2>
            <p class="didascalia__testo"><span>Where the light still reaches. Most of the life in the sea crowds into this thin top layer.</span></p>
          </article>
          <article class="didascalia" data-zona="1">
            <p class="didascalia__quota"><span>200 to 1,000 m</span></p>
            <h2 class="didascalia__nome"><span>The twilight zone</span></h2>
            <p class="didascalia__testo"><span>The blue fades to grey. Jellies drift past and whole schools rise every night to feed.</span></p>
          </article>
          <article class="didascalia" data-zona="2">
            <p class="didascalia__quota"><span>1,000 to 4,000 m</span></p>
            <h2 class="didascalia__nome"><span>The midnight zone</span></h2>
            <p class="didascalia__testo"><span>No sunlight at all. From here on, the only light is the one Pip carries.</span></p>
          </article>
          <article class="didascalia" data-zona="3">
            <p class="didascalia__quota"><span>4,000 to 6,000 m</span></p>
            <h2 class="didascalia__nome"><span>The abyss</span></h2>
            <p class="didascalia__testo"><span>Near-freezing water and hundreds of times the pressure of the air on your shoulders.</span></p>
          </article>
          <article class="didascalia" data-zona="4">
            <p class="didascalia__quota"><span>On the seabed</span></p>
            <h2 class="didascalia__nome"><span>The Argo Bell</span></h2>
            <p class="didascalia__testo"><span>A cargo steamer lost in a winter storm in 1923, resting upright where no storm can reach her.</span></p>
          </article>
        </div>

        <!-- the depth gauge: real numbers, counted as the sub goes down -->
        <aside class="strumento" data-strumento aria-label="Depth gauge">
          <p class="strumento__nome">Depth</p>
          <p class="strumento__metri"><span class="contatore" data-contatore></span><span class="strumento__unita">m</span></p>
          <dl class="strumento__dati">
            <div><dt>Pressure</dt><dd data-pressione>1 atm</dd></div>
            <div><dt>Sunlight</dt><dd data-luce>100%</dd></div>
          </dl>
        </aside>
        <div class="scala" data-scala aria-hidden="true">
          <div class="scala__binario"></div>
          <svg class="scala__segno" data-segno viewBox="0 0 40 20"><path d="M6 10C6 5 11 3 20 3C29 3 35 6 35 10C35 14 29 17 20 17C11 17 6 15 6 10Z" /><path d="M16 3L18 0H24L25 3Z" /><path d="M1 6L6 10L1 14Z" /></svg>
        </div>
      </div>
    </section>

    <footer class="fine" id="fine">
      <p class="fine__frase">Come down <em>with us.</em></p>
      <p class="fine__testo">The Deep Gallery, open every day from ten. Pip is waiting at the bottom of the stairs.</p>
      <a class="fine__bottone" href="#"><span>Plan your visit</span></a>
    </footer>
  </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="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.

64 valori da cambiare

Apri il Playground

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 sottomarino negli abissi» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

La pagina di un museo del mare inventato, il Bellwether Sea Museum. In apertura il cielo color sabbia, il titolo grande «Down to the dark.» e sotto il mare: il sottomarino giallo Pip cade dall’alto, entra in acqua con uno schizzo di gocce e due cerchi che si allargano, e poi galleggia dondolando sulle onde. Scorrendo il palco resta fermo e la telecamera segue Pip verso il basso: il titolo vola via, compaiono in alto a destra lo strumento con la profondità e, lungo il bordo, una scala con un piccolo sottomarino che scende. Il numero dei metri è un contatore meccanico: ogni cifra è una colonna che rotola alla successiva, con il riporto come nei contachilometri; sotto ci sono la pressione in atmosfere e la luce del sole che resta. Pip si inclina col muso in giù quando si scende in fretta, lascia una scia di bolle dall’elica e ondeggia un poco di lato. Il mare passa dal turchese al blu, al blu notte, al nero, e a ogni fascia (la zona della luce, del crepuscolo, della mezzanotte, l’abisso) una didascalia sale riga per riga in basso a sinistra, mentre una linea tratteggiata segna nell’acqua dove la fascia comincia. Un banco di pesci argentati e poi uno di pesci scuri si aprono intorno al sottomarino come una tenda e si richiudono dietro; passano meduse che si contraggono e lasciano andare i tentacoli. Quando il buio arriva, Pip accende il faro: il cono di luce si accende con un piccolo tremolio elastico e da lì in poi si vede solo quello che cade nel fascio, la neve marina, un calamaro che nuota a scatti, un polpo dumbo che sbatte le orecchie. In fondo Pip si sposta di lato, il faro si gira verso il relitto del piroscafo Argo Bell posato sul fondale e lo percorre da poppa a prua. Il puntatore fa scappare i pesci e le meduse; toccando Pip, il sottomarino si scuote e sbuffa una raffica di bolle.

Come funziona

Il palco e la colonna d’acqua

La sezione è alta DIVE_LENGTH+1 schermi e dentro c’è un palco sticky alto 100lvh con tre SVG uno sopra l’altro: il mondo, il buio e il sottomarino, tutti con il viewBox grande quanto il palco in pixel. Il mondo è un gruppo alto più di sei schermi (cielo, acqua con un gradiente a quattro fermate, pesci, meduse, relitto, fondale) che a ogni fotogramma scorre in su: la telecamera è solo un translate che tiene Pip fermo al 42% dell’altezza.

Metri non lineari

Le profondità vere non entrano in uno schermo in modo uniforme: 200 metri di luce contro 3.000 di mezzanotte. Una tabellina di nodi dice dove sta ogni profondità in schermi sotto le onde (0, 1,5, 3, 4,6, 5,8) e due funzioni, profondita(u) e quota(d), passano dall’una all’altra per tratti lineari. Così ogni fascia ha il suo pezzo di scorrimento, e il contatore legge sempre i metri giusti per la posizione di Pip.

Una timeline di numeri

Una sola timeline legata allo scorrimento con scrub muove un oggetto di numeri: p (quanto è sceso, con power1.inOut), luce (il faro, con elastic.out, così si accende tremolando), fine, mira e spazza (lo spostamento finale e il fascio che percorre il relitto). Le didascalie entrano nei momenti in cui Pip passa 200, 1.000 e 4.000 metri: il momento si trova invertendo la curva della discesa con trenta dimezzamenti.

Il buio con il buco

Sopra il mondo c’è un rettangolo del colore del buio, con un’opacità che cresce con la profondità, e una maschera: un rettangolo bianco con il cono del faro in nero, sfumato con feGaussianBlur. Dove c’è il cono il buio sparisce e si vede il mondo sotto; sopra, lo stesso cono riempito con un gradiente caldo in mix-blend-mode screen fa la luce. Il cono segue il muso del sottomarino, ruotato con lui.

Pesci a molla

Ogni pesce ha un posto nel banco che nuota piano di lato e una molla smorzata: se il sottomarino o il puntatore sono entro un raggio, la meta della molla diventa uno spostamento verso fuori, più forte quanto più si è vicini, e il pesce ci arriva con un piccolo rimbalzo, girato secondo la velocità. Uscito Pip, la molla lo riporta al suo posto e il banco si richiude. Le meduse usano la stessa molla, più morbida.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`DIVE_LENGTH`	script.js	`9`	Quanti schermi di scorrimento dura la discesa.
`MAX_DEPTH`	script.js	`4800`	La profondità del fondale in metri, dove sta il relitto.
`FISH`	script.js	`36`	Quanti pesci in ogni banco; il telefono ne ha circa tre quarti.
`PART`	script.js	`1`	Quanto si aprono i banchi intorno al sottomarino e al puntatore.
`JELLIES`	script.js	`6`	Quante meduse nella zona del crepuscolo.
`BEAM`	script.js	`1`	Quanto è lungo e largo il fascio del faro.
`WEAVE`	script.js	`1`	Quanto ondeggia di lato il sottomarino mentre scende.
`SNOW`	script.js	`70`	Quanti fiocchi di neve marina passano nel fascio.
`--sottomarino`	style.css	`#ffc629`	Il giallo del sottomarino; accanto ci sono i colori dell’acqua a ogni profondità, del buio e del fascio.

Provali nel Playground

Quando usarla

Per raccontare una discesa o una scala di grandezze: un museo del mare o di scienze, un acquario, una spedizione, un centro immersioni, la pagina di una ricerca oceanografica, ma anche una storia che va dal leggero al profondo, o i livelli di un prodotto.

Sul telefono

La stessa discesa con le misure adattate: sottomarino, pesci e creature più piccoli, circa tre quarti dei pesci, il banco più largo rispetto allo schermo, il fascio più lungo, il relitto più piccolo e più al centro. La scala sul bordo è più corta e senza scritte. Un tocco su Pip lo fa scuotere e sbuffare bolle.

Con il movimento ridotto

Niente telecamera che scorre, niente nuoto, niente bolle e niente scorrimento morbido: il palco mostra un’immagine ferma per ogni fascia (la superficie, la luce, il crepuscolo, la mezzanotte, l’abisso, il relitto) e scorrendo la successiva arriva in dissolvenza, con il faro già acceso dove è buio, il contatore sul numero della fascia e la sua didascalia.

Trappole

Prima del primo fotogramma i pesci, le meduse e il polpo erano disegnati a 0,0, cioè nel cielo in alto a sinistra: un polpo rosa compariva sopra il titolo. Ogni creatura nasce con translate(-999 -999) e viene messa al suo posto solo quando la sua fascia è vicina allo schermo.
Una striscia d’acqua semitrasparente davanti allo scafo, per farlo sembrare a galla, era piena fino in fondo: tingeva di verde il giallo e lasciava un gradino netto nei raggi di luce. Ora è un gradiente che sparisce in pochi pixel.
Con l’unità del contatore che rotola senza fermarsi, a ogni foto c’erano due cifre a metà e il numero non si leggeva. Ogni cifra sta ferma e rotola alla successiva solo nell’ultimo quinto di metro, e quelle sopra fanno il riporto nello stesso momento.
Il calamaro che sale a scatti e ricomincia da sotto con un modulo saltava di colpo. Ogni ciclo ha uno scatto in su e una discesa lenta della stessa misura, così la posizione torna al punto di partenza senza salti.
Una maschera con il cono sfumato da feGaussianBlur costa: il cono si disegna solo quando il faro è acceso, e pesci, meduse e creature si aggiornano solo quando la loro fascia è sullo schermo.

Librerie

GSAP 3.15.0, Lenis 1.3.26, Bricolage Grotesque (font variabile) 5.3.0, Martian Mono (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 18 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.