Il menu a onda di peso

Menu, Testo, Hover, FisicaGSAP, Solo CSSImpegnativaPeso compresso: Demo 7,7 KBGSAP 28 KBGratisScarica lo zip

Un menu a tutto schermo con le voci grandi in un carattere variabile: ogni lettera prende peso e larghezza dalla distanza dal puntatore, così un'onda di lettere nere e larghe lo segue fra le parole, con una molla per lettera che la fa ondeggiare. La voce sotto il puntatore si inclina; al telefono l'onda segue il dito.

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 variable weight menu</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body class="is-open">
  <!-- the button stays above the menu: it closes the menu and opens it again -->
  <button class="toggle" type="button" aria-expanded="true" aria-controls="menu" data-toggle>
    <span class="toggle__words" aria-hidden="true">
      <span class="toggle__word" data-word-open>Menu</span>
      <span class="toggle__word" data-word-close>Close</span>
    </span>
    <span class="sr" data-toggle-name>Close the menu</span>
    <span class="toggle__icon" aria-hidden="true"><i data-line></i><i data-line></i></span>
  </button>

  <!-- the menu: big words in a variable typeface; every letter takes its weight and width from how far the pointer
       is, so a wave of heavy, wide letters follows it through the words -->
  <nav class="menu" id="menu" aria-label="Main" data-menu>
    <ul class="menu__list" data-list>
      <li class="menu__row"><a class="menu__item" href="#" data-item><span class="menu__mask"><span class="menu__word" data-word>Work</span></span><span class="menu__note">38 projects since 2016</span></a></li>
      <li class="menu__row"><a class="menu__item" href="#" data-item><span class="menu__mask"><span class="menu__word" data-word>Studio</span></span><span class="menu__note">Eleven people, two cities</span></a></li>
      <li class="menu__row"><a class="menu__item" href="#" data-item><span class="menu__mask"><span class="menu__word" data-word>Services</span></span><span class="menu__note">Brand, motion and web</span></a></li>
      <li class="menu__row"><a class="menu__item" href="#" data-item><span class="menu__mask"><span class="menu__word" data-word>Journal</span></span><span class="menu__note">Notes from the desk</span></a></li>
      <li class="menu__row"><a class="menu__item" href="#" data-item><span class="menu__mask"><span class="menu__word" data-word>Contact</span></span><span class="menu__note">Start a project</span></a></li>
    </ul>
  </nav>

  <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.

31 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 onda di peso» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una carta color osso, il menu aperto: cinque voci enormi, Work, Studio, Services, Journal e Contact, separate da righe sottili, in un carattere stretto e sottile color grigio caldo, e in alto a destra il pulsante Close. Appena la pagina si apre le parole salgono dalle loro maschere e un'onda le attraversa da sinistra in alto a destra in basso. Col puntatore sopra, le lettere vicine diventano nere, pesanti e larghe, quelle lontane restano sottili e strette: l'onda segue il puntatore in tutte le direzioni, anche fra una riga e l'altra, e se il puntatore corre resta indietro, sorpassa e ondeggia. La parola sotto il puntatore si inclina in avanti dal piede, di più se il puntatore corre verso destra, e accanto a lei scivola una nota arancio con una freccia (38 projects since 2016, Eleven people, two cities…). Quando nessuno punta, dopo un momento un'onda lenta vaga da sola fra le parole. Close chiude il menu: le parole escono in alto, la carta si arrotola verso l'alto e sotto resta la pagina nera col solo pulsante, ora chiaro, che dice Menu; Menu lo riapre con la carta che scende e una nuova onda. Al telefono l'onda segue il dito finché tocca.

Come funziona

Un carattere con due assi

Anybody, da Fontsource nella versione wdth, ha nello stesso file l'asse del peso (da 100 a 900) e quello della larghezza (da 50 a 150). Ogni parola è divisa in una lettera per span; ognuna riceve a ogni fotogramma font-variation-settings: 'wght' e 'wdth' calcolati fra WEIGHT e WIDTH, e una variabile --v che col color-mix la scurisce dal grigio al nero. Una copia della parola intera resta per chi legge con lo screen reader.

L'onda a ogni fotogramma

