Il menu a onda di peso
Menu, Testo, Hover, Fisica
NuovaGratis
Tutti i componenti
La nav con la barca a vela
La barra in alto di una scuola di vela, con una striscia d'acqua lungo il fondo e una barchetta a vela ferma sotto la pagina in cui si è. Scegliendo un'altra voce la barca vira, gonfia la vela e corre là, e la sua scia rotola lungo la striscia, rimbalza sui bordi e la fa dondolare quando si è fermata; le lettere delle voci cavalcano le onde che passano. L'acqua è un'equazione delle onde vera, calcolata cella per cella. Al telefono le voci si aprono in un pannello di ormeggi, uno per voce, e la barca esce da uno ed entra nell'altro.
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>The sailboat nav</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the top bar of a sailing school. Along the bottom of the bar runs a strip of water, worked out as a real wave
equation, and a small sailboat lies under the page you are on. Choosing another link the boat turns, fills its
sail and runs there, leaving a wake that rolls along the strip, bounces off the ends and rocks it when it has
stopped; the words ride the waves that pass under them. Pointing at a link drops a ripple under it. On a phone
the links open in a panel of moorings, one strip of water each, and the boat sails out of one and into another -->
<header class="bar" data-bar>
<canvas class="sea" aria-hidden="true" data-sea></canvas>
<a class="brand" href="#" aria-label="Halyard Sailing School, home">
<svg class="brand__mark" viewBox="0 0 22 24" aria-hidden="true">
<path class="brand__pole" d="M4 2v20"/>
<path class="brand__flag" d="M5 3.2l13 4.6L5 12.4z"/>
</svg>
<span class="brand__name">Halyard</span>
</a>
<nav class="nav" id="halyard-links" aria-label="Main" data-nav>
<canvas class="nav__sea" aria-hidden="true" data-panel-sea></canvas>
<ul class="list" data-list>
<li class="item"><a class="link" href="#" aria-current="page" data-link><span class="link__word" data-word>Lessons</span></a></li>
<li class="item"><a class="link" href="#" data-link data-autoclic><span class="link__word" data-word>Fleet</span></a></li>
<li class="item"><a class="link" href="#" data-link data-autoclic><span class="link__word" data-word>Regattas</span></a></li>
<li class="item"><a class="link" href="#" data-link><span class="link__word" data-word>Clubhouse</span></a></li>
<li class="item"><a class="link" href="#" data-link data-autoclic><span class="link__word" data-word>Contact</span></a></li>
</ul>
</nav>
<a class="cta" href="#" data-cta><span class="cta__bg" aria-hidden="true" data-cta-bg></span><span class="cta__label">Book a lesson</span></a>
<button class="toggle" type="button" aria-expanded="false" aria-controls="halyard-links" data-toggle>
<svg class="toggle__icon" viewBox="0 0 24 24" aria-hidden="true">
<path class="toggle__line" d="M4 9 Q7 7 10 9 T16 9 T22 9" data-line/>
<path class="toggle__line" d="M4 15 Q7 13 10 15 T16 15 T22 15" data-line/>
</svg>
<span class="toggle__label" data-toggle-label>Menu</span>
</button>
</header>
</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.
30 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 «La nav con la barca a vela» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una barra blu notte alta 64 pixel con gli angoli tondi: a sinistra una bandierina rossa e il nome Halyard, al centro cinque voci, Lessons, Fleet, Regattas, Clubhouse e Contact, a destra il pulsante giallo Book a lesson. Lungo tutto il fondo della barra corre una striscia d'acqua alta 10 pixel, azzurra in superficie e più scura sotto, con una riga di luce sul pelo dell'acqua. Sotto la voce corrente galleggia una barchetta a vela: scafo bianco con la riga rossa, randa color panna, fiocco color sabbia e un guidone rosso in cima all'albero. All'arrivo la barca entra dal bordo sinistro e va a fermarsi sotto la pagina corrente. Scegliendo un'altra voce la barca, se deve tornare indietro, vira: la sagoma si stringe e si riapre girata. Poi prende velocità, la vela si gonfia, il guidone si stende all'indietro e la prua si alza; arrivando rallenta, la prua si abbassa, va un poco oltre e torna al suo posto. Lo scafo che corre schiaccia l'acqua: dietro e davanti alla barca si alzano onde e avvallamenti che continuano a correre lungo la striscia, rimbalzano sui bordi della barra e tornano indietro, e quando passano sotto la barca ferma la sollevano e la fanno beccheggiare. Anche le lettere delle voci cavalcano l'acqua: si alzano sulle creste e si inclinano con la pendenza dell'onda che passa sotto di loro. Col mouse su una voce cade una goccia sotto la parola: un'increspatura si allarga da lì, solleva prima le sue lettere e poi quelle delle vicine. Il nome fa sventolare la bandierina, il pulsante si gonfia con un rimbalzo e la sua scritta si allarga. Quando l'acqua è ferma e la barca anche, non si ridisegna niente.
Come funziona
L'acqua è un'equazione delle onde
La striscia è una fila di celle ogni 3 pixel, ognuna con la sua altezza e la sua velocità. A ogni passo ogni cella è tirata verso le vicine (c² per la differenza seconda delle altezze, diviso dx²: le onde corrono a WAVE_SPEED pixel al secondo), frenata da un attrito proporzionale a CALM, da un po' di viscosità sulle velocità che tiene le creste lisce e da una molla debolissima che riporta il livello. Ai due capi la cella si specchia nella vicina, quindi le onde rimbalzano sui bordi della barra. I passi sono piccoli quanto serve perché l'onda non salti più di 0,7 celle per passo (condizione di Courant), e mai più di 1/30 di secondo per fotogramma.
La scia: un'ondina di Ricker sotto lo scafo
Finché la barca si muove, le celle intorno a lei ricevono a ogni passo una spinta in giù a forma di ondina di Ricker, (1 − d²)·e^(−d²/2), proporzionale alla velocità della barca e a WAKE: un avvallamento sotto lo scafo e l'acqua spostata ammucchiata a prua e a poppa. L'integrale della forma è zero, quindi la striscia non perde livello per quanta strada faccia la barca (con una semplice fossa sotto lo scafo l'acqua dietro di lei si svuotava). Il resto lo fa l'equazione: la barca corre più veloce delle onde e se le lascia dietro.
La barca su una molla col freno
La posizione della barca è una molla verso il suo ormeggio, con lo smorzamento 0,74 e la pulsazione presa da SAIL_TIME, ma la spinta della molla è limitata (2600/SAIL_TIME² pixel al secondo quadrato): da lontano la barca non scatta, prende velocità, scivola e arriva andando appena oltre. La direzione è un'altra molla, da 1 a −1: quando passa per lo zero la sagoma disegnata con scale(face, 1) si stringe e si riapre girata, come una barca vista di fianco che vira.
La barca legge l'acqua
A ogni passo la barca legge l'altezza dell'acqua a prua, a poppa e al centro: l'altezza media è la quota di una molla stretta (beccheggio e sussulto con un po' di inerzia), la pendenza fra prua e poppa più l'accelerazione (la prua si alza quando prende velocità e si abbassa quando frena) è l'angolo di un'altra molla. La vela si gonfia con la velocità (la balumina è una curva quadratica che si allarga) e il guidone si stende all'indietro. L'acqua davanti allo scafo si ridisegna sopra di lui con lo stesso gradiente della striscia, così la barca ci sta dentro.
Le lettere sull'acqua
Ogni parola è tagliata in lettere (il link tiene il suo nome in aria-label); di ogni lettera si misura una volta il centro con offsetLeft, che non vede le trasformazioni. A ogni fotogramma ogni lettera prende translateY(−altezza·BOB) e una rotazione dalla pendenza dell'acqua sotto di lei, e lo stile si scrive solo se cambia. Il mouse su una voce aggiunge alle velocità delle celle sotto la parola una campana: è la goccia, che si apre in due onde verso i due lati.
Il pannello degli ormeggi al telefono
Sotto i 760 pixel le voci finiscono in un pannello sotto la barra, e ogni riga ha la sua striscia d'acqua, con la sua equazione. Il pulsante Menu apre il pannello con un clip-path che scende, le righe entrano una dopo l'altra, l'acqua di ogni riga sale con un back.out (quindi trabocca un poco e torna) e la barca entra dal bordo destro fino all'ormeggio, accanto alla parola. Scegliendo un'altra riga la barca esce a destra dal suo ormeggio e rientra da destra in quello nuovo. Le onde del pulsante si appiattiscono e ruotano in una croce, Esc chiude e riporta il fuoco sul pulsante, le frecce scorrono le voci.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SAIL_TIME | script.js | 1.1 | Più o meno quanti secondi ci mette la barca ad andare sotto una voce nuova. |
WAKE | script.js | 1 | Quanto è grande la scia che la barca si lascia dietro (0, nessuna). |
WAVE_SPEED | script.js | 230 | Quanto corrono le onde lungo l'acqua, in pixel al secondo. |
CALM | script.js | 0.9 | Quanto in fretta l'acqua torna ferma: più alto, prima. |
RIPPLE | script.js | 1 | Quanto è grande l'increspatura che cade sotto una voce puntata (0, nessuna). |
BOB | script.js | 0.7 | Quanto le lettere delle voci cavalcano le onde che passano sotto di loro (0, ferme). |
BOAT_SIZE | script.js | 1.2 | Quanto è grande la barca. |
Quando usarla
Per la testata di chi ha a che fare col mare e con l'acqua: una scuola di vela, un circolo nautico, un noleggio di barche o di kayak, un albergo o delle case vacanza sul mare, uno stabilimento balneare, un sito di regate o di gite in barca. Sta bene con poche voci corte su una barra scura; i colori dell'acqua, della barca e della barra si cambiano nelle variabili.
Sul telefono
Sotto i 760 pixel la barra è alta 60 pixel, larga quanto lo schermo meno 32 (358 a 390), il pulsante giallo sparisce e a destra compare il pulsante Menu con due onde disegnate. Toccato, sotto la barra scende un pannello dello stesso blu con le cinque voci in colonna, ognuna con la sua striscia d'acqua: le righe entrano una dopo l'altra, l'acqua sale in ogni riga traboccando appena, e la barca entra da destra e si ferma accanto alla voce corrente. Toccando un'altra voce la barca esce dal suo ormeggio verso destra e rientra da destra in quello nuovo; il dito giù su una voce fa cadere la goccia, come il mouse. Le onde del pulsante diventano una croce e la scritta Close; Esc chiude.
Con il movimento ridotto
L'acqua resta piatta e ferma, le lettere non si muovono e non cadono gocce: scegliendo un'altra voce la barca sfuma dove era e ricompare con una dissolvenza sotto la voce nuova, già ferma. Al telefono il pannello compare e sparisce con una dissolvenza, senza scendere, e la barca è già al suo ormeggio. I pulsanti non si schiacciano e non si allargano.
Trappole
- La prima scia era una semplice fossa sotto lo scafo: a ogni viaggio la striscia perdeva acqua e dietro la barca restava un avvallamento lungo mezza barra, che la molla del livello impiegava secondi a riempire. Ora la spinta ha la forma di un'ondina di Ricker, che somma a zero: quanto scende sotto lo scafo sale a prua e a poppa.
- Con la voce corrente in grassetto la parola si allargava quando diventava corrente, ma i centri delle lettere erano stati misurati prima: le lettere leggevano l'acqua nel posto sbagliato e la barca si fermava fuori centro. La voce corrente ora cambia solo colore.
- Con la barca alta 23 pixel la cima dell'albero, sollevata da una cresta, toccava le gambe della g di Regattas: l'acqua è alta 10 pixel, le parole stanno 2 pixel più su e il sollevamento della barca disegnata è limitato a 2,6 pixel.
- Con WAVE_SPEED in fondo alla corsa l'equazione esplodeva (l'onda saltava più di una cella per passo): i passi ora si dividono finché l'onda fa al massimo 0,7 celle per passo.
- L'acqua ridisegnata davanti allo scafo, più trasparente della striscia, faceva un rettangolo più chiaro intorno alla barca: ora usa lo stesso gradiente della striscia, appena più chiaro solo in superficie.
- Il guidone fermo pendeva tutto in basso e si leggeva come un pallino rosso in cima all'albero: anche a barca ferma resta un triangolo steso, che si allunga col vento della corsa.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile, con gli assi del peso e della larghezza) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 13 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.
