La frase che si riempie d’acqua allo scroll

Scroll, TestoGSAP, Solo CSSMediaPeso compresso: Demo 6,9 KBGSAP + ScrollTrigger 45 KBLenis 5,3 KBGratisScarica lo zip

Scorri dentro l’anteprima

Animazione di scroll nello stile minimal, su bianco caldo: una frase disegnata a contorni sottili, come lettere di vetro, si riempie d’acqua blu man mano che si scende, dalla riga di sotto a quella di sopra. La superficie ondeggia da sola, sciaborda se si scorre in fretta, si inclina verso il puntatore e prende una goccia dove si tocca; le bollicine salgono e una scala sottile a lato segna i millilitri.

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>Brimvale Glass</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- a made-up maker of glass carafes, Brimvale. The stage sticks while you scroll: the sentence is drawn as thin glass
       outlines and water rises inside the letters as you scroll, with a surface that sways, sloshes when you scroll
       fast, leans towards the pointer and takes a drop where you tap. A thin gauge on the side reads the millilitres.
       The water, the surface and the bubbles are drawn by the script -->
  <main>
    <section class="corsa" data-corsa>
      <div class="palco" data-palco>
        <header class="testa">
          <a class="marchio" href="#" data-entra>Brimvale</a>
          <p class="testa__nota" data-entra>Glass carafes, blown by hand</p>
        </header>

        <svg class="tela" data-tela viewBox="0 0 1000 640" role="img" aria-label="Slowly, then all at once.">
          <defs>
            <clipPath id="lettere" data-lettere>
              <text class="riga" x="470" y="190" text-anchor="middle">Slowly,</text>
              <text class="riga" x="470" y="360" text-anchor="middle">then all</text>
              <text class="riga" x="470" y="530" text-anchor="middle">at once.</text>
            </clipPath>
            <linearGradient id="acqua-grad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" class="acqua__alto"/>
              <stop offset="1" class="acqua__basso"/>
            </linearGradient>
          </defs>


          <!-- the glass: a thick outline with the paper colour laid over its inner half, so only the outer edge shows
               and the overlapping parts inside the letters stay hidden; the water goes on top -->
          <g class="contorni" data-contorni>
            <g class="contorni__bordo">
              <text class="riga" x="470" y="190" text-anchor="middle">Slowly,</text>
              <text class="riga" x="470" y="360" text-anchor="middle">then all</text>
              <text class="riga" x="470" y="530" text-anchor="middle">at once.</text>
            </g>
            <g class="contorni__vetro">
              <text class="riga" x="470" y="190" text-anchor="middle">Slowly,</text>
              <text class="riga" x="470" y="360" text-anchor="middle">then all</text>
              <text class="riga" x="470" y="530" text-anchor="middle">at once.</text>
            </g>
          </g>
          <g clip-path="url(#lettere)">
            <path class="acqua" data-acqua d="M0 640 H1000 V640 Z"/>
            <path class="acqua__riflesso" data-riflesso d="M0 0"/>
            <g data-bolle></g>
            <path class="acqua__pelo" data-pelo d="M0 0"/>
          </g>

          <circle class="goccia" data-goccia r="7" cx="0" cy="-20"/>

          <g class="scala" data-scala>
            <path class="scala__asta" d="M944 80 V560"/>
            <g data-tacche></g>
            <g class="scala__indice" data-indice>
              <path d="M926 0 H962"/>
              <text class="scala__numero" data-numero x="914" y="5" text-anchor="end">0 ml</text>
            </g>
          </g>
        </svg>

        <p class="cenno" data-entra>Scroll to pour, tap for a drop</p>
        <p class="stato" data-entra>Carafe <span class="stato__parola" data-stato>empty</span></p>
      </div>
    </section>

    <footer class="piede">
      <p>Each Brimvale carafe holds 500 ml and is blown, cooled and polished in one small workshop.</p>
    </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.

