La parola di vetro
WebGL, 3D, Scroll, Testo
Gratis
Torna alla libreria
La ruota di carbonio allo scroll
Scorri dentro l’anteprima
La presentazione di un prodotto in WebGL, nello stile minimal: una ruota da bici in carbonio disegnata in 3D, sola al centro del palco. Scendendo passa per cinque pose, la camera si avvicina al mozzo e al cerchio, lo studio intorno gira e i riflessi scorrono sulla vernice trasparente, e a un quinto della pagina il fondo passa dal nero all’argento.
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>RAGGIO C50</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/hanken-grotesk@5.3.0/index.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>
<!-- a made-up maker of handmade carbon wheels, RAGGIO. The stage sticks while you scroll: one carbon bicycle wheel,
drawn in 3D, passes through five poses while the camera moves in to the hub and the rim, the studio reflections
slide over the clear coat, and the background turns from black to silver -->
<main>
<section class="vista" data-vista>
<div class="palco" data-palco>
<canvas class="tela" data-tela role="img" aria-label="A carbon bicycle wheel turning in 3D as you scroll"></canvas>
<!-- if WebGL is missing: the same wheel, drawn flat -->
<svg class="ripiego" data-ripiego viewBox="-110 -110 220 220" aria-hidden="true">
<circle r="100" class="ripiego-cerchio"/>
<circle r="86" class="ripiego-interno"/>
<g class="ripiego-raggi" data-ripiego-raggi></g>
<circle r="9" class="ripiego-mozzo"/>
</svg>
<svg class="mirino" data-mirino viewBox="0 0 56 56" aria-hidden="true">
<path d="M28 0v18M28 38v18M0 28h18M38 28h18"/>
</svg>
<nav class="indice" data-indice aria-hidden="true">
<span class="indice-linea"><span class="indice-pieno" data-pieno></span></span>
<ol>
<li>Philosophy</li>
<li>Craft</li>
<li>Hub</li>
<li>Rim</li>
<li>Ride</li>
</ol>
</nav>
<div class="racconto">
<div class="capitolo" data-capitolo>
<p class="occhiello">Philosophy</p>
<h1 class="titolo">Lighter is a decision.</h1>
<p class="riga">Every gram we leave out is one you never carry uphill.</p>
</div>
<div class="capitolo" data-capitolo>
<p class="occhiello">Craft</p>
<h2 class="titolo">Laid up one ply at a time.</h2>
<p class="riga">Each rim is wrapped by hand, then cured in a single piece.</p>
</div>
<div class="capitolo" data-capitolo>
<p class="occhiello">Hub</p>
<h2 class="titolo">Quiet until you push.</h2>
<p class="riga">Ceramic bearings in a black anodised shell, twenty-four spokes in tension.</p>
</div>
<div class="capitolo" data-capitolo>
<p class="occhiello">Rim</p>
<h2 class="titolo">Fifty millimetres of air.</h2>
<p class="riga">A deep carbon section that cuts the wind and keeps its shape.</p>
</div>
<div class="capitolo" data-capitolo>
<p class="occhiello">Ride</p>
<h2 class="titolo"><span data-marchio>RAGGIO</span> C50</h2>
<p class="riga">Handmade carbon wheels. Built to be forgotten under you.</p>
</div>
</div>
<p class="nota" data-nota>Scroll</p>
</div>
</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.
35 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 «La ruota di carbonio allo scroll» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero c’è una ruota da bici in carbonio, sola al centro: un cerchio alto con la trama a spina del carbonio sotto la vernice trasparente e il marchio RAGGIO chiaro sul fianco, ventiquattro raggi piatti neri con le teste e i nippli, il mozzo nero anodizzato con le flange, il perno lucido e la valvola fra due raggi. All’apertura compare dopo mezzo secondo e in tre secondi gira fino alla sua prima posa. Scendendo la ruota passa per cinque pose, con una breve sosta su ognuna: di tre quarti, poi di taglio, poi la camera si avvicina al mozzo, poi al cerchio visto di profilo, e alla fine la ruota intera, di fronte. Intanto rotola in avanti, la tenuta del cuscinetto gira un po’ più veloce del cerchio, e lo studio intorno ruota, così i riflessi scorrono sulla vernice; a un quinto della pagina il fondo passa dal nero all’argento e le scritte dal bianco al quasi nero. Per ogni posa una parola, un titolo corto e una riga, che entrano in dissolvenza; a sinistra l’indice delle cinque soste con la linea che si riempie, e un mirino sottile sul mozzo. La ruota galleggia sempre di un capello.
Come funziona
Una ruota fatta di profili girati
Cerchio, mozzo, tenute e perno sono profili 2D girati attorno all’asse (LatheGeometry) e poi voltati perché l’asse vada verso la camera. Il profilo del cerchio ha il letto del copertone coi due ganci, la spalla larga e i fianchi che si stringono fino al naso tondo. I raggi sono un InstancedMesh: ogni lama va dal mozzo al naso del cerchio, girata di piatto nel senso della corsa, a fianchi alterni.
Il carbonio sotto la vernice
La trama a spina 2x2 è dipinta in un canvas: ogni fascio di fibre passa sopra due e sotto due, con un riflesso morbido di traverso e le righe sottili delle fibre. La stessa trama in grigio fa da ruvidità e da rilievo, e sopra c’è un clearcoat quasi liscio: è lui che fa i riflessi lunghi. La luce viene da uno studio finto (RoomEnvironment) passato da PMREMGenerator.
Cinque pose sullo scroll
Ogni posa è un oggetto con l’inclinazione della ruota, quanto è vicina la camera, il punto da guardare e la rotazione dello studio (environmentRotation, coi gradi dell’originale). Una timeline in pausa va da una posa all’altra con power1.inOut, con una sosta fra l’una e l’altra; lo scroll la porta avanti con mezzo secondo di ritardo, come lo scrub 0,5 del sito.
La camera che inquadra
A ogni fotogramma il punto da guardare (il mozzo, la cima del cerchio) si porta nel mondo con localToWorld, e la camera ci si mette davanti alla distanza della posa. La distanza si calcola dall’angolo di campo e dalla forma della finestra, così la ruota intera sta sempre nella casella; un setViewOffset la alza un poco sul telefono, dove le parole stanno sotto.
Il fondo che cambia
Il fondo e le scritte sono due color-mix del CSS fra il nero e l’argento, comandati da una sola variabile, --l. Quando lo scroll passa SILVER_AT, GSAP porta --l da 0 a 1 in 1,1 secondi; tornando su la riporta a 0.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BRAND | script.js | 'RAGGIO' | Il marchio sul fianco del cerchio e nelle ultime parole. |
SPOKES | script.js | 24 | Quanti raggi ha la ruota. |
SPIN | script.js | 1 | Quanto rotola la ruota mentre scendi (1 = tre quarti di giro). |
FLOAT | script.js | 1 | Quanto galleggia la ruota su e giù (1 = di un capello, come sull’originale). |
REFLECTIONS | script.js | 1 | Quanto gira lo studio attorno alla ruota, cioè quanto scorrono i riflessi. |
GLOSS | script.js | 1 | Quanto è lucida la vernice trasparente sul carbonio. |
SILVER_AT | script.js | 0.19 | In che punto della pagina il fondo passa dal nero all’argento (da 0 a 1). |
Quando usarla
Per l’apertura o la pagina prodotto di chi fa ruote, bici, componenti o qualunque oggetto tecnico da guardare da vicino (una cuffia, una macchina fotografica, un orologio): le pose allo scroll raccontano il prodotto parte per parte senza riempire la pagina.
Sul telefono
La stessa animazione con le misure adattate: le parole stanno in basso, la ruota sopra di loro, e la camera si allontana quanto serve perché la ruota intera stia nella casella; l’indice a sinistra si nasconde.
Con il movimento ridotto
La ruota resta ferma nella sua prima posa, senza rotolare né galleggiare; scendendo cambiano solo le parole, in dissolvenza, e il fondo passa dal nero all’argento.
Trappole
- La timeline delle pose usa fromTo e resta in pausa: se registrasse i valori di partenza mentre gira l’entrata, tornando su la ruota andrebbe nella posa sbagliata.
- La scritta sul fianco è una pelle sottile appena davanti al cerchio, trasparente, che non scrive nel depth buffer e ha il polygonOffset: senza, sfarfalla col carbonio sotto.
- Le texture dipinte in canvas vanno segnate sRGB, e la trama ha l’anisotropia al massimo: guardato di taglio, il carbonio senza diventa una macchia grigia.
- scene.environmentRotation c’è da Three r162: con versioni più vecchie i riflessi non girano.
Librerie
Three.js 0.178.0, GSAP 3.15.0, Lenis 1.3.26, Hanken Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB, Three.js + RoomEnvironment 176 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.
