Il rilievo a trattini
WebGL, 3D, Hover
Gratis
Torna alla libreria
Il cubo che si apre in piano
Un cubo WebGL in stile minimal, disegnato solo coi suoi spigoli sottili, con una parola su ogni faccia. Si gira trascinando e si posa su una molla sulla faccia più vicina; passandoci sopra si apre nel suo sviluppo, la croce di sei quadrati, una cerniera dopo l'altra, e si richiude.
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>Plano</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
<script type="importmap">
{ "imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.178.0/build/three.module.min.js"
} }
</script>
</head>
<body>
<!-- a cube drawn only with its edges, one word on every face: drag it to turn it, it settles on the nearest face;
hover it (or tap it) and it unfolds flat into its net, hinge after hinge, then folds back -->
<main class="pagina" data-pagina>
<canvas class="tela" aria-label="A wireframe cube with a word on each face, drag to turn it, hover to unfold it" role="img" data-tela></canvas>
<header class="testa">
<p class="marca" data-entra>Plano</p>
<button class="apri" type="button" aria-pressed="false" data-entra data-apri>Unfold</button>
</header>
<footer class="piede">
<p class="voce" data-entra><span class="voce__finestra"><span data-voce>Work</span></span></p>
<p class="nota" data-entra data-nota>Drag to turn, hover to unfold</p>
</footer>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script type="module" 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.
16 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 cubo che si apre in piano» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo c'è un cubo fatto solo dei suoi spigoli, righe d'inchiostro sottili, visto di tre quarti. Su ogni faccia c'è una parola, le sezioni di uno studio inventato, Plano: Work, Studio, Notes, About, Index e Contact. La parola della faccia che guarda è pesante e vermiglia, le altre sono sottili e si vedono appena quando la faccia si gira di lato. Trascinando col mouse o col dito il cubo gira; lasciato andare continua con la spinta della mano, rallenta e una molla lo posa sulla faccia più vicina, con un grado di troppo e l'assestamento, mentre in basso il nome della faccia davanti scivola via e torna. Passandoci sopra col mouse, o col tasto Unfold, o con un tocco sul telefono, il cubo si gira con Work davanti e si apre nel suo sviluppo: le cerniere partono una dopo l'altra, i lati si distendono, quello di sopra si porta dietro la faccia di dietro, e la croce di sei quadrati si posa sul piano con un piccolo rimbalzo. Uscendo, si richiude nell'ordine contrario. Da solo, ogni tanto gira di un quarto e ogni tanto si apre.
Come funziona
Sei facce appese a cinque cerniere
La faccia davanti sta al centro di un gruppo; le altre sono figlie di un perno messo sul bordo che le unisce: destra e sinistra girano attorno a y, sopra e sotto attorno a x, e la faccia di dietro è figlia della faccia di sopra, sul suo bordo lontano. Con tutti gli angoli a zero le facce stanno nello stesso piano e fanno la croce dello sviluppo; con tutti a un quarto di giro il cubo è chiuso. Ogni faccia è un quadrato di EdgesGeometry con LineBasicMaterial, più due piani con la parola: uno sottile e uno pesante.
Il centro che si sposta
La croce aperta non ha il centro dove ce l'ha il cubo: aperta va spostata in basso di mezzo lato, chiusa va spostata in avanti di mezzo lato. Lo spostamento segue la media degli angoli delle cerniere, e così anche la distanza della camera, calcolata a ogni resize perché il cubo chiuso e la croce aperta stiano tutti e due nello spazio fra testa e piede.
Le molle
Ogni cerniera ha la sua molla, integrata a ogni fotogramma sul ticker di GSAP, e cambia meta solo dopo un ritardo che dipende dal suo ordine: aprendo partono prima i lati, poi la faccia di sotto, poi quella di dietro; chiudendo, al contrario. La rotazione del cubo usa un'altra molla verso il quarto di giro più vicino, con lo smorzamento a 0,82, che dà un grado di troppo e l'assestamento.
La spinta della mano
Trascinando, il cubo segue il dito e la velocità si misura fra un evento e l'altro. Lasciando, la meta della molla è il quarto di giro più vicino al punto dove la mano lo avrebbe portato, e la spinta si spegne con l'inerzia mentre la molla la prende.
La faccia che guarda
A ogni fotogramma si prende la normale di ogni faccia nel mondo e la si confronta con la direzione della camera: la più rivolta verso di noi è quella davanti. La sua parola pesante e vermiglia sale, quella sottile scende; le facce di lato schiariscono quanto più sono di taglio. Il nome in basso cambia con un salto di back.out.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LATO | script.js | 2 | Il lato del cubo nella scena: la camera si adatta, quindi cambia soprattutto quanto sembrano sottili le righe. |
MOLLA | script.js | 90 | La durezza della molla che posa il cubo su una faccia: più dura, arriva prima. |
SMORZA | script.js | 0.82 | Lo smorzamento di quella molla: più basso, più oscilla; a 0,82 va un grado oltre e torna. |
CERNIERA | script.js | 150 | La durezza delle molle delle cerniere. |
SFALSA | script.js | 0.09 | Il ritardo fra una cerniera e la successiva, in secondi: a zero si aprono tutte insieme. |
INERZIA | script.js | 0.92 | Quanto resta della spinta della mano a ogni fotogramma. |
OGNI | script.js | 2.2 | Ogni quanti secondi il cubo, da solo, gira di un quarto. |
PIATTO | script.js | 3.2 | Quanti secondi resta aperto quando si apre da solo. |
Quando usarla
Per il menu o la prima pagina di uno studio di architettura, di design o di grafica, per la pagina di un prodotto fatto a scatola, per presentare sei sezioni in una cosa sola.
Sul telefono
Lo stesso cubo: il dito lo gira con l'inerzia e la molla, un tocco senza trascinare lo apre e lo richiude. La camera misura il cubo e la croce anche sull'altezza, così stanno nella casella stretta.
Con il movimento ridotto
Con il movimento ridotto il cubo non gira da solo e non oscilla: trascinato si posa subito sulla faccia, e aprirsi e chiudersi sono una dissolvenza.
Trappole
- In WebGL le righe di LineBasicMaterial sono sempre larghe un pixel: per lo stile minimal va bene, per righe più spesse servono Line2 e LineMaterial.
- La faccia di dietro arriva capovolta dopo due quarti di giro attorno a x: la sua parola va girata di mezzo giro perché si legga a cubo chiuso (nello sviluppo resta a testa in giù, come in un vero cartamodello).
- Le parole sono disegnate in un canvas: vanno ridisegnate dopo che il carattere variabile è caricato, altrimenti restano in Helvetica.
- Il video dell'anteprima ha una durata fissa: il giro da solo è lungo e somiglia a sé stesso fra un quarto e l'altro.
Librerie
Three.js 0.178.0, GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,0 KB; le librerie: GSAP 28 KB, Three.js 174 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.
