Il menu a fluido

Menu, WebGL, Fisica, TransizioniWebGL, GSAPImpegnativaPeso compresso: Demo 12 KBGSAP 28 KBGratisScarica lo zip

Un menu a tutto riquadro che esce dal suo pulsante come inchiostro versato nell’acqua: premendo Menu, un fluido indaco e arancio si sprigiona dal pulsante in getti che si arricciano in volute e vortici, riempie tutto il riquadro, e le voci affiorano solo quando il fluido le ha coperte. Il puntatore mescola l’inchiostro; chiudendo, il fluido viene risucchiato a spirale verso il pulsante. Un fluido vero, risolto in WebGL, non un cerchio che cresce.

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 fluid menu</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/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the fluid menu: a frame with its Menu button. Pressed, indigo and orange ink pours out of the button like ink
         in water, curling into eddies until it fills the frame, and the links surface where it covers them -->
    <div class="panel" data-panel>
      <canvas class="panel__ink" aria-hidden="true" data-ink></canvas>
      <!-- with reduced motion, or without WebGL, the ink is a still wash that fades in -->
      <div class="panel__still" aria-hidden="true" data-still></div>

      <button class="toggle" type="button" aria-expanded="false" aria-controls="fluid-menu" data-toggle data-autoclic>
        <span class="toggle__words" aria-hidden="true"><span class="toggle__word" data-word>Menu</span></span>
        <span class="toggle__icon" aria-hidden="true"><i></i><i></i></span>
        <span class="sr" data-name>Open the menu</span>
      </button>

      <nav class="menu" id="fluid-menu" aria-label="Main" data-menu inert>
        <ul class="menu__list">
          <li><a class="item" href="#" data-item><span class="item__word">Work</span><svg class="item__arrow" viewBox="0 0 40 24" aria-hidden="true"><path d="M2 12h34M26 3l10 9-10 9"/></svg></a></li>
          <li><a class="item" href="#" data-item><span class="item__word">Services</span><svg class="item__arrow" viewBox="0 0 40 24" aria-hidden="true"><path d="M2 12h34M26 3l10 9-10 9"/></svg></a></li>
          <li><a class="item" href="#" data-item><span class="item__word">Studio</span><svg class="item__arrow" viewBox="0 0 40 24" aria-hidden="true"><path d="M2 12h34M26 3l10 9-10 9"/></svg></a></li>
          <li><a class="item" href="#" data-item><span class="item__word">Journal</span><svg class="item__arrow" viewBox="0 0 40 24" aria-hidden="true"><path d="M2 12h34M26 3l10 9-10 9"/></svg></a></li>
          <li><a class="item" href="#" data-item><span class="item__word">Contact</span><svg class="item__arrow" viewBox="0 0 40 24" aria-hidden="true"><path d="M2 12h34M26 3l10 9-10 9"/></svg></a></li>
        </ul>
        <div class="menu__foot" data-item>
          <a href="#">Start a project</a>
          <a href="#">Careers</a>
          <a href="#">Newsletter</a>
        </div>
      </nav>
    </div>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.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 «Il menu a fluido» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco un riquadro bianco dagli angoli tondi, col filo grigio chiaro del bordo, e in alto a destra il pulsante nero Menu con due righe. Premendo, dal pulsante escono getti d’inchiostro indaco, con ogni tanto uno arancio, che oscillano e si arricciano: le teste dei getti si avvolgono a fungo, le correnti si piegano in volute, il fronte del fluido avanza frastagliato a bande più chiare e più scure, e l’arancio resta in vene e lingue dentro l’indaco. Il fluido si allarga e si addensa finché ha riempito tutto il riquadro, angoli compresi. Le voci grandi in un serif morbido (Work, Services, Studio, Journal, Contact) e la riga sotto (Start a project, Careers, Newsletter) affiorano in bianco una per una, ciascuna solo quando l’inchiostro l’ha coperta tutta. Intanto il pulsante diventa bianco, le sue righe si incrociano in una X e Menu diventa Close. Muovendo il mouse sul menu aperto l’inchiostro si mescola dietro al puntatore, con un filo d’arancio se il gesto è veloce; la voce indicata prende peso, si ammorbidisce e le scivola accanto una freccia. Premendo Close, o una voce, o Esc, le voci se ne vanno e l’inchiostro si ritira girando a spirale verso il pulsante, col bordo frastagliato che si stringe, finché il riquadro torna bianco.

Come funziona

Fluidi stabili sulla GPU

Velocità, pressione e inchiostro sono trame a mezza precisione (RGBA16F) di WebGL2, la velocità su una griglia di GRID celle sul lato corto e l’inchiostro su una più fine. Ogni passo è una fila di disegni su un triangolo che copre tutto: il vortice e la sua spinta (vorticity confinement, forza SWIRL), la divergenza, ITERATIONS passi di Jacobi per la pressione, che parte da quella del passo prima, la sottrazione del suo gradiente, e il trasporto semi-lagrangiano di velocità e inchiostro, che prendono ogni cella da dove il flusso la porta indietro nel tempo.

Il pulsante come sorgente

