Il rilievo a trattini
WebGL, 3D, Hover
Gratis
Torna alla libreria
L’orologio in vista esplosa allo scroll
Scorri dentro l’anteprima
La pagina prodotto di un orologiaio inventato, nello stile ricco e in WebGL: un orologio meccanico in 3D, acciaio, vetro zaffiro, quadrante verde soleil e cinturino di cuoio, che scendendo si apre pezzo per pezzo in vista esplosa, con le didascalie sottili su ogni parte, e poi si gira per mostrare il movimento che lavora: ruote, scappamento, bilanciere e il rotore d’oro che oscilla con la gravità.
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>Kestrel Field 38</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@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",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.178.0/examples/jsm/"
} }
</script>
</head>
<body>
<!-- the product page of a made-up watchmaker, Kestrel. The stage sticks while you scroll: a mechanical watch,
drawn in 3D, comes apart layer by layer (crystal, bezel, hands, dial, case, movement, rotor, caseback), then
turns over to show the movement ticking; the pointer or a finger tilts it, and the rotor swings with it -->
<main>
<section class="vista" data-vista>
<div class="palco" data-palco>
<canvas class="tela" data-tela role="img" aria-label="A mechanical wristwatch coming apart in an exploded view as you scroll"></canvas>
<svg class="fili" data-fili aria-hidden="true"></svg>
<div class="etichette" data-etichette aria-hidden="true"></div>
<header class="testata">
<p class="marchio">
<svg viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="16" r="12.5"/><path d="M16 8v8l5 3"/></svg>
<span data-marchio>Kestrel</span>
</p>
<p class="sotto">Watchworks</p>
</header>
<div class="racconto" data-racconto>
<div class="capitolo" data-capitolo>
<p class="occhiello">Field 38 Automatic</p>
<h1 class="titolo">A watch you can <em>read</em> inside out.</h1>
</div>
<div class="capitolo" data-capitolo>
<p class="occhiello">Seven layers</p>
<h2 class="titolo">Every part, <em>apart.</em></h2>
</div>
<div class="capitolo" data-capitolo>
<p class="occhiello">Turn it over</p>
<h2 class="titolo">A heart that beats <em>eight</em> times a second.</h2>
</div>
<div class="capitolo" data-capitolo>
<p class="occhiello">Calibre K-21</p>
<h2 class="titolo">Wound by your <em>wrist.</em></h2>
</div>
</div>
<p class="nota" data-nota>Scroll to take it apart</p>
</div>
</section>
<section class="ordina">
<p class="occhiello">Kestrel Field 38 · Automatic · 38 mm</p>
<p class="prezzo">€1,480</p>
<a class="pillola" href="#" data-pillola><span>Reserve yours</span></a>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.
37 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 «L’orologio in vista esplosa allo scroll» da Animorio e adattala al mio sitoCosa fa
Su un fondo di carta calda c’è un orologio meccanico disegnato in 3D, inclinato per mostrare il quadrante: cassa d’acciaio satinato con le anse lucide, lunetta lucida, vetro zaffiro bombato che riflette la stanza, quadrante verde soleil con gli indici d’oro applicati e la luminova, lancette d’oro e la lancetta dei secondi arancione che batte otto volte al secondo, corona zigrinata e cinturino di cuoio con le cuciture, i fori e la fibbia. All’apertura sale dal basso e si assesta su una molla. Scendendo, l’orologio si apre lungo il suo asse, pezzo per pezzo: il vetro e la lunetta salgono, poi le tre lancette, il quadrante; sotto la cassa scendono il movimento, il rotore e il fondello, e la corona esce sul suo stelo. Ogni strato ondeggia un poco per conto suo, e accanto ai pezzi compaiono le didascalie, con un punto sul pezzo e un filo sottile. Poi l’orologio si gira e mostra il movimento che lavora: le ruote dentate girano, la ruota di scappamento scatta a ogni battito con l’ancora che dondola, il bilanciere oscilla con la spirale azzurrata, sotto i ponti a Côtes de Genève con i rubini e le viti azzurrate; il rotore d’oro inciso col marchio oscilla verso il basso ogni volta che l’orologio si inclina. Il puntatore o il dito inclinano l’orologio su una molla; quando nessuno lo tocca ondeggia piano da solo. In fondo, la riga per ordinarlo.
Come funziona
Un orologio fatto di forme semplici
Tutto è geometria di Three.js costruita nel codice: la cassa, la lunetta e il fondello sono profili girati attorno all’asse (LatheGeometry), il vetro è una calotta di sfera molto larga, il quadrante un cerchio, le lancette, le ruote dentate, i ponti e il rotore sono forme 2D estruse (ExtrudeGeometry). Le ruote hanno i denti disegnati punto per punto e i raggi ritagliati come buchi della forma.
Materiali che sembrano veri
La luce viene da una stanza finta (RoomEnvironment) passata da PMREMGenerator: è lei che fa riflettere acciaio, oro e vetro. L’acciaio è un metallo con la ruvidità bassa per le parti lucide e più alta per il satinato; il vetro è un MeshPhysicalMaterial trasparente con clearcoat; quadrante, perlage, Côtes de Genève, cuoio, incisioni del rotore e del fondello sono texture dipinte in canvas 2D.
Lo scroll apre l’orologio
ScrollTrigger con scrub porta un numero da 0 a 1. Da lì vengono due curve: quanto si apre (fra 0,1 e 0,46) e quanto si gira (fra 0,55 e 0,8). Ogni pezzo sta in un gruppo con la sua distanza lungo l’asse dell’orologio: la posizione è distanza per apertura, più un piccolo ondeggiare col suo seno. La camera si allontana mentre i pezzi si aprono, così tutto resta nella casella.
Il movimento che lavora
Tutto segue il ticker di GSAP. La lancetta dei secondi va a scatti, BEATS al secondo; la ruota di scappamento scatta sugli stessi battiti, l’ancora dondola a ogni battito, il bilanciere oscilla col seno. Il rotore è un pendolo: si prende la gravità del mondo, la si porta dentro l’orologio con il quaternione inverso, e il rotore viene spinto verso di lei con una molla smorzata. Quando l’orologio si gira o si inclina, il rotore oscilla davvero.
Le didascalie
Ogni didascalia ha un punto sul suo pezzo, in coordinate dell’orologio. A ogni fotogramma il punto si porta nel mondo (localToWorld) e poi sullo schermo (project), e lì si mettono il pallino del filo, la linea SVG e le parole, a destra o a sinistra secondo il lato, sempre dentro lo schermo. Quelle del davanti compaiono a orologio aperto, quelle del retro quando si è girato.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BRAND | script.js | 'Kestrel' | Il marchio sul quadrante, sul rotore, sul fondello e in testa alla pagina. |
SPREAD | script.js | 1 | Quanto si allontanano i pezzi quando l’orologio si apre. |
TILT | script.js | 1 | Quanto il puntatore o il dito inclinano l’orologio. |
BEATS | script.js | 8 | Quante volte al secondo batte la lancetta dei secondi (8 è un movimento a 4 Hz). |
SPIN | script.js | 1 | Quanto girano veloci le ruote del movimento e quanto oscilla il bilanciere. |
SWING | script.js | 1 | Quanto il rotore oscilla libero con la gravità. |
FLIP | script.js | 1 | Quanto si gira l’orologio per mostrare il movimento (1 = mezzo giro). |
FLOAT | script.js | 1 | Quanto ondeggia ogni pezzo per conto suo quando l’orologio è aperto. |
Quando usarla
Per la pagina prodotto o l’intestazione di un orologiaio, di un negozio di orologi o di gioielli, e in generale per presentare un prodotto fatto di parti (una macchina fotografica, un paio di cuffie, una penna stilografica): la vista esplosa allo scroll racconta come è fatto e quanto è curato.
Sul telefono
La stessa animazione con le misure adattate: le parole stanno in alto, l’orologio sotto, e la camera si allontana quanto serve perché anche aperto stia tutto nella casella; il dito inclina l’orologio trascinando di lato, e la pagina continua a scorrere.
Con il movimento ridotto
Niente scorrimento lungo e niente movimento: l’orologio è già aperto e fermo, con le didascalie del davanti, le lancette ferme e il movimento immobile.
Trappole
- La camera ha un setViewOffset per spostare l’orologio a destra delle parole (o sotto, sul telefono): la proiezione delle didascalie ne tiene già conto, perché project() usa la stessa matrice.
- Il vetro trasparente non scrive nel depth buffer (depthWrite false), se no copre le lancette che stanno sotto.
- Le texture dipinte in canvas vanno segnate come sRGB, se no con la gestione dei colori escono slavate.
- I font del quadrante si disegnano nel canvas solo quando sono caricati: si aspetta document.fonts.load prima di dipingere.
Librerie
Three.js 0.178.0, GSAP 3.15.0, Lenis 1.3.26, Fraunces (font variabile) 5.3.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 14 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB, Three.js + RoomEnvironment 176 KB.
Collaudo
Provata il 23 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.
