La gru dei peluche
3D, Hover, Fisica
NuovaGratis
Torna alla libreria
Gli oggetti senza peso
Un titolo enorme scorre sulla pagina come un nastro, e davanti e dietro le sue lettere galleggiano cubi di vetro, zucchero, caramella, gomma e cromo: vanno alla deriva girando, rallentano fino a una crociera tranquilla, rimbalzano sui bordi e il rimbalzo diventa una rotazione. Il puntatore li spinge via.
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 weightless objects</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/schibsted-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the "not found" page of a made-up shop: a giant title runs across it like a ticker, and in front of it and
behind it little cubes float with no weight, turning, drifting, bouncing off the edges; the pointer pushes them -->
<div class="pagina">
<header class="testa">
<span class="testa__marchio">Paper Moon</span>
<nav class="testa__voci" aria-label="Main">
<a href="#">Shop</a>
<a href="#">Journal</a>
<a href="#">Contact</a>
</nav>
</header>
<main class="cielo" data-cielo>
<h1 class="sr">Page not found</h1>
<div class="nastro" data-nastro aria-hidden="true">
<ul class="nastro__fila" data-fila>
<li class="nastro__voce" data-voce>Nothing here yet<svg class="nastro__segno" viewBox="0 0 40 40"><path d="M20 2 25 15 38 20 25 25 20 38 15 25 2 20 15 15Z"/></svg></li>
</ul>
</div>
<div class="oggetto" data-oggetto data-taglia="large" data-materiale="glass" data-livello="davanti"></div>
<div class="oggetto" data-oggetto data-taglia="medium" data-materiale="dice" data-livello="dietro"></div>
<div class="oggetto" data-oggetto data-taglia="small" data-materiale="candy" data-livello="davanti"></div>
<div class="oggetto" data-oggetto data-taglia="medium" data-materiale="sugar" data-livello="davanti"></div>
<div class="oggetto" data-oggetto data-taglia="small" data-materiale="rubber" data-livello="dietro"></div>
<div class="oggetto" data-oggetto data-taglia="large" data-materiale="chrome" data-livello="dietro"></div>
<div class="oggetto" data-oggetto data-taglia="small" data-materiale="glass" data-livello="davanti"></div>
</main>
<footer class="piede">
<a href="#">Back to the shop</a>
<span>Error 404</span>
</footer>
</div>
<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 «Gli oggetti senza peso» da Animorio e adattala al mio sitoCosa fa
La pagina «non trovata» di un negozio inventato, Paper Moon, su un rosa acceso: in alto il nome e tre voci, in basso «Back to the shop» ed «Error 404». In mezzo scorre da destra a sinistra, senza fine, la scritta enorme «Nothing here yet» con una stella a quattro punte fra una copia e l’altra. Sette cubi in tre misure compaiono con un piccolo scatto, uno dopo l’altro: due di vetro azzurrato, un dado, una zolletta di zucchero, una caramella a righe, uno di gomma verde e uno cromato. Ognuno gira su sé stesso in 3D senza fermarsi e intanto va alla deriva sulla pagina in una direzione a caso, ruotando anche nel piano; parte un po’ più veloce e rallenta fino a una velocità tranquilla che poi tiene. Quando tocca un bordo rimbalza, e il colpo lo fa girare più forte o al contrario. Alcuni passano davanti alle lettere, altri dietro. Col puntatore vicino un cubo viene spinto via e si mette a girare.
Come funziona
Posizioni in frazioni di pagina
Ogni cubo ha un centro fra 0 e 1 in larghezza e in altezza, una velocità nelle stesse unità al millisecondo, un angolo e una rotazione in gradi al millisecondo. Così gli stessi numeri valgono a ogni misura, e allargando la finestra i cubi restano dove sono. Lo script muove e gira solo la scatola di ogni cubo, con un translate3d e un rotate.
La crociera
Ogni cubo parte in una direzione a caso a una velocità fra 0,00006 e 0,00014, e a ogni sessantesimo di secondo tiene il 99,6% della velocità che supera la crociera di 0,0001: rallenta fino a lì e poi non si ferma più. La rotazione parte fino a 0,02 gradi al millisecondo e si smorza allo stesso modo.
I bordi e il rimbalzo
Il bordo che conta è quello della scatola del cubo girata del suo angolo: la mezza misura vale metà lato per la somma di |cos| e |sin|. Toccando un muro la velocità che va contro il muro si rovescia, e la velocità lungo il muro, moltiplicata per 150, si aggiunge alla rotazione; la rotazione non supera mai 0,15 gradi al millisecondo.
La spinta del puntatore
Se il puntatore è a meno di 0,12 dal centro di un cubo, il cubo riceve una spinta in direzione opposta, forte quanto (1 − distanza / 0,12) × 0,000001 per millisecondo, e una rotazione nel verso della spinta. Le distanze sono in frazioni di pagina, quindi la zona che spinge è un poco più larga che alta, come nel sito.
Il nastro e i cubi in 3D
Il titolo è una fila di copie della stessa scritta: tante quante servono a coprire la pagina e una in più, spostate di 0,15 pixel al millisecondo e riportate indietro della larghezza di una copia; quelle fuori dalla pagina si nascondono. Ogni cubo è fatto di sei facce in CSS 3D che girano con un’animazione su un asse storto, con una luce finta: ogni faccia è più chiara o più scura di un tanto fisso.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SPEED | script.js | [0.00006, 0.00014] | La velocità di partenza, a caso fra le due, in pagine al millisecondo. |
CRUISE | script.js | 0.0001 | La velocità a cui ogni cubo rallenta e che poi tiene. |
DRAG | script.js | 0.996 | Quanta velocità e rotazione in più si tengono a ogni sessantesimo di secondo. |
SPIN | script.js | 0.02 | La rotazione di partenza, al massimo, in gradi al millisecondo. |
SPIN_MAX | script.js | 0.15 | La rotazione più veloce che un cubo può avere. |
PUSH | script.js | [0.12, 0.000001] | Il puntatore: da quanto vicino spinge, in pagine, e quanto forte. |
KICK | script.js | 150 | Quanto un rimbalzo o una spinta diventano rotazione. |
TICKER | script.js | 0.15 | Quanto in fretta scorre il titolo, in pixel al millisecondo. |
Quando usarla
Per una pagina d’errore, la testata di un archivio o la pagina di uno studio o di un negozio che vuole un po’ di gioco senza disturbare: gli oggetti vanno piano, non coprono niente a lungo e si possono spingere.
Sul telefono
I cubi sono più piccoli e il titolo più basso; col dito che scorre sulla pagina i cubi vicini vengono spinti come col puntatore.
Con il movimento ridotto
Il titolo sta fermo, i cubi compaiono con una dissolvenza al loro posto, girati di un angolo fisso, e non si muovono.
Trappole
- Nel sito lo smorzamento è di 0,996 a fotogramma, quindi su uno schermo a 120 Hz i cubi rallentano il doppio più in fretta: qui vale 0,996 ogni sessantesimo di secondo, elevato al tempo passato.
- Il bordo di un cubo girato non è quello del suo lato: senza la scatola girata un cubo di traverso esce per metà dalla pagina prima di rimbalzare.
- Il cubo in 3D gira con un’animazione CSS e la sua scatola con lo script: se fossero lo stesso elemento il transform dello script cancellerebbe la rotazione 3D.
- Le copie del titolo si contano dopo che il carattere è caricato: col carattere di ripiego la scritta è più corta e in fondo al nastro resterebbe un buco.
- Le facce di vetro sono semitrasparenti e si vedono una attraverso l’altra: per questo hanno backface-visibility visibile, che per gli altri materiali non cambia niente.
Librerie
Schibsted Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,8 KB, e non servono librerie.
Collaudo
Provata il 6 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.