Aprendo, JETS getti partono dal centro del pulsante a ogni passo: macchie gaussiane di velocità e d’inchiostro, puntate verso il riquadro e fatte oscillare con due seni, e il primo getto diventa arancio a raffiche, così l’arancio resta una vena sua e non tinge tutto. In più, solo per l’inchiostro, una sorgente al pulsante lo spinge fuori in tutte le direzioni, più forte in alcune che cambiano col tempo, e dove c’è già l’inchiostro si addensa: è questo che garantisce di arrivare negli angoli.

Il tempo della simulazione

La sorgente, l’addensamento e i getti non seguono l’orologio ma il tempo della simulazione, un passo alla volta (limitato a 1/30 di secondo): su un telefono lento che fa meno passi il fluido non resta indietro rispetto alla sua regia. La sorgente non scende sotto un terzo finché l’inchiostro non ha raggiunto ogni punto del riquadro; poi lascia andare.

Le voci affiorano dove c’è l’inchiostro

Ogni fotogramma l’inchiostro viene ridotto a un’immagine di 48 per 32 pixel che dice quanto è coperto ogni punto, e lo script la legge ogni quattro fotogrammi. Per ogni voce guarda tre punti lungo la parola, prende il meno coperto e ne fa l’opacità e un piccolo salire: una voce compare solo quando l’inchiostro è dietro tutta la parola, e niente testo bianco finisce mai sul bianco.

Il colore, la luce e il ritiro

Lo schermo dà all’inchiostro sottile un indaco vivo e a quello spesso un indaco profondo, e mette l’arancio dove supera una soglia della sua parte; la pendenza dell’inchiostro prende un filo di luce, così le pieghe dei vortici si leggono. Chiudendo, un campo che gira e tira verso il pulsante trasporta l’inchiostro a spirale, e oltre un bordo frastagliato che si stringe fino al pulsante l’inchiostro viene cancellato in fretta; infine le trame si svuotano e i fotogrammi si fermano. Anche a menu aperto, quando il mouse non si muove da qualche secondo, il fluido si ferma e non si ridisegna più.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`OPEN`	script.js	`1.7`	I secondi che l’inchiostro impiega a riempire il riquadro.
`CLOSE`	script.js	`1.15`	I secondi in cui viene risucchiato nel pulsante.
`SWIRL`	script.js	`16`	Quanto il fluido si arriccia in vortici (0 = liscio, senza vortici).
`JETS`	script.js	`3`	Quanti getti d’inchiostro escono dal pulsante a ogni passo mentre si apre.
`STIR`	script.js	`1`	Quanto il puntatore mescola il menu aperto.
`ORANGE`	script.js	`0.34`	Quanto dell’inchiostro è arancio, da 0 a 1.
`GRID`	script.js	`112`	Le celle della simulazione sul lato corto del riquadro (meno è più veloce, al telefono un quarto in meno).
`ITERATIONS`	script.js	`18`	I passi che cercano la pressione: di più, un fluido più vero.

Provali nel Playground

Quando usarla

Per il sito di uno studio creativo, di un’agenzia, di un fotografo o di un marchio che vuole un ingresso memorabile al menu. Il fluido chiede un attimo di attenzione e una scheda grafica decente: per un sito di tutti i giorni meglio un menu più sobrio.

Sul telefono

Il riquadro prende la larghezza dello schermo e diventa alto; la griglia ha un quarto di celle in meno e il canvas non supera circa un milione di pixel, così il fluido resta fluido. Il dito apre e chiude; le voci sono grandi e si toccano bene.

Con il movimento ridotto

Niente fluido: un velo fermo d’inchiostro indaco e arancio, fatto di gradienti, compare in dissolvenza e le voci compaiono dopo di lui; chiudendo, tutto sparisce in dissolvenza. Lo stesso succede dove WebGL2 non c’è.

Trappole

La regia dell’apertura fatta con GSAP, a tempo d’orologio, su un computer lento finiva prima che il fluido si fosse mosso: l’inchiostro si fermava a metà riquadro. Ora segue il tempo della simulazione.
La sola sorgente al pulsante non arrivava negli angoli lontani: la spinta resta accesa (almeno un terzo) finché l’immagine della copertura non dice che ogni punto è pieno.
I getti d’arancio e d’indaco dallo stesso punto si mescolavano in un bordeaux fangoso: l’arancio esce da un getto suo, a raffiche, e lo schermo lo mostra solo oltre una soglia della sua parte.
L’inchiostro accumulato al pulsante diventava enorme e tutto il riquadro finiva indaco scurissimo e piatto: oltre un certo spessore si satura, e chiaro e scuro restano bande leggibili.
Chiudendo, l’inchiostro preso da fuori dal bordo (CLAMP_TO_EDGE) faceva righe verticali: da fuori non entra niente.
Una voce che compariva quando era coperta a metà mostrava lettere bianche sul bianco: si guardano tre punti lungo la parola e conta il meno coperto.
Leggere i pixel con un fence asincrono non tornava mai in un browser senza scheda grafica e le voci restavano invisibili: l’immagine è minuscola e si legge in modo sincrono ogni quattro fotogrammi.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 5 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Fatto

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.