Gli oggetti senza peso
Fisica, 3D, Hover
NuovaGratis
Torna alla libreria
Il disco di Eulero che si posa sotto la parola
Titolo animato in 3D, nello stile minimal: sotto la parola Settle un disco d'acciaio lucido gira sul suo bordo come il disco di Eulero. L'inclinazione cala piano e poi crolla, il punto di contatto gira sempre più in fretta e il disco si posa piatto con un ultimo brivido, mentre la parola trema col piano e si assesta di un pixel. Un tocco lo rimette a girare.
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>Stillpoint</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a steel Euler's disk spinning on its rim under a word: it wobbles faster and faster, lower and lower, until it
lies flat with a last shiver, and the word settles with it; a tap spins it again -->
<main class="pagina" data-pagina>
<header class="testa">
<p class="marchio" data-entra>Stillpoint</p>
<p class="testa__nota" data-entra>Desk objects in steel</p>
</header>
<h1 class="parola" data-parola aria-label="Settle">Settle</h1>
<div class="scena" data-scena aria-hidden="true">
<div class="piano" data-piano>
<div class="ombra" data-ombra></div>
<div class="contatto" data-contatto></div>
<div class="disco" data-disco></div>
</div>
</div>
<footer class="piede">
<p class="nota" data-entra data-nota>Tap to spin it again</p>
<p class="misura" data-entra><span data-tilt>Tilt 0.0°</span><span class="misura__sep"></span><span data-stato>at rest</span></p>
</footer>
</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.
23 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 disco di Eulero che si posa sotto la parola» da Animorio e adattala al mio sitoCosa fa
Stillpoint è un negozio inventato di oggetti da scrivania in acciaio. Sotto la parola Settle, grande e scura su un bianco caldo, c'è un disco d'acciaio lucido appoggiato su un piano. Parte da solo: si alza sul bordo girando, inclinato di 26 gradi, e comincia a ruotare come il disco di Eulero. Per qualche secondo sembra quasi fermo nella sua inclinazione, poi l'inclinazione crolla: il punto dove il bordo tocca il piano gira sempre più in fretta, il disco si abbassa, e intanto su sé stesso quasi non gira più, tanto che il segno inciso sulla faccia rallenta fino a fermarsi. Alla fine batte sul piano con un ultimo brivido e resta giù. La parola sopra trema appena col piano mentre il disco corre, sempre di più verso la fine, e quando il disco si posa ogni lettera scende di un pixel e torna su, una dopo l'altra. In basso l'inclinazione si legge in gradi, e lo stato passa da spinning a wobbling a settling ad at rest, in arancio, l'unico colore. La faccia d'acciaio si schiarisce quando guarda la lampada e si scurisce dall'altra parte, il riflesso resta fermo mentre il disco gira, e l'ombra si stringe e si scurisce man mano che il disco si abbassa. Dopo qualche secondo riparte da solo; un clic o un tocco lo rilancia quando si vuole, e il puntatore inclina appena il piano verso di sé.
Come funziona
Un disco fatto di fette
Il disco è CSS 3D: dodici cerchi impilati a pochi decimi di pixel l'uno dall'altro fanno lo spessore, il primo e l'ultimo sono le due facce d'acciaio. Il piano è un div steso indietro di 48 gradi con rotateX, e dentro di lui, con transform-style: preserve-3d, il disco è posato con translateZ, rotateZ(φ), rotateX(θ) e rotateZ(ψ): dove sta il punto di contatto, quanto è inclinato, quanto ha girato su sé stesso. Alzarlo di R · sin θ tiene il bordo più basso sempre sul piano.
La fisica del disco di Eulero
L'inclinazione va come la radice cubica del tempo che resta, θ = TILT · ∛(1 − t / DURATION): cala piano e crolla alla fine, come nel disco vero. La precessione cresce come 1 / √sin θ, con un tetto di 5,2 giri al secondo perché a 60 fotogrammi oltre si vedrebbe girare al contrario. Rotolando senza strisciare, il disco su sé stesso gira di ω · (1 − cos θ): quasi niente quando è basso, ed è per questo che il segno inciso si ferma mentre il contatto corre.
Il brivido e la parola
Sotto mezzo grado il disco passa alla posa: per mezzo secondo l'inclinazione è |sin(55 t)| per una caduta esponenziale, e batte sul piano sempre più piano. La parola ha un padre e un figlio per lettera: il figlio trema in fase col contatto, con un'ampiezza che cresce con la precessione, il padre fa l'assestamento finale, un pixel giù e su con back.out, una lettera ogni 35 millesimi.
La luce sull'acciaio
Ogni fotogramma si calcola la normale del disco, (sin θ sin φ, −sin θ cos φ, cos θ), e il suo prodotto con la direzione della lampada: diventa un brightness() sulla faccia. Il riflesso è un gradiente conico che gira al contrario del disco, così resta fermo rispetto alla luce, e l'acciaio spazzolato in cerchi è un gradiente radiale che si ripete.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | Settle | La parola sopra il disco. |
TILT | script.js | 26 | L'inclinazione da cui parte il disco, in gradi. |
DURATION | script.js | 7.5 | In quanti secondi il disco si posa. |
SPIN | script.js | 1 | Quanto gira veloce all'inizio. |
SIZE | script.js | 1 | La misura del disco. |
SHAKE | script.js | 1 | Quanto trema la parola mentre il disco gira. |
PAUSE | script.js | 2.4 | Quanti secondi resta fermo prima di ripartire da solo. |
LEAN | script.js | 1 | Quanto il piano si inclina verso il puntatore. |
Quando usarla
Come titolo d'apertura di un negozio di oggetti di design, di uno studio di prodotto o di un marchio di orologi e accessori in metallo; dietro a una parola che parla di calma, di equilibrio o di attenzione, per una app di meditazione o un ritiro; come pagina di presentazione di un oggetto solo, dove il movimento racconta la qualità del materiale.
Sul telefono
La stessa animazione: il disco e la parola si misurano sulla larghezza e sull'altezza, quindi stanno nella casella anche su un telefono piccolo. Il tocco rilancia il disco; il piano non si inclina, perché senza puntatore non c'è dove guardare.
Con il movimento ridotto
Il disco è già posato, fermo e piatto, la parola è al suo posto e lo stato dice at rest: niente rotazione, niente tremito. Le scritte e il disco compaiono in dissolvenza.
Trappole
- Con la camera troppo radente (piano steso a 64 gradi) il disco inclinato verso chi guarda si vede di taglio e sembra sospeso sopra la sua ombra: a 48 gradi si legge sempre appoggiato.
- La precessione vera cresce senza limite quando il disco si abbassa: oltre i 5 giri al secondo, a 60 fotogrammi, l'occhio la vede rallentare o girare al contrario. Serve un tetto.
- Un'ombra di contatto tonda, appena fuori dal bordo, si legge come un puntino: va schiacciata lungo il bordo e messa appena dentro.
- Un filtro brightness() su un elemento con preserve-3d lo appiattisce: va solo sulle facce, che dentro hanno solo cose 2D.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,4 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 24 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.
