Le storie a cubo
Storie, 3D, Transizioni
NuovaGratis
Tutti i componenti
Il menu a origami
Un menu piegato in un quadratino di washi indaco: premuto, si solleva e si spiega in 3D faccia dopo faccia, prima di lato e poi in giù a fisarmonica, con luce e ombra diverse su ogni faccia e le voci stampate che compaiono man mano che le facce si distendono. Chiudendo si ripiega nel quadratino.
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 origami menu</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/shippori-mincho@5.3.0/500.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/zen-kaku-gothic-new@5.3.0/400.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/zen-kaku-gothic-new@5.3.0/700.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the menu: a little square of folded paper. Pressed, it unfolds in 3D one face after another, first sideways and
then down like an accordion, into a sheet with the menu printed on it. The box is as big as the open sheet, and
the folded square sits in its top right corner, where the paper hangs from. The script builds the paper from
the menu below, which lies over the open sheet: its links are the ones you press and reach with the Tab key -->
<div class="origami" data-origami>
<span class="origami__shadow" data-shadow aria-hidden="true"></span>
<div class="origami__stage" data-stage aria-hidden="true" inert></div>
<button class="origami__toggle" type="button" aria-expanded="false" aria-controls="menu" data-toggle data-autoclic>
<span class="sr" data-name>Open the menu</span>
<svg class="origami__glyph" viewBox="0 0 24 24" aria-hidden="true"><line x1="6" y1="9" x2="18" y2="9" data-line/><line x1="6" y1="15" x2="18" y2="15" data-line/></svg>
</button>
<nav class="sheet origami__nav" id="menu" aria-label="Main" data-nav inert>
<p class="sheet__head"><span class="seal" aria-hidden="true">紙</span>Menu</p>
<ul class="sheet__list">
<li><a class="leaf" href="#" data-leaf><svg class="leaf__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7.5 12 4l8 3.5-8 3.5z"/><path d="M4 12l8 3.5 8-3.5"/><path d="M4 16.5 12 20l8-3.5"/></svg><span class="leaf__name">Papers</span><span class="leaf__note">Washi, chiyogami and kraft</span></a></li>
<li><a class="leaf" href="#" data-leaf><svg class="leaf__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 13.5 12 4l8.5 9.5L12 20z"/><path d="M12 4v16M3.5 13.5h17"/></svg><span class="leaf__name">Workshops</span><span class="leaf__note">Fold with us on Saturdays</span></a></li>
<li><a class="leaf" href="#" data-leaf><svg class="leaf__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6.5C10 5 7 4.5 4 5v13c3-.5 6 0 8 1.5 2-1.5 5-2 8-1.5V5c-3-.5-6 0-8 1.5z"/><path d="M12 6.5v13"/></svg><span class="leaf__name">Journal</span><span class="leaf__note">Notes on paper and patience</span></a></li>
<li><a class="leaf" href="#" data-leaf><svg class="leaf__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9h16v11H4zM3 6h18v3H3zM12 6v14"/><path d="M12 6c-1.5-3-5-3-5-1s3.5 1 5 1c1.5 0 5 1 5-1s-3.5-2-5 1z"/></svg><span class="leaf__name">Gift sets</span><span class="leaf__note">Wrapped in furoshiki cloth</span></a></li>
<li><a class="leaf" href="#" data-leaf><svg class="leaf__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0 1 13 0c0 4.8-6.5 11-6.5 11z"/><circle cx="12" cy="10" r="2.3"/></svg><span class="leaf__name">Visit</span><span class="leaf__note">Our studio in Kyoto</span></a></li>
</ul>
</nav>
</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 origami» da Animorio e adattala al mio sitoCosa fa
Su una pagina bianca c’è solo un quadratino di carta indaco con le onde stampate e due linee chiare: è il menu piegato, al centro della pagina. Col mouse sopra, il primo strato del quadratino si solleva un poco all’angolo, come per essere preso; premuto, si stringe appena. Allora il quadratino si solleva dalla pagina (la sua ombra si allarga e sfuma), cresce inclinandosi verso chi guarda, e la metà sinistra si apre di lato girando sulla piega in mezzo; poi la striscia si spiega in giù a fisarmonica, una faccia dopo l’altra, ognuna col suo piccolo rimbalzo da carta, mentre tutto scivola finché il foglio aperto sta al centro della pagina. Ogni faccia prende la luce a modo suo mentre gira: più chiara verso la luce, più scura quando si volta via; l’esterno indaco e l’interno chiaro di washi con le fibre si alternano. Sull’interno è stampato il menu (in alto un sigillo rosso e Menu, poi Papers, Workshops, Journal, Gift sets e Visit, ognuno con un’icona in un cerchio e una riga), e le voci di ogni faccia salgono e si accendono man mano che quella faccia si distende. Alla fine il foglio si raddrizza e resta disteso, con le pieghe ancora visibili; le due linee del pulsante sono diventate una X. Sotto il puntatore una voce si accende su un fondo di carta più scura e la sua icona gira e si riempie; la voce scelta ha l’icona nel rosso del sigillo. Premendo la X, una voce o Esc, o premendo fuori dal foglio, il foglio si ripiega all’indietro fino al quadratino.
Come funziona
Una catena di cerniere
Il foglio è una griglia di 2 per ROWS facce, ognuna un elemento posato con una matrix3d calcolata dallo script. La matrice di una faccia è quella della faccia a cui è attaccata, per una rotazione attorno alla piega che condividono: una riga è attaccata alla riga sopra (rotateX attorno al suo bordo alto), la faccia sinistra a quella destra della stessa riga (rotateY attorno alla piega in mezzo). Così una faccia porta con sé tutte quelle ancora piegate su di lei, come la carta vera.
Una fisarmonica che si spiega
Ogni piega fra due righe ha un numero da 1 (piegata) a 0 (aperta), e piega a turno in avanti e indietro: chiuse, le righe stanno impilate come una fisarmonica. Le righe girate nel pacchetto chiuso fanno girare la loro metà sinistra nel verso opposto, così tutte le metà sinistre si aprono insieme come un solo strato. Una timeline di GSAP solleva il foglio, apre la piega in mezzo e poi le pieghe fra le righe una dopo l’altra, con back.out per il rimbalzo della carta; chiudendo, la stessa timeline va all’indietro.
Lo spessore della carta
Le pieghe stanno mezzo spessore di carta (THICK, 2 pixel) fuori dal foglio, dalla parte verso cui piegano, e la piega in mezzo sta davanti a tutta la pila: così gli strati piegati restano davvero uno sopra l’altro nell’ordine giusto, invece di stare sullo stesso piano e sfarfallare l’uno attraverso l’altro.
Luce e ombra su ogni faccia
Ogni faccia ha due lati con backface-visibility: hidden, l’interno stampato e l’esterno indaco a onde. La normale della faccia è la terza colonna della sua matrice; il suo prodotto con la direzione della luce dà quanto schiarire o scurire ogni lato (un velo chiaro o scuro sopra), per LIGHT. Una faccia distesa davanti a chi guarda non ha velo: il menu aperto ha i suoi colori veri.
Il menu stampato e quello vero
Sull’interno di ogni faccia c’è una copia del menu intero, spostata in modo che la faccia ne mostri il suo pezzo. Quanto è aperta la strada fra una faccia e l’angolo (il prodotto delle sue pieghe) diventa --show, e le voci di quella faccia salgono e si accendono con lui. A foglio disteso la carta lascia il posto al menu vero, nella stessa posizione: i suoi link sono quelli che si premono e che il tasto Tab raggiunge.
Al centro, chiuso e aperto
Il riquadro è grande quanto il foglio aperto e il quadratino sta nel suo angolo in alto a destra: per averlo al centro della pagina, da chiuso il riquadro è spostato di mezzo foglio a sinistra e in giù, e la timeline lo riporta al suo posto mentre il foglio si apre. Le facce in giù sono almeno ROWS, e di più se l’ultima voce del menu, misurata alla larghezza del foglio, non ci starebbe.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
OPEN | script.js | 1.6 | I secondi di tutto lo spiegarsi (ripiegarsi è un po’ più veloce). |
CELL | script.js | 140 | Il lato di una faccia, in pixel: il foglio è largo due facce. |
ROWS | script.js | 3 | Quante facce in giù ha il foglio, almeno: se le voci non ci stanno, il foglio ne prende di più. |
TILT | script.js | [10, -14] | Di quanti gradi il foglio si inclina all’indietro e gira mentre si spiega. |
LIGHT | script.js | 0.7 | Quanto sono forti la luce e l’ombra sulle facce. |
PEEK | script.js | 26 | Di quanti gradi si solleva lo strato di sopra col puntatore sul quadratino piegato. |
EASE | script.js | back.out(1.25) | Come si posa ogni faccia aprendosi: un piccolo rimbalzo, come la carta. |
Quando usarla
Per il sito di chi lavora la carta, una cartoleria, uno studio di grafica, un ristorante giapponese, una rivista: dove il menu può essere un piccolo oggetto. Con cinque o sei voci; per un menu lungo il foglio diventa troppo alto.
Sul telefono
Le facce si stringono perché il foglio aperto stia nello schermo meno 32 pixel, e il foglio si ricostruisce a ogni cambio di larghezza tenendo il punto in cui era. Il tocco apre e chiude; senza puntatore lo strato di sopra non si solleva.
Con il movimento ridotto
Niente pieghe in movimento: il quadratino e il foglio aperto si scambiano in dissolvenza, le linee diventano una X di colpo e lo strato di sopra non si solleva.
Trappole
- Con le pieghe tutte sullo stesso piano gli strati piegati sfarfallavano l’uno attraverso l’altro: ogni piega va spostata di mezzo spessore verso il lato in cui piega, e la piega in mezzo davanti a tutta la pila.
- Le metà sinistre delle righe girate nel pacchetto chiuso devono girare nel verso opposto: con lo stesso verso, metà delle facce si apriva dietro il foglio invece che di lato.
- Un filtro SVG per le fibre della carta, ridisegnato su otto facce che girano in 3D, bloccava il navigatore senza GPU: le fibre si dipingono una volta su un canvas e si posano come immagine.
- Ricostruita col foglio aperto (al cambio di larghezza), la timeline prendeva come punto di partenza il foglio già aperto e non si ripiegava più: si costruisce sempre dal foglio chiuso, la si fa girare in silenzio fino in fondo e poi la si riporta dov’era.
- Le facce stampate sono copie del menu: tenute nel giro del tasto Tab e degli screen reader, ogni voce ci sarebbe nove volte. Il palco delle facce è aria-hidden e inert, e il menu vero sta sopra, visibile solo a foglio disteso.
Librerie
GSAP 3.15.0, Shippori Mincho 5.3.0, Zen Kaku Gothic New 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,8 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.
