Il menu sotto il foglio
Menu, 3D, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il menu a ventaglio di carta
Il menu di una sala da tè come un ventaglio giapponese di carta e bambù, in 3D: chiuso è la stecca di lacca nera con Menu in oro e una nappa di seta appesa al perno. Premuto, le stecche si aprono a raggiera una dopo l’altra, ognuna sulla sua molla, la carta a pieghe si tende fra loro e le ferma, e il ventaglio dondola un attimo come appena aperto. Ogni coppia di pieghe è una voce, stampata sulla carta dipinta (un ramo di susino, una luna in foglia d’oro, le onde in basso). Al passaggio le pieghe della voce si sollevano e il nome si accende; scelta, si abbassano e le stecche si richiudono.
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 paper fan menu</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/zen-old-mincho@5.3.0/500.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/zen-old-mincho@5.3.0/700.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the paper fan menu, for a tea house: the closed fan, its lacquered guard and silk tassel, is the Menu button.
Pressed, the sticks spread round the rivet one after another, the pleated paper pulls taut between them and
every pair of pleats carries a section, printed on the painted leaf. The fan is drawn in 3D on a canvas: the
sticks, the pleats folded back and forth, the painting mapped onto every facet, the light on each fold -->
<div class="fan" data-fan>
<canvas class="fan__canvas" aria-hidden="true" data-canvas></canvas>
<button class="fan__btn" type="button" aria-expanded="false" aria-controls="fan-menu" data-btn data-autoclic>
<span class="sr" data-name>Open the menu</span>
</button>
<!-- the sections: real links, one for each pair of pleats (the canvas prints them on the paper) -->
<nav class="fan__nav" id="fan-menu" aria-label="Main" data-nav inert>
<ul>
<li><a href="#teas" data-item>Teas</a></li>
<li><a href="#sweets" data-item>Sweets</a></li>
<li><a href="#ceremony" data-item>Ceremony</a></li>
<li><a href="#classes" data-item>Classes</a></li>
<li><a href="#shop" data-item>Shop</a></li>
<li><a href="#visit" data-item>Visit</a></li>
</ul>
</nav>
<p class="sr" aria-live="polite" data-live></p>
</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.
29 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 ventaglio di carta» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco un ventaglio chiuso, appena inclinato a destra: davanti la stecca di lacca nera con due fiori di susino e la parola Menu in oro, dietro si vede di taglio la pila della carta piegata, in basso il perno d’ottone con una nappa di seta vermiglia che dondola. Col mouse sopra, la stecca davanti si scosta di qualche grado e scopre le prime pieghe dipinte. Premuto, le stecche si aprono a raggiera una dopo l’altra, dalla stecca davanti verso quella dietro; la carta fra loro si tende fino a stare piatta e le ferma, poi si rilassa nelle sue pieghe, mentre il ventaglio gira verso di te; aperto, dondola un attimo sul perno e la nappa oscilla. La carta è dipinta: in alto un ramo di susino a inchiostro con i fiori bianchi e rosa e una luna in foglia d’oro, in basso le onde seigaiha in indaco sotto un bordo d’oro, qua e là scaglie d’oro e il sigillo rosso della casa. Le pieghe a monte prendono la luce da in alto a sinistra, quelle a valle stanno in ombra, e il dipinto si piega con la carta. Su ogni coppia di pieghe c’è una voce, scritta lungo l’arco: Teas, Sweets, Ceremony, Classes, Shop, Visit. Al passaggio le pieghe della voce si sollevano dal ventaglio con la loro ombra e il nome diventa vermiglio con un alone d’oro; premuta, la voce si abbassa, le stecche si richiudono dall’ultima alla prima e la stecca davanti arriva per ultima; la voce scelta resta in grassetto. Il perno del ventaglio aperto lo richiude, come Esc e un clic fuori. Da tastiera le frecce passano da una voce all’altra, con un contorno intorno alle sue pieghe, Invio sceglie.
Come funziona
Un ventaglio in 3D su un canvas
Il ventaglio è un modello vero: tredici stecche che girano intorno al perno, le due di lacca fuori e le undici di bambù dentro, e la carta divisa in ventiquattro faccette da pieghe che partono tutte dal perno. Ogni fotogramma lo script calcola i punti in tre dimensioni, li fa dondolare, inclinare indietro (TILT) e girare, e li proietta in prospettiva; le faccette si ordinano per profondità e si dipingono dal fondo in avanti, fra le stecche dietro e la stecca davanti.
La carta è rigida fra le pieghe
Ogni faccetta, piatta, ha al perno sempre lo stesso angolo b. Due stecche vicine sono distanti g: la piega fra loro sta dove le due faccette tengono la loro larghezza, cioè rientra all’indietro di un angolo e con cos e = cos b / cos(g / 2). Così le pieghe si fanno profonde quando il ventaglio si chiude e diventano piatte quando la carta è tesa; TAUT dice quanto restano piegate a ventaglio aperto.
Le stecche su molle, fermate dalla carta
Ogni stecca ha la sua molla (SPRING) verso il suo posto, che le arriva un attimo dopo la precedente (STAGGER). Dopo ogni passo un vincolo come nella fisica a posizioni impedisce a due stecche di allontanarsi più di quanto la carta è larga, e di passarsi attraverso: la stecca davanti, la prima a partire, si tira dietro le altre con la carta tesa e il rimbalzo si spegne sulla carta. Appena il ventaglio è aperto, una molla poco smorzata sulla rotazione intera lo fa dondolare (ROCK).
Il dipinto steso sulle faccette
La carta è dipinta una volta sola, distesa, su un canvas a parte: la carta con le fibre, le onde seigaiha, la luna in foglia d’oro, il ramo di susino a pennellate, i fiori, le scaglie, il sigillo e le voci, lettera per lettera lungo l’arco. Ogni faccetta si disegna in sei triangoli: per ognuno lo script calcola la trasformazione affine che porta il triangolo del dipinto disteso sul triangolo dello schermo, ritaglia un pelo più largo (niente fessure) e ci incolla il dipinto. Poi un velo chiaro o scuro, dalla normale della faccetta, fa la luce delle pieghe.
La voce che si accende e la nappa
Al passaggio le pieghe della voce scivolano fuori lungo le loro pieghe e verso chi guarda (LIFT), con un’ombra morbida sotto, e sopra le loro faccette si posa un secondo dipinto con i nomi in vermiglio e un alone d’oro, in dissolvenza. La nappa è una catena verlet appesa al perno, a passi uguali di 1/240 di secondo così non prende energia dai fotogrammi irregolari; l’apertura e la chiusura le danno un colpo. Quando niente si muove il canvas non si ridisegna.
Tastiera e accessibilità
Il ventaglio è un button con aria-expanded e aria-controls, steso lungo il ventaglio chiuso (girato con lui) e, aperto, sopra il perno. Le voci sono link veri in un nav, inert finché è chiuso, che il canvas stampa sulla carta: le frecce, Home e End passano dall’una all’altra con un contorno sulle pieghe, Invio sceglie, Esc chiude e il fuoco torna al ventaglio; un’area aria-live legge la voce scelta. Il tocco su una voce la solleva e, lasciata lì, la sceglie.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
OPEN_ANGLE | script.js | 156 | Quanto si apre il ventaglio, in gradi. |
TAUT | script.js | 0.93 | Quanto è tesa la carta a ventaglio aperto: 1 è piatta, meno lascia pieghe più profonde. |
SPRING | script.js | [95, 0.55] | La molla di ogni stecca: rigidità e smorzamento (1 = nessun rimbalzo). |
STAGGER | script.js | 0.055 | I secondi fra una stecca che parte e la successiva. |
ROCK | script.js | 4 | Quanto dondola il ventaglio appena aperto, in gradi. |
TILT | script.js | 12 | Quanto è inclinato all’indietro il ventaglio aperto, in gradi. |
LIFT | script.js | 16 | Quanto si sollevano dal ventaglio le pieghe di una voce sotto il puntatore, in unità del disegno. |
PEEK | script.js | 9 | Quanto si scosta la stecca davanti col puntatore sul ventaglio chiuso, in gradi. |
Quando usarla
Per il menu di un sito con un carattere artigianale e orientale: una sala da tè, un ristorante giapponese, una pasticceria di wagashi, un ryokan, un negozio di carta, un festival di primavera. Sei voci brevi, una per coppia di pieghe; con parole lunghe le scritte si stringono.
Sul telefono
Tutto il disegno si scala sulla larghezza dello schermo (a 390 pixel il riquadro è di 358) e il ventaglio aperto ci sta senza sforare; il dipinto si ridipinge alla nuova misura. Il tocco su una voce la solleva come il mouse sopra, e lasciandola lì la sceglie; il perno e un tocco fuori lo richiudono.
Con il movimento ridotto
Niente stecche che corrono, giri né dondolii: il ventaglio sparisce in dissolvenza e ricompare già aperto, o già chiuso, la nappa pende ferma e la voce sotto il puntatore si accende senza sollevarsi.
Trappole
- Con le pieghe messe in avanti, verso chi guarda, il ventaglio chiuso aveva la carta davanti alla stecca di lacca: le pieghe rientrano all’indietro e la stecca davanti copre tutta la pila.
- Un dipinto incollato triangolo per triangolo lasciava fessure sottili lungo le diagonali: ogni triangolo si ritaglia tre quarti di pixel più largo del suo, e copia solo il rettangolo del dipinto che gli serve.
- La nappa, una catena verlet, non si fermava mai: i passi lunghi quanto il fotogramma, uno diverso dall’altro, le davano energia a ogni fotogramma e il canvas si ridisegnava per sempre. Ora fa passi uguali di 1/240 di secondo, lo smorzamento dipende dal tempo e non dal numero di passi, e conta come si è mossa dal fotogramma prima.
- Il primo giro faceva aprire tutto in un terzo di secondo e non si vedevano le stecche partire una dopo l’altra: la molla è più morbida e le partenze più distanti, così la stecca davanti si tira dietro la carta tesa e le altre arrivano dopo.
- Il canvas usa il carattere senza che nessun elemento lo chieda, e il sigillo un ideogramma che sta in un altro pezzo del carattere: si caricano a mano con document.fonts.load (anche col testo dell’ideogramma) e poi la carta si ridipinge.
- Cambiare il grassetto della voce scelta subito, col ventaglio ancora aperto, faceva saltare la scritta: la carta si ridipinge quando il ventaglio è chiuso.
Librerie
GSAP 3.15.0, Zen Old Mincho 5.3.0.
Compressi con gzip, i tre file della demo pesano 18 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 17 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.
