Il menu sotto il foglio
Menu, 3D, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il menu a tovagliolo
Il menu di una trattoria come un tovagliolo di lino: premendo Menu il pulsante sale e si allunga in un’asta, e da dietro cade un tovagliolo piegato a fisarmonica, che si apre col suo peso, frusta l’orlo, ondeggia e si posa. È stoffa simulata davvero, e le voci ci stanno sopra e si piegano con lei.
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 napkin 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/fraunces@5.3.0/full-italic.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the menu of a trattoria as a linen napkin. At rest a dark Menu button with a folded pleat in it. Pressed, the
button rises and stretches into a rail, and a napkin folded like an accordion drops out from behind it: the
pleats fall open under their own weight, the cloth swings and settles, and the links ride on the linen -->
<div class="table" data-frame>
<canvas class="cloth" aria-hidden="true" data-cloth></canvas>
<nav class="napkin" id="napkin-menu" aria-label="Main" data-menu inert>
<ul class="napkin__list">
<li><a class="dish" href="#lunch" data-link>Lunch</a></li>
<li><a class="dish" href="#dinner" aria-current="page" data-link>Dinner</a></li>
<li><a class="dish" href="#wine" data-link>Wine list</a></li>
<li><a class="dish" href="#private" data-link>Private dining</a></li>
<li><a class="dish" href="#book" data-link>Book a table</a></li>
</ul>
</nav>
<button class="rail" type="button" aria-expanded="false" aria-controls="napkin-menu" data-toggle data-autoclic>
<span class="rail__words" aria-hidden="true">
<span class="rail__word" data-word-open>Menu</span>
<span class="rail__word" data-word-close>Close</span>
</span>
<svg class="rail__pleat" viewBox="0 0 26 14" aria-hidden="true">
<polyline data-pleat points="2,7 6,2.5 10,11.5 14,2.5 18,11.5 22,2.5 24,7"/>
</svg>
<span class="sr" data-toggle-name>Open the menu</span>
</button>
</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.
24 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 a tovagliolo» da Animorio e adattala al mio sitoCosa fa
Su una pagina bianca c’è un pulsante color noce con «Menu» e una piccola piega a zigzag. Premuto, il pulsante sale in cima, si allunga in un’asta lucida e la piega si distende in una riga; «Menu» lascia il posto a «Close». Da dietro l’asta esce un tovagliolo di lino crema, piegato a fisarmonica con le due righe rosse dell’orlo che fanno zigzag: le pieghe si aprono col loro peso, l’orlo arriva in fondo con una frustata e torna su, la stoffa ondeggia e si posa con qualche piega morbida verso il basso. Sopra ci sono le voci, Lunch, Dinner (la pagina in cui sei, in corsivo rosso), Wine list, Private dining e Book a table, in un carattere graziato: si spostano, girano e si schiacciano con la piega su cui stanno. Passando col puntatore la stoffa si muove come sotto una mano, e la voce indicata ingrassa, diventa rossa e affonda un poco nel lino. Scegliendone una il tovagliolo dà uno strattone e si raccoglie dal basso come una tenda a pacchetto, piega dopo piega, sparisce dietro l’asta e il pulsante torna al centro. Si chiude anche con Esc, col pulsante o premendo fuori.
Come funziona
Una stoffa di punti
Il tovagliolo è una griglia di 17 per 25 punti in tre dimensioni, mossi con l’integrazione di Verlet (la velocità è la differenza fra la posizione di adesso e quella di prima) a passi fissi di 1/120 di secondo, con la gravità DROP e l’aria AIR che frena. La fila in alto è inchiodata all’asta. Otto volte a ogni passo si rimettono a posto i vincoli: le distanze lungo i fili, quelle sulle diagonali e quelle fra un punto e quello dopo il vicino, che fanno la rigidità del lino (STIFF).
Piegato a fisarmonica
All’apertura i punti partono già piegati: ogni fila sta poco sotto la precedente e avanti o indietro di quanto serve perché il filo resti lungo uguale, così le pieghe (PLEATS) stanno schiacciate una sull’altra senza tirare. I vincoli lunghi si accendono piano mentre la stoffa cade, e quelli spingono soltanto: aprono la piega, non la tirano mai.
Il lino stirato
Un lino stirato ricorda di essere piatto: dopo la caduta una molla leggera riporta ogni punto verso una forma quasi piana, con qualche piega morbida che cresce verso l’orlo. Il puntatore che passa spinge indietro i punti vicini in proporzione alla sua velocità (BREEZE), la molla poi li riporta: la stoffa si muove sotto la mano e torna da sola.
Disegnata a triangoli
Ogni quadretto sono due triangoli: la loro normale dice quanto ricevono della luce che arriva da sinistra in alto, e il colore va dal lino in ombra al lino in piena luce (o al rovescio, se il triangolo mostra il dietro). Si dipingono dal più lontano al più vicino, ognuno un capello più grande per non lasciare fessure; sopra la trama del lino in multiply, le due righe rosse dell’orlo disegnate sulla griglia deformata, e sotto un’ombra morbida sulla pagina.
Le voci sulla stoffa
Ogni voce è un link vero. A ogni fotogramma si calcola la matrice della stoffa sotto il suo centro, cioè dove va il punto e come si stirano i due fili (la derivata della griglia proiettata), e la si scrive nel transform: la parola si sposta, gira e si schiaccia con la piega su cui sta, scurisce dove la stoffa è in ombra e sparisce dove la stoffa mostra il dietro.
Si raccoglie dal basso
Alla chiusura la fisica si ferma e ogni punto viene messo al suo posto: una linea di piega sale dall’orlo all’asta in LIFT secondi, la stoffa sotto di lei sta nelle sue pieghe, quella sopra pende ancora; alla fine il pacchetto scivola dietro l’asta, che lo nasconde perché il disegno è tagliato alla sua altezza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
DROP | script.js | 1500 | La gravità: quanto forte cade il tovagliolo, in pixel al secondo quadrato. |
STIFF | script.js | 0.9 | Quanto il lino tiene la forma: 0,4 morbido come seta, 1 rigido come tela. |
AIR | script.js | 1.5 | Quanto l’aria frena la stoffa: di più e si posa prima. |
PLEATS | script.js | 6 | Quante pieghe ha il tovagliolo quando esce. |
BREEZE | script.js | 1 | Quanto il puntatore smuove il lino passandoci sopra. |
RISE | script.js | 0.55 | I secondi del pulsante che sale e si allunga nell’asta. |
LIFT | script.js | 0.8 | I secondi del tovagliolo che si raccoglie. |
Quando usarla
Per il sito di un ristorante, di una trattoria, di un bistrot o del ristorante di un albergo, con poche voci: il tovagliolo dice subito dove sei. Va bene in cima alla pagina, con lo spazio sotto per farlo cadere; con più di sei voci la stoffa diventa lunga.
Sul telefono
Il tovagliolo si stringe alla larghezza dello schermo e cade allo stesso modo; il tocco apre, chiude e sceglie, e il dito che passa sulla stoffa la smuove come il mouse.
Con il movimento ridotto
Niente caduta e niente stoffa che ondeggia: il pulsante va subito in cima, il tovagliolo compare già steso in dissolvenza e alla chiusura scompare allo stesso modo. Le voci cambiano colore e peso sotto il puntatore come sempre.
Trappole
- I vincoli che tengono rigida la stoffa (un punto con quello dopo il vicino) con il tovagliolo piegato sono lunghi un decimo del dovuto: accesi subito, facevano esplodere le pieghe verso l’alto, sopra l’asta. Ora si accendono piano mentre cade e spingono soltanto.
- Senza una molla verso la forma piana le pieghe restavano incastrate una sull’altra e il tovagliolo si fermava stropicciato di traverso, con le voci illeggibili: la stoffa simulata non sa di essere stata stirata.
- La chiusura con la fisica (l’orlo tirato su e il resto lasciato fare) stropicciava la stoffa in una palla a faccette: ora la chiusura mette ogni punto al suo posto, come una tenda a pacchetto.
- L’ombra sulla pagina usa il trucco della forma disegnata lontano con l’ombra spostata indietro: il filtro blur del canvas su Safari non c’è. Lo spostamento si dà in pixel del dispositivo, e la forma va costruita dopo il translate, non prima.
- I link stanno chiusi a (0, 0) senza trasformazione: finché il tovagliolo non c’è vanno tenuti trasparenti, altrimenti per un istante una parola compare nell’angolo.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
