Le colonne di colore
Hover, SVG
NuovaGratis
Torna alla libreria
I tavoli sulla pianta
Nello stile minimal: la sala di un piccolo ristorante disegnata come la pianta di un architetto, a linee sottili. Il tavolo sotto il puntatore tira fuori le sue sedie una dopo l’altra, su una molla che passa il segno di un niente, ognuna girata appena come se qualcuno si fosse appena alzato, e si fa blu; un tavolo già prenotato è tratteggiato, le sue sedie restano ferme e il tavolo dà una piccola scossa. Un clic tiene il tavolo per sé.
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>Tables on the plan</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" data-stage>
<header class="top">
<span class="top__name">Lume</span>
<span class="top__note">Book a table, Friday at eight</span>
</header>
<!-- the plan of a small restaurant drawn in thin lines. The table under the pointer pulls its chairs out, one
after the other, as if the room were ready for you; a booked table stays put and gives a small shake -->
<section class="room" aria-label="The dining room" data-room>
<svg class="plan" data-plan role="img" aria-label="The plan of the dining room"></svg>
</section>
<div class="read" aria-live="polite">
<span class="read__win"><span class="read__what" data-what>Choose a table</span></span>
<span class="read__win"><span class="read__when" data-when>Friday, 8 pm</span></span>
</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.
64 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 «I tavoli sulla pianta» da Animorio e adattala al mio sitoCosa fa
Su un fondo color carta c’è la pianta di una sala: un rettangolo di muri spessi due pixel, con un varco in basso a sinistra per la porta (l’anta disegnata e il suo arco tratteggiato) e due finestre sul muro in alto, segnate da una riga grigia e dalla scritta WINDOW. Dentro ci sono sette arredi a linee sottili, coi numeri al centro: un tavolino tondo da due, due tavoli quadrati da quattro, una tavolata da sei, un tondo da quattro con le sedie in diagonale, un altro tondo da due e il bancone del bar con quattro sgabelli. Il tavolo 3 e il 6 sono già prenotati: sono grigi e tratteggiati a righe oblique. Aprendo la pagina i muri si disegnano tutti in un tratto, i tavoli si gonfiano dal centro e le sedie arrivano scivolando da sotto il tavolo, un tavolo dopo l’altro; poi il tavolo 2 tira fuori le sue sedie da solo. Quando il puntatore passa su un tavolo libero, le sue sedie si allontanano di qualche pixel una dopo l’altra, superano di un niente il punto e tornano, ognuna girata appena da una parte o dall’altra; tavolo, sedie e numero diventano blu. Lasciando il tavolo le sedie rientrano nell’ordine contrario. Su un tavolo prenotato le sedie restano ferme e il tavolo fa una piccola scossa di lato. Sotto la pianta una riga dice il tavolo (Table 2, four seats, by the window) e a destra se è libero; con un clic il tavolo resta tuo, le sedie restano fuori, l’interno si colora di un blu leggerissimo e la riga dice Table 2 is yours.
Come funziona
Una pianta in un SVG
La sala è disegnata su una pianta di 1000 per 600 unità dentro un SVG con viewBox, che si adatta da solo a ogni misura. I tavoli sono una tabella (TABLES): numero, forma, posto, sedie, una nota e se è prenotato. Per ogni forma una funzione calcola la misura del piano e dove vanno le sedie: in cerchio intorno ai tondi, una per lato ai quadrati, in due file alla tavolata, in colonna davanti al bancone. Un tavolo prenotato ha un tratteggio di righe oblique ritagliato con un clipPath sulla sua forma.
Ogni sedia guarda fuori
Ogni sedia sta in un gruppo spostato al suo posto e ruotato in modo che il suo asse verticale punti lontano dal tavolo. Così tirarla fuori vuol dire solo muovere y del rettangolo dentro il gruppo: GSAP lo sposta di PULL unità con back.out, per ogni sedia con STAGGER secondi di ritardo, e la gira di TURN gradi, una sedia da una parte e la successiva dall’altra. Al ritorno l’ordine è rovesciato e l’overshoot più piccolo.
Il puntatore sulla pianta
Il punto dello schermo si porta nelle unità della pianta con l’inversa di getScreenCTM. Risponde il tavolo più vicino, misurando dal rettangolo che contiene il piano e le sue sedie, purché sia entro WALK unità: così fra un tavolo e l’altro non resta un vuoto morto. Il colore passa al blu con un tween su stroke e fill, il numero prende peso con l’asse wght. Un tavolo prenotato non muove le sedie: fa una scossa di lato con i keyframes di GSAP.
Alta o larga
Su uno schermo più alto che largo la pianta si disegna scambiando x e y (una simmetria sulla diagonale): la sala diventa verticale, il bancone va in basso, la porta in alto a destra, e gli angoli delle sedie diventano 90 meno l’angolo. Le scritte non si girano. Il disegno si rifà solo quando lo schermo passa da largo ad alto; per il resto l’SVG si ridimensiona da sé.
L’apertura e la riga in fondo
Una timeline GSAP disegna i muri con stroke-dashoffset in un tratto solo, fa comparire porta e finestre, gonfia i tavoli dal centro e fa scivolare le sedie da sotto i tavoli, un tavolo dopo l’altro; alla fine il primo tavolo quadrato libero tira fuori le sedie da solo. La riga sotto la pianta scorre dentro due finestrelle a ogni cambio: tavolo, posti e nota a sinistra, libero, prenotato o tuo a destra.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TABLES | script.js | [[1, 'round', 170, 175, 2, 'in the quiet corner', false], …] | I tavoli: numero, forma (round, square, long o bar), posto su una pianta di 1000 per 600, sedie, una nota, prenotato o no. |
PULL | script.js | 13 | Quanto si tira fuori una sedia, in unità della pianta. |
TURN | script.js | 7 | Quanto gira una sedia tirata fuori, in gradi. |
STAGGER | script.js | 0.05 | La pausa fra una sedia e la successiva, in secondi. |
OVERSHOOT | script.js | 2.4 | Quanto le sedie passano il segno (1 appena, 4 molto). |
TIME | script.js | 'Friday, 8 pm' | La sera scritta nella riga in fondo. |
WALK | script.js | 46 | Fino a che distanza da un tavolo, sulla pianta, il puntatore lo sceglie ancora. |
--accent | style.css | #2446ff | Il colore del tavolo sotto il puntatore. |
Quando usarla
Per la pagina delle prenotazioni di un ristorante, di un bar o di una trattoria, per la sala di un locale per eventi, per i tavoli di un matrimonio o le scrivanie di un coworking da scegliere su una piantina. Cambiando TABLES si disegna qualunque sala.
Sul telefono
Le stesse animazioni a misure adattate: su uno schermo alto la pianta si gira (x e y scambiate) e la sala diventa verticale, così riempie la pagina. Toccando un tavolo le sue sedie escono e il tavolo resta tuo; toccando il pavimento lo lasci; trascinando il dito si passa da un tavolo all’altro. La riga in fondo va su due righe.
Con il movimento ridotto
Niente si sposta: le sedie restano al loro posto e il tavolo prenotato non fa la scossa. Il tavolo sotto il puntatore diventa blu con una breve dissolvenza, la riga in fondo cambia in dissolvenza e la pagina compare già disegnata.
Trappole
- Spostare la sedia con x e y nello spazio della pianta voleva un seno e un coseno per ognuna e la rotazione la portava fuori strada: dentro un gruppo già ruotato verso fuori basta muovere y.
- Con la pianta larga su un telefono la sala diventava una striscia di due dita: sugli schermi alti si scambiano x e y, e gli angoli delle sedie diventano 90 meno l’angolo.
- La riga sottile dei mobili si assottigliava fino a sparire quando l’SVG si rimpiccioliva: vector-effect non-scaling-stroke la tiene a un pixel a ogni misura.
- Il ResizeObserver chiama subito una volta: ridisegnare la pianta a metà dell’apertura faceva ricomparire i tavoli già fermi. Si ridisegna solo quando lo schermo passa da largo ad alto.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,9 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.
