Il menu a onda di peso
Menu, Testo, Hover, Fisica
NuovaGratis
Tutti i componenti
Il menu del filo a piombo
Nello stile minimal: il menu di uno studio di architettura. Premendo Menu il piombo disegnato nel pulsante cade su un filo sottile, accanto alle voci si disegna la verticale tratteggiata, e il piombo oscilla e si ferma con la punta vermiglia sulla pagina corrente. Poi segue il puntatore di voce in voce: il filo si allunga e si accorcia su una molla e il piombo dondola come un pendolo vero, e la voce vicino alla punta prende peso e larghezza.
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 plumb line menu</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the menu of an architecture studio. At rest a small Menu button with a plumb bob drawn in it. Pressed, the bob
drops out of the button on its thread, a dashed true vertical is drawn beside the links, and the bob swings and
settles on the page you are on. It follows the pointer (the finger, the arrow keys) from link to link, its
thread lengthening on a spring and swinging when it moves; the link next to its tip takes weight and width -->
<div class="plumb" data-frame>
<button class="toggle" type="button" aria-expanded="false" aria-controls="plumb-menu" data-toggle data-autoclic>
<span class="toggle__icon" aria-hidden="true">
<svg viewBox="0 0 20 24" data-icon>
<line x1="10" y1="1" x2="10" y2="8" class="toggle__thread"/>
<g data-icon-bob>
<rect x="7.5" y="7.5" width="5" height="2.5" rx="0.6" class="bob__cap"/>
<path d="M5 10.5 H15 L10 21 Z" class="bob__body"/>
<path d="M8.1 17.2 H11.9 L10 21 Z" class="bob__tip"/>
</g>
</svg>
</span>
<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>Open the menu</span>
</button>
<nav class="menu" id="plumb-menu" aria-label="Main" data-menu inert>
<ul class="menu__list" data-list>
<li class="menu__item"><a class="row" href="#projects" aria-current="page" data-row><span class="row__mask"><span class="row__word" data-word>Projects</span></span><span class="row__note" data-note>Built and drawn</span></a></li>
<li class="menu__item"><a class="row" href="#studio" data-row><span class="row__mask"><span class="row__word" data-word>Studio</span></span><span class="row__note" data-note>Nine people, one room</span></a></li>
<li class="menu__item"><a class="row" href="#method" data-row><span class="row__mask"><span class="row__word" data-word>Method</span></span><span class="row__note" data-note>Survey, plan, build</span></a></li>
<li class="menu__item"><a class="row" href="#writing" data-row><span class="row__mask"><span class="row__word" data-word>Writing</span></span><span class="row__note" data-note>Notes from site</span></a></li>
<li class="menu__item"><a class="row" href="#contact" data-row><span class="row__mask"><span class="row__word" data-word>Contact</span></span><span class="row__note" data-note>Visit the studio</span></a></li>
</ul>
</nav>
<!-- the thread, the bob, the true vertical and the level marks, drawn by the script -->
<svg class="line" aria-hidden="true" data-svg>
<line class="line__guide" data-guide/>
<g data-marks></g>
<path class="line__thread" data-thread/>
<g data-bob>
<rect x="-4" y="0" width="8" height="4" rx="1" class="bob__cap"/>
<path d="M-7.5 4.6 H7.5 L0 22 Z" class="bob__body"/>
<path d="M-2.9 15.3 H2.9 L0 22 Z" class="bob__tip"/>
<line x1="-7.5" y1="4.6" x2="7.5" y2="4.6" class="bob__rim"/>
</g>
</svg>
</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.
28 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 «Il menu del filo a piombo» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco c'è solo un pulsante a pillola con un filo sottile: dentro, un piccolo piombo disegnato a filo, con la punta vermiglia, e la parola Menu. Premuto, Menu sale e al suo posto arriva Close, il piombo del pulsante sparisce e quello vero cade da sotto il pulsante su un filo nero sottilissimo, dondolando. Intanto accanto alle voci si disegna dall'alto la verticale, una riga grigia tratteggiata, con una piccola tacca all'altezza di ogni voce, e le cinque voci salgono una dopo l'altra dalle loro maschere: Projects, Studio, Method, Writing e Contact. Il piombo si allunga fino alla pagina corrente, va un poco oltre, torna su e si ferma oscillando, con la punta vermiglia proprio accanto a Projects, che è vermiglio, pesante e largo, con la sua nota piccola a destra. Muovendo il mouse sulle voci il filo si allunga o si accorcia su una molla e il piombo segue: partendo dondola, e dondola di più quando sale e meno quando scende, come un pendolo il cui filo cambia lunghezza; il filo si piega appena contro l'oscillazione. La voce vicina alla punta si riempie, si allarga e mostra la sua nota, quelle intorno un po' meno, e la tacca della verticale si allunga verso la parola e si scurisce quando il piombo è dritto. Muovendo il mouse di lato il piombo prende una piccola spinta. Cliccando una voce il piombo fa un piccolo tuffo, la voce diventa vermiglia, e il menu si chiude: le voci scendono dall'ultima, la verticale si ritira, il filo riavvolge il piombo nel pulsante, che dondola un attimo sul suo filo, e Close torna Menu.
Come funziona
Un pendolo che cambia lunghezza
Il piombo è un pendolo: l'angolo theta segue theta'' = -(g/L) sin theta - 0,7 · (L'/L) theta' - smorzamento · theta', con g di 2200 pixel al secondo quadrato. Il secondo termine è quello vero dei pendoli col filo che si allunga e si accorcia: accorciando il filo l'oscillazione cresce, allungandolo si calma, quindi il piombo dondola di più quando sale verso una voce in alto. Il passo di tempo è di 1/240 di secondo, mai più di 1/30 per fotogramma, e il ciclo si ferma quando tutto è fermo.
Il filo su una molla
La lunghezza del filo va verso quella che mette la punta del piombo all'altezza della voce, con una molla (SPRING): partendo dal pulsante il piombo cade, va un poco oltre la voce e torna. A ogni cambio di voce l'angolo riceve una spinta proporzionale a quante voci ha saltato (SWING), e il mouse che si muove di lato aggiunge una spinta piccola.
Il disegno
Filo, piombo, verticale e tacche sono un SVG sopra le voci, ridisegnato a ogni fotogramma in pixel misurati dalla pagina (e rimisurati al resize). Il filo è una curva quadratica col punto di controllo spostato di lato contro la velocità dell'angolo, così si piega appena come se l'aria lo trattenesse; il piombo ruota con l'angolo, così la punta continua la direzione del filo.
Le voci sentono la punta
Per ogni voce si misura la distanza fra la punta del piombo e il centro della voce, in righe; con una curva morbida su REACH righe la voce prende peso (WEIGHT) e larghezza (WIDTH) di Mona Sans, la nota sale in opacità e la tacca della verticale si allunga verso la parola, scurendosi quando il piombo è quasi dritto.
Apertura, chiusura, tastiera
Una timeline GSAP: Menu e Close si scambiano, la verticale si disegna, le voci salgono dalle maschere a 50 millesimi l'una dall'altra, e il piombo cade per conto suo. Alla chiusura il filo torna a zero sulla stessa molla e il piombo del pulsante oscilla su un elastic.out. Il pulsante ha aria-expanded; chiuso il menu è inert; le frecce spostano il piombo, Esc chiude, Tab gira fra pulsante e voci. Il clic dell'anteprima (detail 0) fa un giro intero.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SPRING | script.js | [170, 19] | La molla del filo quando si allunga e si accorcia: quanto è rigida e quanto è frenata. |
SWING | script.js | 0.22 | Quanto dondola il piombo passando da una voce all'altra (0, resta fermo). |
DAMP | script.js | 1.5 | Quanto presto si spegne l'oscillazione. |
WEIGHT | script.js | [300, 720] | Il peso di una voce lontana dal piombo e di quella sulla sua punta. |
WIDTH | script.js | [88, 116] | La larghezza di una voce lontana dal piombo e di quella sulla sua punta. |
REACH | script.js | 1.3 | Per quante voci si sente il piombo. |
STAGGER | script.js | 0.05 | I secondi fra una voce e l'altra all'apertura e alla chiusura. |
Quando usarla
Per il menu di chi costruisce, misura o progetta: uno studio di architettura o di ingegneria, un'impresa, un geometra, un falegname, un museo della scienza. Sta bene con quattro, cinque o sei voci corte su un fondo chiaro; la nota di ogni voce dice in poche parole cosa c'è dietro.
Sul telefono
Il riquadro è largo quanto lo schermo meno 32 pixel e alto al massimo l'86% dell'altezza; le voci si rimpiccioliscono con la larghezza e sotto i 360 pixel le note non ci sono. Il piombo segue il dito che scorre sulle voci, come il mouse, e un tocco sceglie la voce.
Con il movimento ridotto
Niente cadute né oscillazioni: il piombo compare già fermo accanto alla voce, la verticale e le voci compaiono in dissolvenza, e il piombo passa da una voce all'altra di colpo. Le voci prendono comunque peso e larghezza accanto alla punta.
Trappole
- Il pendolo col filo che cambia lunghezza va in tilt quando il filo è quasi zero (g/L diventa enorme): nei conti la lunghezza non scende mai sotto i 36 pixel, e l'angolo non va mai oltre lo spazio che c'è a sinistra del filo (al massimo 0,32 radianti).
- Il piombo ruotato con rotate() positivo puntava dalla parte sbagliata: con l'angolo verso destra la punta deve continuare il filo verso destra, quindi la rotazione è -theta.
- Durante le timeline di apertura e chiusura il ciclo dei fotogrammi deve continuare anche se il piombo è fermo, perché la verticale e la trasparenza cambiano: gira finché la timeline non finisce.
Librerie
GSAP 3.15.0, Mona Sans (font variabile, con gli assi della larghezza e del peso) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,4 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 23 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.