Per ogni lettera si prende il centro nel layout (sommando gli offset fino alla lista, così né la salita delle parole né l'inclinazione la spostano) e la distanza dal puntatore; il valore voluto è una campana di Gauss, exp(−d²/R²), con R uguale a REACH volte l'altezza delle lettere. Oltre le estremità di una parola il puntatore conta come se fosse sull'ultima lettera, così anche lo spazio vuoto della riga tira la fine della parola.

Una molla per lettera

La lettera non prende subito il valore voluto: lo insegue su una molla (rigidità e smorzamento in SPRING), integrata a mano sul ticker di GSAP col passo limitato a 1/30 di secondo. Smorzata poco, quando il puntatore corre l'onda resta indietro, sorpassa e si assesta ondeggiando. Lo stile di una lettera si riscrive solo se peso, larghezza o colore sono cambiati.

L'inclinazione e la nota

La parola sotto il puntatore si inclina con skewX dal piede, su una molla a parte: l'angolo è una parte fissa di LEAN più una parte che segue la velocità del puntatore in orizzontale, misurata fra due movimenti e smorzata. Accanto, la nota arancio entra con una transizione CSS quando la riga riceve la classe is-on.

Le mani, i tasti e il pilota

Mouse e dito guidano l'onda; il dito solo finché tocca, e la lista ha touch-action: none perché il trascinamento non diventi uno scorrimento. Coi tasti, un puntatore fantasma scivola sulla parola raggiunta. All'apertura e quando nessuno punta lo guida un tween, prima in diagonale una volta, poi su una curva lenta di Lissajous fra le parole. Esc chiude il menu, Close e Menu lo aprono e chiudono con un clip-path sulla carta.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WEIGHT`	script.js	`[240, 900]`	Il peso di una lettera lontana dal puntatore e di una proprio sotto (da 100 a 900).
`WIDTH`	script.js	`[78, 150]`	La larghezza di una lettera lontana dal puntatore e di una proprio sotto (da 50 a 150).
`REACH`	script.js	`1.7`	Quanto arriva lontano l'onda intorno al puntatore, in volte l'altezza delle lettere.
`SPRING`	script.js	`[210, 15]`	La molla di ogni lettera: quanto è rigida e quanto è frenata (meno freno, più ondeggia).
`LEAN`	script.js	`9`	Di quanti gradi si inclina la parola sotto il puntatore.
`WANDER`	script.js	`true`	Un'onda lenta vaga da sola fra le parole quando nessuno punta.
`OPEN`	script.js	`0.9`	I secondi che la carta impiega a scendere quando il menu si apre.

Provali nel Playground

Quando usarla

Per il menu a tutto schermo di uno studio, di un'agenzia, di un fotografo o di una rivista: poche voci brevi, dove la tipografia è la protagonista. Con voci lunghe o più di sei o sette righe le parole non stanno più grandi abbastanza perché l'onda si veda.

Sul telefono

Le parole sono grandi quanto lo schermo permette e la nota accanto sparisce. L'onda segue il dito finché tocca la lista (che non scorre sotto il dito) e si spegne piano quando si alza; dopo un momento riparte l'onda che vaga da sola. Il tocco su una voce la apre come un clic.

Con il movimento ridotto

Niente onda, niente molle e niente inclinazione: la parola sotto il puntatore, o raggiunta coi tasti, diventa nera e pesante in una breve dissolvenza senza allargarsi, quindi niente si sposta; la nota compare senza scivolare. Il menu si apre e si chiude con una dissolvenza.

Trappole

Il pacchetto index.css di Anybody ha solo l'asse del peso: per la larghezza serve wdth.css, che ha i due assi nello stesso file.
Misurate con getBoundingClientRect, le lettere si spostano con l'onda stessa (più larghe spingono le vicine) e con l'inclinazione: l'onda inseguiva i propri effetti e tremava. Le posizioni si prendono dagli offset, che non vedono le trasformazioni.
Quando GSAP mette un transform sulla parola che sale, la parola diventa l'offsetParent delle sue lettere: gli offset vanno sommati risalendo fino alla lista, o tutte le lettere sembrano stare in cima alla lista e l'onda al telefono non le trovava.
L'inclinazione e la salita lavorano su due elementi diversi (lo span interno e la parola): sullo stesso, il ticker e GSAP si cancellavano il transform a vicenda.
Un'onda lontana dalle parole non dava niente: nello spazio vuoto a destra delle voci corte il puntatore conta come sull'ultima lettera, altrimenti metà della riga sembrava morta.
Il pilota delle anteprime manda pointerleave che risalgono la pagina: l'onda si spegne solo se a lasciare è la pagina intera, non una lettera.

Librerie

GSAP 3.15.0, Anybody (font variabile, assi wght e wdth) 5.3.0.

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

Collaudo

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