Il pavimento che si alza

SVG, Hover, FisicaGSAPMediaPeso compresso: Demo 6,3 KBGSAP 28 KBGratisScarica lo zip

Un pavimento a piastrelle visto dall’alto in prospettiva, disegnato piastrella per piastrella in SVG. Sotto il puntatore le piastrelle si alzano come colonnine, di più quella sotto e sempre meno le altre, ognuna su una molla. Un clic lascia cadere un sassolino e un anello di piastrelle alzate corre via; i due oggetti appoggiati sul pavimento salgono e scendono con la loro piastrella.

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>Tiles that rise</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/dm-sans@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="room" data-room>
    <header class="bar">
      <a class="brand" href="#">Grout &amp; Co.</a>
      <nav class="bar__nav" aria-label="Sections">
        <a href="#">Terracotta</a>
        <a href="#">Zellige</a>
        <a href="#">Showroom</a>
      </nav>
    </header>

    <div class="words">
      <h1 class="words__title">Floors you want to touch.</h1>
      <p class="words__line">Hand-glazed terracotta and zellige, laid by people who care about the grout.</p>
      <a class="words__button" href="#">Book a showroom visit</a>
    </div>

    <!-- the floor: an isometric grid drawn by the script, one group per tile (two sides and the top) -->
    <svg class="floor" data-floor aria-hidden="true"></svg>

    <p class="hint" data-hint>Move over the floor. Click to drop a pebble.</p>
  </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.

24 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 pavimento che si alza» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

La home di un negozio inventato di piastrelle, Grout & Co.: in alto a sinistra il titolo «Floors you want to touch.», una riga e un bottone; il resto dello schermo è un pavimento a scacchiera di cotto e crema visto di tre quarti, che parte da un angolo in mezzo alla pagina e scende oltre i bordi. Ogni piastrella ha un colore appena diverso dalle vicine, come quelle fatte a mano, e un bordo che si vede. Sopra stanno una pianta in un vaso di terracotta e un vaso blu. All’arrivo i due oggetti vengono posati sul pavimento e un primo sassolino fa partire un’onda. Muovendo il puntatore, le piastrelle sotto di lui si alzano: quella sotto di 34 pixel, le altre sempre meno fino a due piastrelle e mezzo di distanza; salendo mostrano i fianchi, più scuri, e rimbalzano un poco prima di fermarsi. Un clic lascia cadere un sassolino: un anello di piastrelle alzate corre via a sette piastrelle al secondo e si spegne in due o tre secondi. Se una piastrella con sopra un oggetto si alza, l’oggetto sale con lei. Senza puntatore per due secondi e mezzo, un puntatore invisibile passeggia sul pavimento.

Come funziona

Il pavimento in prospettiva

Il pavimento ha le sue coordinate, u e v, in piastrelle; sullo schermo diventano x = X0 + (u − v) · L/2 e y = Y0 + (u + v) · L/4, dove L è la larghezza di una piastrella da un angolo all’altro. La stessa formula al contrario porta il puntatore sul pavimento. Si creano solo le piastrelle che si vedono, più un margine per quelle alzate.

Tre facce per piastrella

Ogni piastrella è un gruppo SVG con tre poligoni: i due fianchi davanti e la faccia di sopra. La faccia di sopra si sposta in su di THICK più l’altezza; i fianchi vanno dagli spigoli sul pavimento a quelli della faccia, quindi a riposo sono un bordino e salendo si allungano. I fianchi hanno lo stesso colore della piastrella, all’80% e al 66%.

Davanti e dietro

Le piastrelle si aggiungono per diagonali, dalla più lontana alla più vicina, quindi una piastrella alzata copre quelle dietro e viene coperta da quelle davanti senza bisogno di riordinare niente. Ogni oggetto entra subito dopo la sua piastrella, e sale con lei grazie a un gruppo che riceve la stessa altezza.

Altezza e molla

