Il globo dei nomi
3D, Testo, Fisica
NuovaGratis
Torna alla libreria
Il cubo di filo
Un cubo fatto solo di spigoli sottili, nello stile minimal, con una parola su ogni faccia. Lo prendi e lo giri: lasciato andare continua a girare con la velocità della mano, rallenta e vicino a una faccia lo prende una calamita, che lo fa scattare dritto con un piccolo assestamento. La parola che ti guarda prende peso e il colore d’accento; attraverso il filo si vedono le altre, sottili e a specchio.
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 wire cube</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>
<main class="stage" data-stage tabindex="0" aria-label="A wire cube with a word on every face. Drag it, or use the arrow keys, to turn it.">
<!-- the wire: twelve hairline edges drawn on a canvas with the same perspective as the faces. Edges you could
not see on a real cube are dashed, like hidden lines in a technical drawing -->
<canvas class="wire" data-wire aria-hidden="true"></canvas>
<!-- the cube: six empty faces in CSS 3D, one word on each. The script turns the cube and gives weight to the
word that faces you -->
<div class="scene" data-scene aria-hidden="true">
<div class="cube" data-cube></div>
</div>
<p class="hint" data-hint>Drag to turn</p>
<p class="sr" data-live aria-live="polite"></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.
17 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 di filo» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo una penna invisibile disegna un cubo di spigoli sottili, a partire da un angolo, tre linee alla volta, mentre il cubo gira piano su sé stesso; le parole salgono dentro le loro facce una dopo l’altra. Poi il cubo arretra di un soffio, parte con un colpo, fa un giro intero e un po’ di più, rallenta e la calamita lo prende sulla prima faccia: passa il punto di un capello e torna, e «Think» diventa nera piena e poi vermiglia. Gli spigoli che un cubo vero nasconderebbe sono tratteggiati, come in un disegno tecnico, e cambiano da pieni a tratteggiati mentre gira. Le parole sulle facce di lato sono sottilissime, quelle dietro si vedono a specchio attraverso il filo, e mentre il cubo corre tutte si stringono sull’asse della larghezza del carattere. Lasciato solo, il cubo gira da sé di faccia in faccia (una volta con un giro e un quarto, una volta capovolgendosi) e torna alla prima. Si prende col mouse o col dito e si lancia: la velocità della mano diventa inerzia, e quando il cubo si ferma storto la parola si raddrizza nella sua faccia con un piccolo rimbalzo. Il mouse, sopra, lo fa appena inclinare verso di sé; le frecce della tastiera lo girano di un quarto.
Come funziona
Un cubo, sei facce vuote e un filo disegnato a parte
Le sei facce sono div quadrati in CSS 3D (preserve-3d, con la prospettiva sul contenitore), ognuna con la sua parola: la loro trasformazione è una matrix3d fatta con i tre versi della faccia (destra, giù, fuori) e la spinta di mezzo lato. Gli spigoli invece stanno su un canvas: gli otto angoli si girano con la stessa matrice e si proiettano con la stessa prospettiva del CSS (x per P diviso P meno z), così il filo e le parole combaciano. Uno spigolo è pieno se almeno una delle sue due facce si vede dall’occhio (prodotto scalare fra la normale e la direzione verso l’occhio, prospettiva compresa), altrimenti è tratteggiato, con una dissolvenza stretta per passare dall’uno all’altro senza scatti.
Le rotazioni sono quaternioni
L’orientamento del cubo è un quaternione q e la sua velocità un vettore w (asse e radianti al secondo). A ogni passo di fisica, 1/240 di secondo, q diventa exp(w·dt)·q e l’attrito moltiplica w per e alla meno attrito per dt. Il trascinamento trasforma lo spostamento del puntatore in una rotazione intorno a un asse dello schermo (verso destra gira intorno a y, verso il basso intorno a x), riportata nello spazio del cubo togliendo l’inclinazione dell’occhio; la velocità al rilascio è la somma delle rotazioni degli ultimi 90 millisecondi divisa per il tempo.
La calamita è una molla verso la posa più vicina
Un cubo può riposare in 24 modi (ogni faccia davanti, girata in quattro modi): si costruiscono una volta come quaternioni. Quando la velocità scende sotto 2,2 rad/s si sceglie la posa col prodotto scalare più grande con q, e da lì una molla smorzata tira: lo scarto è il logaritmo di q per l’inversa della posa, l’accelerazione è meno K per lo scarto meno C per w, con lo smorzamento scelto da SNAP. La molla prende la velocità che il cubo aveva, quindi lo porta oltre di un capello e lo riporta. Quando scarto e velocità sono minuscoli, q diventa esattamente la posa e la fisica si ferma.
La parola che ti guarda prende peso
A ogni fotogramma si guarda quanto ogni faccia è rivolta verso chi guarda (la componente z della sua normale): da lì vengono il peso (wght da 170 a WEIGHT, con un quadrato perché cresca alla fine), l’opacità (sottile di lato, a specchio e quasi sparita dietro) e la larghezza, che si stringe con la velocità. Quando la calamita scatta, un tween con elastic.out aggiunge l’ultimo terzo di peso, un po’ oltre e indietro, e un altro porta il colore all’accento. Se la posa scelta lascia la parola storta, prima che la calamita finisca la parola gira nella sua faccia del multiplo di 90 gradi giusto, con back.out.
La regia è una timeline GSAP
L’apertura è una timeline: gli spigoli crescono dall’angolo in alto a sinistra a gruppi (lo sfalsamento segue la distanza dall’angolo), le parole salgono nelle facce, poi una spinta. Ogni spinta è uguale: un tween di un ventesimo di radiante all’indietro, poi una velocità calcolata perché l’attrito fermi il cubo a un quinto di radiante dalla faccia voluta (v0 = attrito per la strada + 2,2), dove la calamita lo prende. Il giro da solo è una timeline che si ripete: quattro facce intorno, una volta con un giro e un quarto, poi sopra, sotto e di nuovo la prima; si ferma al primo tocco e riparte dopo sei secondi di quiete.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORDS | script.js | ['Think', 'Draw', 'Build', 'Test', 'Ship', 'Rest'] | Le sei parole, una per faccia: davanti, destra, dietro, sinistra, sopra, sotto. Ognuna si allarga o si stringe sull’asse del carattere per riempire la faccia. |
WEIGHT | script.js | 780 | Il peso che prende la parola che ti guarda, da 300 a 900. Le altre restano sottilissime. |
GLIDE | script.js | 1 | Quanto continua a girare il cubo dopo che lo lasci: 2 il doppio, 0.5 la metà. |
SNAP | script.js | 0.5 | Lo scatto della calamita: 0 si posa morbido, 1 supera la faccia e torna indietro. |
TILT | script.js | 14 | I gradi da cui l’occhio guarda il cubo, dall’alto e di lato: 0 una faccia dritta davanti. |
HOLD | script.js | 1.5 | Quanti secondi resta ogni faccia quando il cubo gira da solo. |
SIZE | script.js | 0.42 | Il lato del cubo, in parte della pagina. |
AUTOPLAY | script.js | true | Se il cubo gira da solo finché nessuno lo prende (e di nuovo dopo sei secondi). Con false aspetta la mano. |
Quando usarla
Per l’apertura di uno studio o di un portfolio che racconta il suo metodo in poche parole (pensare, disegnare, costruire…), per i valori di un marchio o le parti di un’offerta in una landing; anche come oggetto da toccare in una pagina «chi siamo». Funziona con parole corte, da quattro a sei lettere, e un solo colore d’accento.
Sul telefono
La stessa animazione: il cubo si misura sul lato corto dello schermo, abbastanza piccolo perché nemmeno l’angolo più vicino all’occhio esca mai mentre gira, si trascina col dito con la stessa inerzia e la stessa calamita, e la pagina non scorre mentre lo giri.
Con il movimento ridotto
Niente gira e niente si sposta: il cubo compare in dissolvenza già fermo sulla prima faccia, e ogni giro (da solo, col trascinamento o con le frecce) è una dissolvenza verso la faccia accanto, già al suo posto con la parola piena e colorata.
Trappole
- La parola che prendeva peso solo quando la molla si era fermata del tutto arrivava mezzo secondo dopo lo scatto, e sembrava staccata: ora si accende quando lo scarto scende sotto un cinquantesimo di radiante, cioè nel momento in cui la calamita «clicca».
- Ridare il colore anche a una parola già scelta, ma ancora a metà della sua dissolvenza, la faceva lampeggiare: si riaccende solo se cambia faccia.
- Le facce in 3D vengono dipinte alla loro misura e poi ingrandite dalla prospettiva: la parola davanti, la più vicina all’occhio, usciva morbida. È scritta al doppio della grandezza e rimpicciolita a metà nella trasformazione.
- Un giro di un quarto con solo l’attrito e la molla da fermo partiva di colpo, come colpito: un piccolo arretramento prima della spinta (un ventesimo di radiante, sine.inOut) fa capire da dove viene il movimento.
- Con la calamita verso tutte e 24 le pose, il cubo poteva fermarsi con la faccia giusta ma girata di lato, e la parola si leggeva in verticale: la parola si raddrizza da sola nella sua faccia, girando dalla parte più corta.
Librerie
GSAP 3.15.0, Archivo (font variabile, assi wdth e wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 15 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.
