Il menu a piani dell’albergo

Menu, SVG, Fisica, HoverGSAP, Solo CSSImpegnativaPeso compresso: Demo 9,5 KBGSAP 28 KBGratisScarica lo zip

Il menu di un piccolo albergo come l’albergo stesso, in assonometria, come lo spaccato di un architetto: i piani cadono uno sull’altro dalla spa al bar sul tetto, e puntandone uno i piani sopra si alzano sulle loro molle e lo aprono come un cassetto, con dentro la piscina, la reception, i tavoli, i letti.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The hotel floors menu</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the menu of a small hotel as its own building, drawn in isometric like an architect's exploded view: one
         slab for each floor, from the spa underground to the bar on the roof. Pointing at a floor, the floors above
         it lift on their springs and show what is inside; the floor you are on is the one left open -->
    <div class="hotel" data-frame>
      <button class="call" type="button" aria-expanded="false" aria-controls="hotel-menu" data-toggle data-autoclic>
        <svg class="call__icon" viewBox="0 0 24 24" aria-hidden="true">
          <path data-icon-floor d="M12 15.5 20 19.5 12 23.5 4 19.5Z"/>
          <path data-icon-floor d="M12 9.5 20 13.5 12 17.5 4 13.5Z"/>
          <path data-icon-floor d="M12 3.5 20 7.5 12 11.5 4 7.5Z"/>
        </svg>
        <span class="call__words" aria-hidden="true">
          <span class="call__word" data-word-open>Menu</span>
          <span class="call__word" data-word-close>Close</span>
        </span>
        <span class="sr" data-toggle-name>Open the menu</span>
      </button>

      <div class="card" id="hotel-menu" data-card inert>
        <svg class="building" viewBox="0 0 360 372" aria-hidden="true" data-building></svg>
        <nav class="floors" aria-label="Hotel">
          <ul class="floors__list">
            <li><a class="floor" href="#rooftop" data-floor="4"><span class="floor__name">Rooftop bar</span><span class="floor__note">Open until late</span></a></li>
            <li><a class="floor" href="#rooms" data-floor="3"><span class="floor__name">Rooms &amp; suites</span><span class="floor__note">Sea and garden views</span></a></li>
            <li><a class="floor" href="#restaurant" data-floor="2"><span class="floor__name">Restaurant</span><span class="floor__note">Breakfast to dinner</span></a></li>
            <li><a class="floor" href="#lobby" data-floor="1" aria-current="page"><span class="floor__name">Lobby</span><span class="floor__note">Check-in and lounge</span></a></li>
            <li><a class="floor" href="#spa" data-floor="0"><span class="floor__name">Spa</span><span class="floor__note">Pool and sauna</span></a></li>
          </ul>
        </nav>
      </div>
    </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.

31 valori da cambiare

Apri il Playground

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 piani dell’albergo» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina bianca c’è un pulsante blu petrolio con «Menu» e tre piccoli piani disegnati, che sotto il puntatore si staccano un poco. Premuto, il pulsante sale e sotto si apre una scheda color crema: i piani dell’albergo cadono dall’alto uno dopo l’altro, la spa sottoterra, la hall, il ristorante, le camere e il bar sul tetto, ognuno atterra sul precedente con un piccolo rimbalzo, e da ognuno parte una riga sottile verso il suo nome, con una frase sotto. Il piano in cui sei resta aperto: quelli sopra sono alzati, e dentro si vede la sua pianta disegnata a filo, con le luci accese e le righe blu, e accanto «You are here». Puntando un altro nome, o il piano stesso, i piani sopra di lui si alzano sulle loro molle e quelli che erano alzati scendono e si posano, con l’ombra che si scurisce mentre si avvicinano. Scegliendo un piano, quello si abbassa di un soffio come calpestato e il menu si chiude: i piani volano via dal tetto in giù e il pulsante torna al centro. Si chiude anche con Esc, col pulsante o premendo fuori.

Come funziona

Una lastra di tre facce

Ogni piano è un gruppo dell’svg con tre poligoni: il pavimento, il fianco in luce e quello in ombra, calcolati con l’assonometria isometrica (x e y del piano diventano (x − y)·cos 30° e (x + y)·sin 30°, l’altezza sale dritta). Spessore SLAB, aria fra un piano e l’altro GAP. Per muovere un piano basta spostare il suo gruppo in verticale.