Per ogni piastrella l’altezza voluta è LIFT · (1 − d/RADIUS)², con d la distanza dal puntatore misurata sul pavimento, in piastrelle: per questo la zona alzata è un cerchio sul pavimento e un’ellisse sullo schermo. L’altezza vera la insegue su una molla, SPRING, rigidità e smorzamento, che passa un poco la misura e torna. Le piastrelle ferme e a zero non si ridisegnano.

Il sassolino

Un clic aggiunge un anello che cresce: alla distanza d e al tempo t vale PEBBLE[0] · e^(−PEBBLE[2]·t) · e^(−((d − PEBBLE[1]·t)/0,9)²). Gli anelli si sommano al puntatore e passano anche loro per la molla, quindi le piastrelle dondolano al passaggio.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`TILE`	script.js	`74`	La larghezza di una piastrella sullo schermo, da un angolo all’altro, in pixel; su uno schermo stretto si riduce.
`RADIUS`	script.js	`2.4`	Fin dove si alzano le piastrelle intorno al puntatore, in piastrelle.
`LIFT`	script.js	`34`	Quanto si alza la piastrella sotto il puntatore, in pixel.
`SPRING`	script.js	`260, 15`	La molla di ogni piastrella: rigidità e smorzamento. Con meno smorzamento rimbalzano di più.
`PEBBLE`	script.js	`26, 7, 1.6`	Il sassolino: l’altezza del suo anello in pixel, la velocità in piastrelle al secondo, quanto in fretta si spegne.
`WANDER`	script.js	`2.5`	I secondi senza puntatore prima che uno invisibile passeggi sul pavimento; a 0 mai.
`GLAZES`	script.js	`#c8694a, #efe3cf`	I due smalti della scacchiera.
`JITTER`	script.js	`0.05`	Quanto lo smalto di ogni piastrella si discosta dalle vicine, come nelle piastrelle fatte a mano.
`THICK`	script.js	`4`	Il bordo di una piastrella a riposo, in pixel.

Provali nel Playground

Quando usarla

Per una pagina d’apertura che deve far venire voglia di toccare: piastrelle, pavimenti, giochi da tavolo, una mappa, una scacchiera di prodotti. Funziona con piastrelle grandi abbastanza da vedersi alzare, da 50 a 90 pixel, e un fondo calmo; con piastrelle piccole il disegno diventa un tremolio.

Sul telefono

Il pavimento parte più in basso e le piastrelle sono più piccole (almeno 44 pixel). Il dito appoggiato le alza come il puntatore e un tocco lascia cadere il sassolino; quando il dito si alza, dopo due secondi e mezzo passeggia il puntatore invisibile. Sul pavimento la pagina non scorre.

Con il movimento ridotto

Le piastrelle non si muovono e non ci sono né sassolini né passeggiate: sotto il puntatore la faccia di sopra si schiarisce, fino a un terzo verso il bianco per quella sotto, e torna del suo colore quando il puntatore va via.

Trappole

Se il ritocco dell’altezza di un oggetto e l’animazione con cui viene posato all’arrivo toccano lo stesso elemento, uno cancella l’altro. Ogni oggetto ha tre gruppi: dove sta, quanto è alta la sua piastrella, e l’oggetto che GSAP posa.
La distanza dal puntatore va misurata sul pavimento e non sullo schermo: misurata sullo schermo, la zona alzata sarebbe un cerchio schiacciato in modo sbagliato, più profondo che largo.
Una molla senza limite in basso, dopo un rimbalzo forte, porta la faccia di sopra sotto il pavimento e i fianchi si rovesciano: l’altezza non scende mai sotto −THICK.
Una transizione CSS sul transform, come nel sito originale, non passa per l’orologio della pagina: rallentatore e fotogramma per fotogramma non la fermerebbero. Qui la molla gira nel ciclo dei fotogrammi.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0, DM Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 6,3 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 2 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.