Lo sfondo di fili come un tessuto
Sfondi, Hover
NuovaGratis
Torna alla libreria
Lo sfondo di quadrati che si voltano
Uno sfondo animato nello stile minimal, da mettere dietro a un titolo: una griglia di quadrati sottili d’inchiostro su una carta bianco caldo che un’onda lenta volta in 3D, uno dopo l’altro, come lastre di un tetto. Sul retro ogni quadrato ha una diagonale sola e pochi hanno il vermiglio; il puntatore spinge i quadrati vicini, che si inclinano su una molla e si assestano.
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>Ordo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the background: a grid of thin square tiles that turn over in 3D like slates, in a slow wave crossing the page.
The back of every tile has a single diagonal; a few backs carry the accent. The pointer, or a finger, pushes the
tiles nearby: they tilt on a spring and settle back -->
<main class="pagina" data-pagina>
<canvas class="fondo" aria-hidden="true" data-fondo></canvas>
<header class="testa">
<p class="marchio">Ordo</p>
<p class="testa__nota">Architecture studio</p>
</header>
<section class="eroe">
<div class="blocco" data-blocco>
<p class="occhiello" data-entra>Houses, schools and quiet courtyards</p>
<h1 class="titolo">
<span class="riga"><span class="riga__dentro" data-riga>Built in</span></span>
<span class="riga"><span class="riga__dentro" data-riga>quiet rows.</span></span>
</h1>
<div class="azione" data-entra>
<a class="pillola" href="#">
<span class="pillola__scritta" data-testo="See the work">See the work</span>
<svg class="pillola__freccia" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 8h10.5M9 3.8 13.2 8 9 12.2" /></svg>
</a>
</div>
</div>
</section>
</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.
22 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 «Lo sfondo di quadrati che si voltano» da Animorio e adattala al mio sitoCosa fa
Una pagina bianco caldo, il fondo di uno studio di architettura inventato, Ordo. Dietro a tutto, su un canvas, una griglia di quadrati sottili d’inchiostro, ognuno al centro della sua cella, come le lastre di un tetto viste dall’alto. All’apertura i quadrati nascono dal centro verso i bordi, girati di taglio, e una molla li mette giù. Al centro il titolo, Built in quiet rows., sale dalla sua riga stringendosi e prendendo peso; intorno i quadrati si diradano e lasciano la carta pulita. Ogni sei secondi un’onda parte da un angolo e attraversa la pagina in diagonale: i quadrati che raggiunge si voltano di mezzo giro attorno al loro asse verticale, in 3D, con un filo di prospettiva, vanno un poco oltre e si assestano. Sul retro ogni quadrato ha una diagonale sola, e pochi, sparsi, sono pieni di vermiglio. L’onda dopo parte dall’angolo opposto e li rimette dritti. Passando col puntatore, o col dito, i quadrati vicini si inclinano da una parte o dall’altra secondo il verso del movimento, tanto più quanto il puntatore corre, e tornano piano al loro posto. Quando nessuno muove il puntatore, un puntatore finto passeggia per la pagina.
Come funziona
Un quadrato girato, con un filo di prospettiva
Ogni tessera ha un angolo attorno al suo asse verticale. I quattro angoli del quadrato si calcolano a mano: in orizzontale si stringono col coseno, e la prospettiva allunga il lato che viene avanti e accorcia quello che va indietro (D / (D ± h·seno)). Quando il coseno è negativo la tessera mostra il retro: una diagonale sola, oppure il vermiglio pieno per le poche scelte da un generatore col seme (ACCENT_SHARE).
Un tratto solo per gruppo
Le tessere sono centinaia: si raggruppano per trasparenza in cinque gruppi, e ogni gruppo è un path solo con un solo stroke. Intorno al titolo e alla testata la trasparenza si misura con una superellisse e una piuma, così le parole stanno sulla carta pulita. I retri nell’accento si disegnano per ultimi, sopra.
L’onda diagonale e la molla
Una timeline GSAP a ripetizione porta avanti due onde per giro, una ogni WAVE_EVERY secondi, da due angoli opposti. Il fronte è una diagonale (la distanza è la somma delle due distanze per 0,707): le tessere che supera in quel fotogramma ricevono mezzo giro in più. L’angolo vero le insegue con una molla integrata a mano sul ticker di GSAP (SPRING), in due mezzi passi per restare stabile.
La spinta del puntatore
A ogni fotogramma si misura quanto ha corso il puntatore. Le tessere entro REACH pixel ricevono una velocità proporzionale a quella corsa, che cala col quadrato della distanza, con il segno dato dal lato in cui stanno rispetto al movimento: davanti si inclinano da una parte, dietro dall’altra. La molla le riporta all’angolo dell’onda. Un puntatore finto su una curva di Lissajous prende il posto di quello vero dopo 2,4 secondi di quiete.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TILE | script.js | 60 | Il passo della griglia, in px (sul telefono un poco meno). |
SIZE | script.js | 0.46 | Il lato del quadrato, rispetto al passo. |
LINE | script.js | 1 | Lo spessore del bordo, in px. |
WAVE_EVERY | script.js | 6 | Ogni quanti secondi parte un’onda (due per giro). |
TRAVERSA | script.js | 3.6 | In quanti secondi l’onda attraversa la pagina. |
PUSH | script.js | 0.9 | Quanto il puntatore inclina le tessere vicine. |
REACH | script.js | 120 | Fin dove arriva la spinta del puntatore, in px. |
SPRING | script.js | [150, 11] | La molla delle tessere: quanto è rigida e quanto è frenata (meno attrito, più oscilla). |
ACCENT_SHARE | script.js | 0.035 | Quante tessere hanno il retro nell’accento, da 0 a 1. |
Quando usarla
Come fondo della prima schermata di uno studio di architettura o di ingegneria, di un’impresa di costruzioni, di un produttore di piastrelle, tegole o pannelli, di una mostra di design; in generale dietro a un titolo corto quando si vuole un motivo ordinato ma vivo. Il colore del bordo e l’accento si cambiano nel CSS.
Sul telefono
Le stesse animazioni a misure adattate: la griglia è un poco più fitta e la zona pulita più stretta, così le tessere si vedono anche intorno al titolo, il titolo è più piccolo e la zona pulita lo segue. Il dito spinge le tessere mentre trascina; quando si alza torna il puntatore finto.
Con il movimento ridotto
La griglia è ferma, con tutti i quadrati dritti: niente onde, niente spinte, niente nascita dal centro. Il titolo, la riga piccola e la pillola compaiono in dissolvenza.
Trappole
- Un quadrato girato del tutto di taglio diventa una riga: va bene, è il momento più bello dell’onda, ma la prospettiva va divisa per D ± h·seno con D abbastanza grande (3,2 volte il lato), se no il lato che viene avanti esplode.
- Una tessera già raggiunta dal fronte non deve ricevere un altro mezzo giro nello stesso passaggio: il fronte gira solo le tessere fra il raggio del fotogramma prima e quello di adesso, e l’arrivo si arrotonda al mezzo giro.
- Lo script del video si ferma dopo un giro del puntatore finto, prima che la seconda onda rimetta dritti i quadrati: il video dell’anteprima ha una durata fissa, l’entrata più le due onde.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,8 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 22 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.