La pianta con una matrice

Quello che c’è dentro un piano (piscina, reception, tavoli, letti, ombrelloni) è disegnato in piano, in coordinate sue, e messo sul pavimento con una matrice sola, matrix(cos30, sin30, −cos30, sin30, …): l’isometria stessa. Il tratto ha vector-effect: non-scaling-stroke, così resta un filo anche schiacciato dalla matrice.

Una molla per piano

Ogni piano ha la sua molla (SPRING: rigidità e smorzamento), che lo porta alla sua altezza: quella di riposo, più PART se il piano aperto è sotto di lui. Si calcolano dal basso in alto, tre passi per fotogramma, e un piano non può passare attraverso quello sotto: lo tocca e rimbalza con LAND della sua velocità. All’apertura i piani partono in alto, invisibili, e si lasciano andare uno ogni STAGGER secondi.

Le ombre e le righe

Sul pavimento di ogni piano c’è l’ombra di quello sopra, un poligono sfocato con un feGaussianBlur: più il piano sopra è vicino più è scura, più è lontano più si sposta e sbiadisce. A ogni fotogramma la riga sottile parte dall’angolo del piano, ovunque sia, e arriva al suo nome, che sta fermo in colonna.

Link veri

I nomi sono link in un nav, messi sopra il disegno in percentuale e con caratteri in unità del contenitore (cqw), così crescono e calano col disegno. Il mouse su un nome o su un piano apre quel piano, uscendo dalla scheda torna aperto quello in cui sei; da tastiera le frecce vanno da un piano all’altro, Invio sceglie, Esc chiude e il focus torna al pulsante.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`PART`	script.js	`66`	Quanto si alzano i piani sopra per mostrare quello indicato, in pixel del disegno.
`GAP`	script.js	`9`	L’aria fra un piano e l’altro quando sono fermi.
`SPRING`	script.js	`[240, 17]`	Le molle dei piani: quanto sono rigide e quanto sono frenate.
`LAND`	script.js	`0.32`	Quanto rimbalza un piano quando atterra su quello sotto (0 si ferma, 1 gomma).
`STAGGER`	script.js	`0.11`	I secondi fra un piano che atterra e il successivo, all’apertura.
`SLAB`	script.js	`13`	Lo spessore di un piano, in pixel del disegno.

Provali nel Playground

Quando usarla

Per il sito di un albergo, un ostello, un centro benessere o un edificio con funzioni diverse ai piani (un museo, un coworking, un grande magazzino): il menu dice anche com’è fatto il posto. Va bene con quattro, cinque o sei voci, una per piano.

Sul telefono

La scheda si stringe alla larghezza dello schermo e il disegno con i nomi si rimpicciolisce insieme. Senza puntatore resta aperto il piano in cui sei; il tocco su un nome o su un piano lo sceglie.

Con il movimento ridotto

Niente piani che cadono e niente molle: la scheda compare in dissolvenza con l’albergo già montato, e indicando un piano quelli sopra vanno subito alla loro altezza. Luci, colori e righe cambiano come sempre.

Trappole

GSAP prende un array come elenco di bersagli: un tween su un array di numeri non li anima. I valori di ogni piano stanno quindi nel suo oggetto, non in un array a parte.
Con una molla un piano che atterra va oltre il suo posto ed entra in quello sotto: per questo si calcolano dal basso in alto e ognuno si ferma sopra il precedente, rimbalzando, invece di passarci attraverso.
Il tratto della pianta, dentro la matrice isometrica, diventava più spesso in un verso che nell’altro: vector-effect: non-scaling-stroke lo tiene un filo uguale dappertutto.
Il mouse che resta dov’era il pulsante, quando il pulsante sale, si trova sopra il tetto e lo apre subito: è giusto così, ma per l’anteprima l’apertura del giro dimostrativo è fatta dallo script.
La scritta «You are here» messa in griglia sopra la frase spingeva la frase in una seconda riga: ora è posizionata in assoluto sopra la frase, che resta trasparente.

Librerie

GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 9,5 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.