25 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 «La frase che si riempie d’acqua allo scroll» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Una pagina bianco caldo con in alto il nome di un laboratorio inventato di caraffe di vetro soffiato, Brimvale, e al centro la frase «Slowly, then all at once.» su tre righe, in Fraunces, disegnata solo col contorno sottile, come se ogni lettera fosse di vetro. Scendendo, il palco resta fermo e l’acqua sale dentro le lettere: prima riempie «at once.», poi «then all», poi «Slowly,». L’acqua è blu, l’unico colore, più chiara sotto il pelo, e la superficie è una linea che ondeggia piano da sola, con un riflesso chiaro che scorre appena sotto. Se si scorre in fretta l’acqua sciaborda e poi si calma su una molla; il puntatore la fa inclinare verso di sé, come una caraffa che si muove. Un tocco lascia cadere una goccia: cade, si allunga mentre accelera e apre due increspature che corrono verso i bordi delle lettere. Dentro l’acqua salgono piccole bollicine che scoppiano al pelo. A destra una scala sottile segna da 0 a 500 ml, con l’indice e la cifra blu che salgono con l’acqua, e in basso la scritta passa da empty a pouring a full; a caraffa piena la superficie si calma e l’indice fa un piccolo salto.

Come funziona

Le lettere come maschera

La frase sta due volte nell’SVG: una dentro un clipPath, che fa da maschera all’acqua, e una sopra, senza riempimento e col solo contorno di un pixel e mezzo. L’acqua è un tracciato largo quanto il disegno, che va dal pelo fino al fondo: la maschera la mostra solo dentro le lettere, quindi sale riga dopo riga da sola.

Il pelo dell’acqua

A ogni fotogramma il pelo si ridisegna ogni dieci unità: due onde che corrono in versi opposti, una terza più lunga per lo sciabordio, l’inclinazione verso il puntatore e le increspature delle gocce, ognuna un treno d’onde che si allarga e si spegne. Il livello viene dallo scroll, ammorbidito un poco.

Due molle

Lo sciabordio segue la velocità dello scroll su una molla, quindi cresce quando si scorre in fretta e si spegne quando ci si ferma; l’inclinazione segue il puntatore su un’altra molla, con un piccolo passaggio oltre. Da fermi, un puntatore finto ondeggia da solo e ogni tanto cade una goccia.

La scala e la parola

La scala ha una tacca ogni 25 ml e le cifre ogni 100; l’indice è un gruppo che si sposta con il livello. La parola in basso cambia con un piccolo rimbalzo, e a caraffa piena le onde si calmano e l’indice fa un salto.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`RIDE`	script.js	`1`	Quanto scroll serve per riempire: 2 è il doppio.
`FULL_AT`	script.js	`0.9`	A che punto della pagina l’acqua arriva in cima (da 0 a 1).
`WAVES`	script.js	`1`	Quanto ondeggia la superficie da sola.
`SLOSH`	script.js	`1`	Quanto sciaborda l’acqua se si scorre in fretta.
`TILT`	script.js	`1`	Quanto la superficie si inclina verso il puntatore.
`BUBBLES`	script.js	`12`	Quante bollicine salgono nell’acqua.

Provali nel Playground

Quando usarla

Per l’apertura del sito di un laboratorio di vetro, di un’acqua minerale, di un bar o di una spa: una frase che si riempie mentre si legge, scorrendo.

Sul telefono

La stessa animazione con le misure adattate: il disegno si stringe sulla larghezza e sull’altezza della pagina, la nota in alto a destra si nasconde e la goccia cade dove si tocca.

Con il movimento ridotto

Niente si muove e lo scroll non è ammorbidito: la frase è già piena d’acqua, il pelo è fermo, niente bollicine né gocce, e la pagina compare in dissolvenza.

Trappole

La maschera vuole le stesse lettere del contorno, con lo stesso carattere: si aspetta document.fonts.ready prima di cominciare, se no l’acqua esce dalle lettere per un attimo.
Lo sciabordio va su una molla e non direttamente sulla velocità: preso così trema a ogni rotella del mouse.
Le bollicine nascono solo sotto il pelo: nate sopra, comparivano fuori dall’acqua per un fotogramma.

Librerie

GSAP 3.15.0, ScrollTrigger 3.15.0, Lenis 1.3.26, Fraunces (font variabile) 5.3.0, Archivo (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 6,9 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.

Collaudo

Provata il 24 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.