La griglia liquida
Hover, Transizioni
NuovaGratis
Torna alla libreria
Il mosaico che si gira
Una parete di piastrelle di ceramica in CSS 3D: sotto il puntatore le tessere si girano in onda e sul retro mostrano un altro disegno, poi tornano al loro posto con un rimbalzo. Un clic gira tutta la parete in un’onda che parte dal punto cliccato.
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 turning mosaic</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="studio">
<header class="bar">
<a class="brand" href="#">Saltmarsh Clay Lab</a>
<nav class="bar__nav" aria-label="Sections">
<a href="#">Classes</a>
<a href="#">Kiln days</a>
<a href="#">Tiles</a>
</nav>
</header>
<!-- the wall: one block per tile, built by the script. Each tile has a front, a back and four clay edges -->
<section class="wall-frame" aria-label="A wall of glazed tiles">
<div class="wall" data-wall></div>
</section>
<p class="hint" data-hint>Move over the wall. Click to turn it all.</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
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 mosaico che si gira» da Animorio e adattala al mio sitoCosa fa
La pagina di un laboratorio di ceramica inventato, Saltmarsh Clay Lab, è quasi tutta una parete di piastrelle quadrate, con le fughe color sabbia. Sul davanti le piastrelle fanno un disegno blu e bianco: ogni tessera porta un quarto di stella, e quattro tessere vicine, specchiate, fanno una stella intera con il centro giallo; negli angoli opposti nascono dei fiorellini blu. All’apertura le tessere arrivano dal centro verso i bordi, cadendo sulla parete con un piccolo rimbalzo, e subito la parete si gira da sola, in anelli che partono dal centro: dietro c’è un secondo disegno, uno smalto color terracotta con un grande vaso a righe e il titolo «Fired by hand.»; poi si rigira. Passando col puntatore le tessere intorno si girano in 3D, prima quella sotto il puntatore e poi le altre, e ognuna mostra il suo pezzo del disegno di dietro, come una finestra che segue il puntatore. Mentre girano si staccano un poco dalla parete, si inclinano dalla parte del puntatore, si scuriscono di taglio e si vede il bordo di argilla cotta; un riflesso di smalto ci scivola sopra. Quando il puntatore se ne va aspettano un attimo e tornano su una molla: passano oltre, tornano indietro e si assestano. Un clic gira tutta la parete in un’onda che parte dal punto cliccato e mostra il disegno di dietro intero; allora il puntatore apre una finestra sul davanti. Un altro clic la rigira.
Come funziona
Una tessera è una scatoletta
Ogni tessera è un div con transform-style: preserve-3d e dentro cinque pezzi: il davanti spinto avanti di mezzo spessore (translateZ), il retro girato di 180 gradi e spinto indietro, e quattro bordi color argilla girati di 90 gradi sui lati. Davanti e retro hanno backface-visibility: hidden, così si vede sempre la faccia rivolta verso di noi. La parete ha perspective: 1500px, che dà a tutte le tessere lo stesso punto di fuga: quelle ai bordi si girano un po’ di sbieco, come una parete vera.
Due disegni, uno per faccia
Il davanti è un quarto di stella disegnato in SVG, con il centro nell’angolo in basso a destra; lo script lo copia quattro volte, specchiato con scale(-1, 1) e scale(1, -1), in un blocco di due tessere per due, e ne fa un’immagine sola (un indirizzo blob:). Ogni tessera la usa come sfondo grande il doppio e ne mostra il suo quarto: così quattro tessere fanno una stella intera, e per questo colonne e righe sono sempre in numero pari. Il retro è un’immagine sola grande quanto la parete, dipinta una volta su una canvas (vaso, anelli, titolo misurato con measureText perché stia nello spazio) e messa come sfondo di ogni retro (anche lei come indirizzo blob:), spostata con background-position di quanto la tessera è lontana dall’angolo.
L’onda sotto il puntatore
A ogni movimento si misura la distanza fra il puntatore e il centro di ogni tessera, in tessere. Quelle entro RADIUS si girano con un ritardo che cresce con la distanza (WAVE secondi per tessera): è questo che fa l’onda. Il verso del giro dipende dal lato: a destra del puntatore girano in un senso, a sinistra nell’altro, così sembra che il puntatore le spinga via. Quando una tessera esce dal raggio (con un piccolo margine, perché ai bordi non tremi) parte un gsap.delayedCall di LINGER secondi che la riporta indietro; se il puntatore torna prima, si annulla.
Il giro e il ritorno
Lo stato di una tessera è un oggetto con tre numeri: il giro (ry), l’inclinazione (rx) e quanto si stacca (z). GSAP li anima e a ogni fotogramma una funzione scrive il transform e due variabili CSS: --dim scurisce la faccia quando è di taglio (1 − |cos ry|) e --sheen sposta il riflesso. L’andata usa back.out, che arriva un po’ oltre; il ritorno elastic.out, che passa oltre il piatto più volte, sempre meno. Il distacco e l’inclinazione sono keyframes 0, su, 0, e durante il giro la tessera ha uno z-index più alto, così passa sopra le vicine.
Il clic e l’apertura
Un clic cambia la faccia di tutta la parete e gira ogni tessera con un ritardo pari alla sua distanza dal punto cliccato per WAVE: un’onda ad anelli. Il puntatore poi mostra sempre l’altra faccia, quindi sulla parete girata apre una finestra sul davanti. Mentre l’onda passa, il puntatore aspetta (quietUntil), poi si ricontrolla dov’è. All’apertura le tessere cadono dal centro con back.out, e la stessa onda parte da sola due volte, avanti e indietro: così si capisce subito che dietro c’è qualcosa.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TILE | script.js | 76 | Il lato di una tessera in pixel. Su uno schermo stretto si rimpicciolisce perché ce ne stiano almeno sei per riga. |
GAP | script.js | 4 | La fuga fra le tessere, in pixel. |
RADIUS | script.js | 2.2 | Quanto lontano dal puntatore si girano le tessere, in tessere: 1 gira quasi solo quella sotto, 4 apre una finestra grande. |
WAVE | script.js | 0.05 | Il ritardo fra un anello di tessere e il successivo, in secondi per tessera: più alto, l’onda è più lenta e si vede di più. |
LINGER | script.js | 0.35 | Quanti secondi una tessera resta girata dopo che il puntatore se n’è andato: alto, il puntatore lascia una scia. |
BOUNCE | script.js | 0.55 | Quanto la tessera va oltre e rimbalza tornando (0 = si ferma e basta, 1 = molto elastica). |
LIFT | script.js | 26 | Quanto una tessera si stacca dalla parete verso di noi mentre gira, in pixel. |
TITLE | script.js | ['Fired', 'by hand.'] | Il titolo sul retro della parete, una riga per voce: si fa grande quanto lo spazio permette. |
Quando usarla
Per la pagina d’apertura di chi lavora con le superfici: un laboratorio di ceramica, un negozio di piastrelle, un architetto, un museo, un marchio di carta da parati. Funziona bene come rivelazione: davanti il motivo, dietro un messaggio o un prodotto. Con tessere da 50 a 100 pixel; più piccole, il giro diventa uno sfarfallio.
Sul telefono
La stessa animazione con le misure adattate: le tessere diventano più piccole perché ce ne stiano sei per riga, la parete è verticale e sul retro il vaso sta sopra il titolo. Trascinando il dito sulla parete le tessere si girano come sotto il puntatore e tornano quando lo alzi; un tocco gira tutta la parete.
Con il movimento ridotto
Le tessere non si girano e non si muovono: il retro compare in dissolvenza sopra il davanti, con lo stesso ritardo a onda, e torna a sparire allo stesso modo. Le tessere all’apertura compaiono in dissolvenza.
Trappole
- Scurire e far brillare le facce con due variabili CSS (--dim, --sheen) cambiate su ogni tessera a ogni fotogramma faceva rifare lo stile a tutta la parete: oltre un secondo su tre solo per quello, e l’onda andava a scatti. Ora lo script scrive opacity e background-position direttamente sui due elementi dell’ombra e del riflesso, e le immagini sono indirizzi blob: corti, non data: lunghi un mega.
- Centinaia di tessere sempre in 3D, ognuna con sei strati, pesano anche da ferme: una tessera a riposo diventa piatta (transform-style: flat, senza bordi, solo la faccia che mostra) e torna una scatoletta solo mentre gira.
- Il disegno di dietro fatto come un SVG solo, mostrato in ogni tessera con un use e un viewBox diverso, dava lettere grandi che non combaciavano da una tessera all’altra: il testo veniva composto in modo un po’ diverso in ogni pezzo. Dipinto una volta su una canvas e usato come sfondo spostato, combacia sempre ed è anche più leggero.
- Il davanti e il retro alla stessa profondità senza rotazione (nella versione senza movimento) si contendevano il primo piano e il retro non si vedeva: senza movimento la tessera torna piatta (transform-style: flat) e il retro si sovrappone in dissolvenza.
- Un giro sempre verso +180 faceva girare tutte le tessere dallo stesso lato: l’angolo d’arrivo si cerca nel verso giusto (il primo multiplo che mostra la faccia voluta, a destra o a sinistra), e alla fine si riporta fra −180 e 180, perché giri successivi non accumulino migliaia di gradi.
- Il ritorno che riparte quando il puntatore rientra a metà strada: si uccidono i tween della tessera e si riparte dall’angolo in cui si trova, verso la faccia più vicina; e una tessera che sta già andando verso la faccia giusta non si tocca, sennò ogni movimento del mouse la farebbe ripartire.
- Al bordo del raggio una tessera entrava e usciva a ogni pixel: per tornare deve uscire di un altro terzo di tessera.
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 9,3 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 10 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.
