La nav col nastro di carta
Navigazione, SVG, 3D, Hover
NuovaGratis
Tutti i componenti
La card della camera che si alza
La card di una camera in un piccolo albergo, con la camera disegnata come la pianta di un architetto: muri neri, letto, scrivania, poltrona, bagno, l’arco della porta e la macchia di sole della finestra. Col puntatore sopra (o col focus, o con un tocco) la pianta si inclina e gira, i muri salgono su una molla e i mobili dopo di loro, e la camera si alza in assonometria coi due muri vicini tagliati bassi come in un plastico. Attraverso il disegno il puntatore sposta il sole e l’ora; scegliendo un’altra camera ogni muro e ogni mobile scivola al suo posto nella nuova, alla stessa scala.
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 room card that stands up</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the card of a room in a small hotel, with the room drawn as an architect's plan: black walls, the bed, the
desk, the bathroom, the swing of the door and the patch of sun from the window. With the pointer over it (or
the focus, or a tap) the plan tips back and turns, the walls rise out of it and the furniture after them,
and the room stands up in axonometric, the two near walls cut low so you can see in. Moving across the
drawing moves the sun. Choosing another room, every wall and every piece of furniture slides to its new
place. The drawing is projected and drawn by the script at every frame -->
<article class="room" aria-labelledby="room-name" data-room>
<button class="plan" type="button" aria-pressed="false" data-plan data-autoclic>
<svg class="plan__svg" aria-hidden="true" data-svg></svg>
<span class="plan__view" aria-hidden="true" data-view>Plan</span>
<span class="plan__sun" aria-hidden="true" data-sun-label>Sun at 10:30</span>
<span class="sr" data-plan-label>Show the room in 3D</span>
</button>
<div class="info">
<div class="info__head">
<h2 class="info__name" id="room-name" data-name>Garden double</h2>
<p class="info__price"><span data-price>€180</span><span class="info__night"> / night</span></p>
</div>
<p class="info__facts"><span data-area>22</span> m² · <span data-guests>Sleeps 2</span> · <span data-outlook>Window on the garden</span></p>
<div class="kinds" role="radiogroup" aria-label="Room" data-kinds></div>
<a class="book" href="#room-name" data-book>
<span class="book__word">Check dates</span>
<svg viewBox="0 0 18 12" aria-hidden="true"><path d="M1 6h15M11.5 1.5 16 6l-4.5 4.5" /></svg>
</a>
</div>
<p class="sr" aria-live="polite" data-live></p>
</article>
</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.
47 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 «La card della camera che si alza» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una card bianca larga 340 pixel, con un filo grigio intorno. In alto, su un fondo grigio caldo, la camera disegnata come una pianta d’architetto: i muri tagliati pieni di nero, la finestra sul muro di fondo come un’apertura bianca, il letto coi due cuscini e la piega del piumino, la scrivania, la poltrona, il bagno nell’angolo davanti a sinistra con il piatto doccia e il lavandino, e l’arco tratteggiato della porta; sul pavimento la macchia di sole ambra che entra dalla finestra. Sopra, in piccolo, PLAN a sinistra e SUN AT 13:10 a destra. Col puntatore sopra il disegno la pianta si inclina all’indietro e ruota, i muri escono dal pavimento con un piccolo rimbalzo e dopo di loro letto, cuscini, scrivania, poltrona e lavandino, finché la camera sta in piedi in assonometria: le facce dei muri in due grigi, le teste dei muri tagliate in nero, la finestra col davanzale e l’architrave, i due muri vicini e quelli del bagno tagliati bassi per guardare dentro. La scritta diventa AXONOMETRIC. Muovendo il puntatore da sinistra a destra il sole va dalle otto del mattino alle cinque del pomeriggio e la macchia sul pavimento si inclina con lui. Sotto il disegno il nome della camera in Archivo stretto, il prezzo a notte, i metri quadri, i posti letto e la vista, e tre voci, Double, Junior suite e Loft, con una barretta nera sotto quella scelta che scivola con un rimbalzo; scegliendone un’altra muri, porta, finestra, bagno e mobili scivolano nella pianta nuova, alla stessa scala, mentre prezzo e metri quadri contano. In fondo Check dates con una freccia.
Come funziona
La camera fatta di scatole
Ogni camera è una pianta in metri con gli stessi pezzi (la stanza, il bagno, il letto, la scrivania, la seduta, la finestra, la porta). A ogni fotogramma la pianta diventa un elenco di scatole: i muri di 18 centimetri divisi intorno alla finestra (davanzale e architrave) e alla porta, i due muri sottili del bagno, i mobili con la loro altezza vera. Così una camera si trasforma nell’altra interpolando i numeri.
La proiezione fatta a mano
Un punto (x, y, z) gira attorno alla verticale di TURN gradi e poi la pianta si inclina di TILT: X = x·cos a − y·sin a, Y = (x·sin a + y·cos a)·cos e − z·sin e. Con e = 0 è la pianta, e le facce laterali hanno area zero. La scala in pixel per metro viene dalla camera più grande in piedi ed è la stessa per tutte.
Solo le facce che guardano verso di te
Per ogni scatola si disegnano solo le facce la cui normale guarda verso l’occhio (il vettore sin e·sin a, sin e·cos a, cos e nelle coordinate della stanza): le teste dei muri in nero come un taglio, i fianchi in due grigi. L’ordine: i muri lontani, poi i mobili dal fondo in avanti, poi i muri vicini, che restano alti CUT metri come in un plastico.
Quattro molle in fila
L’inclinazione, i muri, i mobili e il cambio di camera sono quattro molle sul ticker di GSAP, in quattro sotto-passi col passo limitato a 1/30 di secondo. Alzandosi la pianta si inclina, i muri partono quando l’inclinazione ha passato il 42% e i mobili quando i muri sono a metà; abbassandosi vanno giù prima mobili e muri e la pianta torna piatta per ultima. I muri hanno la molla SPRING, che passa il segno.
Il sole
La macchia di sole è un parallelogramma sul pavimento che parte dalla finestra a 55 centimetri dal muro e arriva a due metri, inclinato secondo l’ora: la posizione orizzontale del puntatore sul disegno va dalle 8:00 alle 17:00, scritte in alto a destra a passi di dieci minuti.
Tastiera e tocco
Il disegno è un button con aria-pressed: il focus da tastiera alza la camera come il mouse, Invio la fissa o la rimette in pianta, le frecce destra e sinistra spostano il sole. Le camere sono un radiogroup con frecce, Home e End. Al telefono un tocco alza la camera e la lascia in piedi mentre si scelgono le camere; il punto del tocco decide l’ora.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
ROOMS | script.js | [{ name: 'Garden double', short: 'Double', area: 22, guests: 2, view: 'Window on the garden', price: 180 }, …] | Le camere in vendita: il nome, il nome corto per la scelta, i metri quadri, i posti letto, la vista e il prezzo a notte. Al massimo tre (le piante sono tre). |
TILT | script.js | 52 | Quanto si inclina all’indietro la pianta quando la camera si alza, in gradi. |
TURN | script.js | -32 | Quanto gira la pianta, in gradi (col segno opposto gira dall’altra parte). |
WALL | script.js | 2.6 | Quanto sono alti i muri, in metri. |
CUT | script.js | 0.6 | Quanto restano alti i due muri vicini, in metri, per guardare dentro. |
SPRING | script.js | [140, 0.5] | La molla dei muri: quanto è rigida e quanto è frenata (1 = senza rimbalzi). |
CURRENCY | script.js | '€' | Il segno davanti al prezzo. |
Quando usarla
Per la scheda di una camera d’albergo, di un appartamento in affitto, di una casa vacanze o di un ufficio da affittare; anche per un immobile in vendita o per uno studio di architettura che mostra i suoi interni. Funziona dove la gente vuole capire come è fatto davvero uno spazio prima di prenotarlo.
Sul telefono
La card è larga 340 pixel, o lo schermo meno 32, e la scala del disegno si ricalcola sulla sua misura. Il passaggio del mouse non c’è: un tocco sul disegno alza la camera e la lascia in piedi, un altro la rimette in pianta, e il punto toccato decide l’ora del sole. Le molle e la coreografia sono quelle del computer.
Con il movimento ridotto
Niente molle e niente rotazione in movimento: la pianta diventa assonometria (e torna pianta) di colpo, dietro una breve dissolvenza, e il cambio di camera fa lo stesso. Il sole si sposta subito, prezzo e metri quadri cambiano senza contare.
Trappole
- In assonometria la porta, alta due metri, restava in piedi davanti ai muri vicini tagliati bassi e sembrava un palo: anche la porta si taglia all’altezza dei muri vicini quando la pianta si inclina.
- Con la scala presa da ogni camera, la doppia e il loft venivano grandi uguali e il cambio non diceva niente: la scala viene dalla camera più grande in piedi ed è la stessa per tutte, così il loft si vede davvero più grande.
- Il clic dell’anteprima (detail 0) avrebbe solo fissato la camera in piedi: ora fa un giro dimostrativo (si alza, il sole va dal mattino alla sera, le tre camere, giù), mentre Invio, che arriva anche lui senza detail, è segnato da un tasto premuto e fissa la camera.
- Coi muri a zero centimetri la pianta perdeva i muri: le teste delle scatole basse restano disegnate in nero anche ad altezza zero, ed è proprio il nero dei muri tagliati di una pianta d’architetto.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 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.
