Il vaso al sole
Card, 3D, Fisica, Hover, Transizioni
NuovaGratis
Tutti i componenti
Il menu a frecce di legno
Il menu di un festival nel bosco come un palo con le frecce di legno dipinte: chiuso è la tavola di quercia in cima al palo, con Menu bruciato nel legno. Premuta, la tavola gira sul palo e dietro dice Close, il palo scivola giù, rimbalza e fa ondeggiare il cartello, e ogni freccia, quando il palo la raggiunge, viene lanciata fuori a sinistra o a destra e oscilla sulla sua molla, passando l'oscillazione alle altre. Il puntatore che sfiora una freccia la spinge indietro e la fa dondolare, con le lettere che saltellano; quella scelta si ribalta sul suo lato lungo.
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 signpost menu</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/shantell-sans@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the menu of a summer festival in the woods as a wooden signpost. Closed, the button is the oak board nailed to
the top of the post. Pressed, the board spins round on the post and reads Close, the post slides down out of
it, and as its end goes past each arrow the arrow is flung out round the post, left and right in turn, and
wobbles on its spring; the wobble runs up and down the post into the other arrows. The pointer brushing an
arrow pushes it back and lets it swing; a chosen arrow flips over on its long side. The boards are flat
elements turned in 3D by the script, with their thickness made of thin slices -->
<nav class="sign" aria-label="Festival" data-sign>
<div class="sign__frame" data-frame>
<div class="sign__scene" data-scene>
<span class="pole" aria-hidden="true" data-pole><span class="pole__wood"></span></span>
<svg class="cap" viewBox="0 0 34 14" aria-hidden="true"><path d="M3 13 L17 1 L31 13 Z" fill="var(--cap)"/><path d="M17 1 L31 13 L17 13 Z" fill="var(--cap-dark)"/><rect x="1" y="12" width="32" height="2" rx="1" fill="var(--cap-dark)"/></svg>
<button class="board" type="button" aria-expanded="false" aria-controls="sign-menu" data-board data-autoclic>
<span class="board__body" aria-hidden="true" data-board-body>
<span class="board__face board__face--front"><span class="board__word">Menu</span><span class="shade" data-shade></span></span>
<span class="board__face board__face--back"><span class="board__word">Close</span><span class="shade" data-shade></span></span>
</span>
<span class="sr" data-name>Open the menu</span>
</button>
<ul class="arms" id="sign-menu" data-arms inert>
<li><a class="arm" href="#line-up" style="--paint: #d4532f; --ink: #fff6e6" data-arm><span class="arm__label">Line-up</span></a></li>
<li><a class="arm" href="#tickets" style="--paint: #e9a823; --ink: #2b1a0b" data-arm><span class="arm__label">Tickets</span></a></li>
<li><a class="arm" href="#camping" style="--paint: #2f6b4c; --ink: #fff6e6" data-arm><span class="arm__label">Camping</span></a></li>
<li><a class="arm" href="#food" style="--paint: #2a7896; --ink: #fff6e6" data-arm><span class="arm__label">Food & drink</span></a></li>
<li><a class="arm" href="#getting-here" style="--paint: #6d3f7c; --ink: #fff6e6" data-arm><span class="arm__label">Getting here</span></a></li>
</ul>
</div>
</div>
<p class="sr" aria-live="polite" data-live></p>
</nav>
</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.
39 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 frecce di legno» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco c'è la cima di un palo di legno con un cappello di ferro a punta, e appesa davanti una tavola di quercia chiara con Menu bruciato nel legno: è il pulsante. Al passaggio del puntatore la tavola scricchiola sul chiodo e le lettere saltellano. Premendola la tavola gira intorno al palo su una molla, mostra il suo spessore e si ferma sul retro, dove c'è scritto Close; intanto il palo scivola giù fuori dalla tavola con la punta in avanti, va un po' oltre, torna su e si ferma, e tutto il cartello ondeggia dall'alto. Quando la punta del palo passa davanti a una freccia, la freccia viene lanciata fuori intorno al palo, una a destra e una a sinistra: arriva di taglio, va oltre la sua posizione con la punta verso chi guarda, torna e oscilla sempre meno, e la sua oscillazione passa lungo il palo alle frecce vicine. Le frecce sono tavole dipinte (Line-up rosso, Tickets giallo, Camping verde, Food & drink azzurro, Getting here viola), con la venatura del legno che si vede sotto la vernice, una fascetta di ferro sul palo e la luce che cambia sulle facce mentre girano. Sfiorandone una col puntatore la si spinge indietro, tanto più forte quanto più veloce passa la mano, e lei dondola tornando al suo posto, con le lettere che saltellano. Quella su cui sei porta scritto You're here. Scegliendone una, si ribalta tutta sul suo lato lungo e spinge le vicine; poi le frecce si richiudono contro il palo dal basso, il palo risale e la tavola torna a dire Menu.
Come funziona
Tavole fatte di fette
Ogni tavola è un elemento con transform-style: preserve-3d e dentro cinque fette piatte: la faccia dipinta davanti a translateZ(3,5 unità), tre fette di legno nudo a -2,2, 0 e 2,2, e la faccia dietro girata. Di fronte si vede solo la faccia; quando la tavola gira, le fette in mezzo sporgono una dietro l'altra e fanno lo spessore. La forma a freccia è un clip-path uguale per tutte le fette; il retro delle frecce è girato di rotateX(180deg), così quando la freccia scelta si ribalta sul lato lungo la scritta dietro si legge dritta.
Il palo che esce
Il palo è una finestra con overflow: hidden, alta quanto dice lo script, con dentro tutto il legno del palo attaccato al fondo: allungando la finestra il legno scende fuori dalla tavola con la punta davanti, come un palo telescopico. La lunghezza è su una molla smorzata (POLE_SPRING) che va un po' oltre e torna; quando il palo arriva al fermo, l'oscillazione SWAY fa ondeggiare tutta la scena con rotateZ dall'alto, su una molla molto lenta e poco smorzata.
Frecce lanciate dal palo
Ogni freccia ha un angolo intorno al palo (90 gradi è ripiegata di taglio dietro al palo, 0 è fuori) e gira con rotateY intorno al bordo del palo, a sinistra o a destra (il segno cambia per le frecce di sinistra). Non c'è un ritardo fisso: a ogni fotogramma lo script guarda dov'è la punta del palo, e quando passa la metà di una freccia le dà la velocità FLING verso fuori. Così la cascata segue davvero il palo, anche se lo si richiude a metà.
Molle accoppiate lungo il palo
La molla di torsione di ogni freccia (ARM_SPRING) è poco smorzata, quindi la freccia va oltre e oscilla. In più ogni freccia sente lo scarto delle vicine dalla loro posizione (COUPLING): è un sistema di oscillatori accoppiati, e l'oscillazione corre su e giù per il palo. La fisica fa quattro piccoli passi per fotogramma, col passo limitato a 1/30 di secondo, e non ridisegna quello che non è cambiato.
Luce, spinta e lettere che saltano
La normale di ogni faccia si calcola dagli angoli di rotateY e rotateX, e la sua luce è il prodotto con una luce che viene dall'alto a sinistra (Lambert): un velo scuro sopra la faccia ne prende l'opacità. Il puntatore che entra in una freccia le dà una spinta indietro proporzionale alla sua velocità (BRUSH); col dito la spinta arriva al tocco. La velocità di ogni freccia guida l'asse BNCE di Shantell Sans, un carattere variabile con le lettere che saltellano su e giù.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
POLE_SPRING | script.js | [150, 0.42] | Il palo che scivola fuori: quanto forte tira verso la sua lunghezza, e quanto è smorzato (1 = nessun rimbalzo). |
ARM_SPRING | script.js | [210, 0.26] | Le molle di torsione delle frecce intorno al palo: rigidità e smorzamento. |
FLING | script.js | 620 | Quanto veloce viene lanciata fuori una freccia quando il palo la raggiunge, in gradi al secondo. |
COUPLING | script.js | 70 | Quanta dell'oscillazione di una freccia passa alle vicine attraverso il palo. |
BRUSH | script.js | 1 | Quanto forte il puntatore spinge una freccia che sfiora. |
SPIN | script.js | [130, 0.34] | Il giro della tavola da Menu a Close: rigidità e smorzamento. |
FOLD_STAGGER | script.js | 0.055 | I secondi fra una freccia che si richiude e la successiva, chiudendo. |
SWAY | script.js | 1.4 | Quanto ondeggia tutto il cartello quando il palo arriva in fondo, in gradi. |
Quando usarla
Per il menu di un sito che vive all'aperto: un festival, un campeggio, un parco, un rifugio, un percorso a piedi o in bici, una fattoria. Da tre a sei voci brevi (una dozzina di lettere al massimo), ognuna col suo colore; con di più il palo diventa troppo lungo per lo schermo.
Sul telefono
Tutto il disegno si scala sulla larghezza dello schermo: a 390 pixel una freccia è lunga circa 155 e il cartello aperto ci sta senza sforare. Il dito che tocca una freccia le dà la stessa spinta del puntatore che la sfiora, e il tocco la sceglie.
Con il movimento ridotto
Niente giri né oscillazioni: la tavola cambia faccia dietro una breve dissolvenza, e il palo con le frecce compare o sparisce già al suo posto, in dissolvenza. Le frecce non dondolano al passaggio e la scelta non le ribalta.
Trappole
- Con le frecce di sinistra girate di 180 gradi intorno al palo, finivano dietro al palo: ogni freccia ha la sua forma già rivolta dal suo lato, col perno sul bordo del palo, e gira con rotateY di segno opposto; così stanno tutte davanti al palo e si ripiegano tutte di taglio all'indietro.
- Accoppiando le molle di tutte le frecce, una freccia appena lanciata (lontanissima dal suo posto) tirava fuori le vicine ancora ripiegate prima che il palo le raggiungesse: l'accoppiamento vale solo fra frecce nello stesso stato, fuori o ripiegate.
- Il retro girato con rotateY(180deg) andava bene per i giri intorno al palo ma mostrava la scritta capovolta quando la freccia scelta si ribalta sul lato lungo: il retro è girato con rotateX(180deg), perché è quello il giro che lo mostra.
Librerie
GSAP 3.15.0, Shantell Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,7 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.
