Lightweight, com’è fatto: la ruota di carbonio che si scorre, i titoli che si ribaltano e i cerchi col mirino

Lightweight è il sito di un marchio tedesco di ruote da bici da corsa in carbonio, quelle che il sito dice fatte a mano in Germania, in un composito tutto loro e con un disegno a monoscocca che il marchio chiama Rim-to-Rim. Le pagine sono quelle di un prodotto: le ruote, il manubrio HPC Cockpit, chi sono, i rivenditori, l’assistenza, in inglese e in tedesco. Ed è un sito che parla come parlano le ruote che vende: quasi niente colore. Si apre sul nero, #000000, e dopo il primo capitolo passa a un argento freddo, #C6C7CF, con i fondi chiari #E5E5E5, le linee grigie #717170 e i testi quasi neri, #191919, o bianchi sul nero. Il carattere è uno solo, ABC Repro, un grottesco largo, maiuscolo nei titoli; il marchio è un corsivo. Su Awwwards è stato Sito del giorno il 15 febbraio 2026, con 7,24 dalla giuria e il premio degli sviluppatori, 7,17. Lo firma VKZ Studio.

È un sito Next.js 15.5, con React 19.2. La ruota è Three.js, la revisione 176, montata con React Three Fiber e gli aiuti di drei: il modello si carica in glTF compresso con Draco, la luce viene da una mappa d’ambiente EXR da studio. Le animazioni sono di GSAP 3.13, con ScrollTrigger, SplitText, Draggable e Inertia, e anche lo scorrimento morbido è di GSAP, ScrollSmoother, con una morbidezza di mezzo secondo; sul computer ha in più una velocità di 0,5, cioè la pagina scorre la metà di quanto gira la rotella, e sul telefono il dito resta diretto. I valori che citiamo vengono dal codice pubblico, i pezzi minificati che il sito carica, rimessi in ordine.

Lo smontiamo in tre momenti, con una demo rifatta da zero per ognuno, per un marchio di ruote inventato, RAGGIO: il modello, le parole e il codice sono nostri. Dal sito abbiamo preso le idee e, dove lo diciamo, i numeri.

La ruota di carbonio che si scorre

La home è una sezione sola, lunghissima, e per tutta la sua lunghezza lo schermo resta fermo: al centro c’è una ruota nera, e scorrendo la si guarda da vicino. Prima sale dal basso fuori dal buio, con il marchio sul cerchio; poi la camera si avvicina al mozzo, gira attorno ai raggi, si mette di fianco e vede il cerchio diventare una lama sottile, e alla fine la ruota è inclinata come se stesse curvando. A ogni sosta, di fianco alla ruota o al centro, compare un capitolo: Performance engineered, Handmade in Germany, Alpha Rib Technology.

La sezione è alta cinque volte lo schermo, 500lvh (sul telefono 750), e il palco con la ruota è fissato con il pin di ScrollTrigger dal suo inizio alla sua fine. La ruota non la muove il codice: i suoi movimenti sono già nel modello, sei animazioni registrate nel file glTF, per le due metà del cerchio e per i gruppi che la girano e la spostano, e lo scorrimento sposta solo la testina sul loro nastro. Il nastro dura 25 secondi, diviso in sei parti da 25 sesti, circa 4,17 secondi l’una. L’apertura suona da sola la prima parte, da 0 alla prima divisione, in tre secondi con power1.out e dopo mezzo secondo, mentre la tela compare in un quarto di secondo; da lì lo scorrimento porta la testina di divisione in divisione fino alla quinta: sono le cinque soste. Fra una sosta e l’altra il tempo corre con power1.inOut, power1.out solo la prima volta, e lo scrub è di mezzo secondo, così la ruota arriva un attimo dopo il dito e non scatta mai.

Anche la luce si muove con lo scorrimento. La mappa d’ambiente, un EXR da studio, ruota a ogni sosta su due assi, per esempio da 49 gradi a meno 100 in avanti e da 6,5 a meno 148 di lato, e la sua intensità sale da 1 a 1,5 nelle ultime due soste: i riflessi scivolano sul carbonio come se la ruota girasse sotto un faretto, anche quando non gira. La camera invece la sposta GSAP, sullo stesso scrub: sul computer parte più lontana e più in alto, a 2,65 invece di 2,39, si avvicina nella prima parte e poi scivola di lato di pochi millimetri, 5 e poi 78 millesimi, quanto basta a cambiare l’inquadratura; sul telefono sale e scende per lasciare posto ai testi. Sopra tutto c’è il galleggiamento di drei, Float, a velocità 3,38, con un’ampiezza di un centesimo in su e in giù: la ruota non è mai del tutto ferma. E quando il 19% della sezione arriva al centro dello schermo, la pagina cambia tema, dal nero all’argento, e la barra in alto cambia con lei; tornando su, ritorna nera.

Nella nostra demo la ruota non viene da un programma 3D: è costruita pezzo per pezzo con Three.js, un cerchio alto cinquanta millimetri col suo profilo vero, la trama del carbonio a spina dipinta su una tela e coperta da una vernice lucida, il marchio RAGGIO due volte su ogni fianco, ventiquattro raggi piatti a fianchi alterni con le teste e i nippli, il mozzo nero con le flange, la valvola col suo dado. Il perno sta fermo mentre la ruota gira, e le tenute dei cuscinetti girano un po’ più del cerchio. Dal sito vengono il campo visivo della camera, 22,895 gradi, le cinque soste con lo scrub di mezzo secondo e le stesse curve, le rotazioni della luce sosta per sosta con l’intensità che sale a 1,5 nelle ultime due, il galleggiamento a 3,38, l’entrata in tre secondi dopo mezzo, il passaggio all’argento al 19% e la densità dei pixel che scende da 1,5 a 1 se i fotogrammi non bastano. Nostri invece la ruota che rotola di tre quarti di giro lungo la pagina, una breve sosta fra una posa e l’altra, l’indice a sinistra e i testi dei capitoli; senza WebGL resta una ruota piatta disegnata in SVG.

I titoli che si ribaltano

I titoli dei capitoli non scorrono né salgono da una maschera: arrivano lettera per lettera, e ogni lettera cade in avanti da sopra la riga come una tessera incernierata in basso, girando un poco anche di lato. Prima l’etichetta piccola, poi il titolo grande, riga dopo riga, poi il testo e il pulsante Learn more.

È SplitText, che taglia il titolo in parole e lettere. Ogni lettera parte trasparente, 0,6 em più in alto e 0,2 em più a sinistra, ruotata di meno 90 gradi sull’asse orizzontale e di meno 15 su quello verticale, e arriva diritta al suo posto in un secondo con power2.out; le lettere partono a un decimo di secondo l’una dall’altra. Non c’è prospettiva: le rotazioni si vedono in piano, e la lettera sembra schiacciarsi e raddrizzarsi mentre scende, più che ribaltarsi davvero, ed è proprio quello che le dà un’aria meccanica, da tabellone. Se il titolo è su più righe, ogni riga parte mezzo secondo dopo la precedente. Dopo una pausa di un quarto di secondo, o di tre quarti nei capitoli della home, l’etichetta compare in dissolvenza in un secondo e mezzo con power1.out, e il testo e il pulsante salgono insieme nello stesso tempo. Tutto è moltiplicato per un numero solo, timing: sul telefono vale 0,75 e lo stesso titolo arriva un quarto più svelto.

Nella nostra demo i titoli sono tre, di RAGGIO, Built to climb, Handmade in carbon, Quiet at speed, e si danno il cambio da soli su un argento con una luce morbida al centro, in Mona Sans largo. Le lettere entrano con i numeri del sito, la partenza di meno 90 e meno 15 gradi, il secondo con power2.out, il decimo fra l’una e l’altra, il mezzo secondo fra le righe e la pausa di un quarto prima del testo. La prospettiva invece è nostra, 1000 pixel su ogni parola: con lei la lettera si ribalta davvero e proietta un’ombra che si accorcia fino a sparire quando arriva; arrivata, scende di un pixel e torna su. Nostri anche l’uscita, con le lettere che cadono in avanti in mezzo secondo, le lettere vicine al puntatore che si inclinano di qualche grado, il giro intero che parte dalla lettera toccata e la riga sotto le tre voci, che va dall’una all’altra allungandosi e poi ritirando la coda.

I cerchi col mirino

Dietro la ruota, sul computer, ci sono due cerchi sottilissimi, ognuno con due piccoli mirini a croce sul bordo, e ai lati quattro croci agli angoli dello schermo, come i segni di registro di una stampa. A ogni capitolo i due cerchi cambiano posto, misura e rotazione; a sinistra, lungo una linea verticale che si riempie scorrendo, l’indice dice Philosophy, Craft, Innovation.

I cerchi sono due div col bordo di un pixel, e le loro posizioni stanno in una tabella di cinque soste scritta su uno schermo alto 1080: misure da 678 a 900, spostamenti di 234, 330, meno 131, meno 346, rotazioni di 90 e di 180 gradi. Un numero diventa lvh con una funzione sola, il numero diviso 1080 per cento, così tutto si misura sull’altezza dello schermo. Il cambio non è un’animazione di GSAP ma una transizione CSS su posizione, misura e rotazione, lunga 1,2 secondi, con la curva cubic-bezier(.33, 0, 0, 1), che parte decisa e si posa lentissima. E vicino a ogni confine fra due capitoli i due cerchi non vanno dritti alla sosta nuova: passano per una posizione comune, tutti e due al centro e larghi 840, ci restano almeno 1,2 secondi e solo dopo si separano verso i posti nuovi. Si radunano e si riaprono, e i mirini girano col loro cerchio. La linea dell’indice invece è una variabile CSS, –progress, che GSAP porta da 0 a 1 con lo scrub per tutta la sezione.

Nella nostra demo i capitoli sono quelli di RAGGIO, e i cerchi sono soli sul palco, con il titolo di ogni sosta al centro e le quattro croci agli angoli. Le pose sono quelle della tabella del sito, misurate anche loro su uno schermo alto 1080, e la curva è la stessa cubic-bezier, ma il cambio lo fa una piccola macchina a stati invece del CSS: prima il raduno al cerchio comune largo 840, in otto decimi di secondo, poi l’allargamento alla sosta nuova in 1,2, e il secondo cerchio parte un attimo dopo il primo; anche scorrendo di corsa passano sempre dal centro. Nell’ultima sosta un cerchio sta a meno 300 invece di meno 346, perché il suo mirino finiva sopra l’indice. Nostri anche i mirini che si assestano di un pixel quando arrivano, la tacca rossa che corre su ogni bordo e va più veloce quando si scorre, i cerchi che si inclinano verso la voce dell’indice sotto il puntatore e il clic che porta alla sosta. L’indice dice i nomi, mai i numeri.

Gli altri dettagli

Tutto quello che compare nel sito usa tre misure di tempo scritte in un posto solo: due secondi con power2.out, con un ritardo di un quarto di secondo dopo un caricamento normale, di 0,85 dopo il passaggio fra due pagine e di due secondi interi la prima volta, quando c’è il caricamento. Le comparse salgono dal basso di una distanza misurata sulla larghezza dello schermo, 4 vw più 2 per ogni elemento che viene dopo, a 4 centesimi l’uno dall’altro; sul tablet la distanza è una volta e mezza, sul telefono il doppio. Il pulsante Learn more, nella prima schermata, porta lo scorrimento giù del 90% dell’altezza dello schermo, quasi alla sosta successiva della ruota.

La ruota sa anche risparmiarsi. Un controllo delle prestazioni di drei misura i fotogrammi quattro volte; se il computer arranca, la densità dei pixel scende da 1,5 a 1 e il cerchio di carbonio passa alla sua versione leggera, un secondo modello più semplice che sta nello stesso file, accanto a quello dettagliato. Nel file i pezzi hanno ancora i nomi che gli ha dato chi li ha modellati, in ceco: Vyplet, i raggi, Naboj, il mozzo, RAF, il cerchio, da ráfek. Il modello pesa circa 370 kB, la mappa d’ambiente circa 107.

Dove inciampa

La sezione della ruota è alta cinque schermi, sette e mezzo sul telefono, e sul computer lo scorrimento a metà velocità la fa sembrare il doppio: per arrivare a una qualsiasi altra cosa della home bisogna scorrere a lungo dentro la stessa scena, e chi cerca solo i modelli delle ruote non ha una scorciatoia se non il menu. I pezzi di JavaScript della home pesano insieme circa 6,8 MB prima della compressione, e sopra la ruota, alla prima visita, il riquadro dei cookie copre mezzo schermo.

Nel codice sono rimaste un paio di cose da cantiere. Il pannello di regolazione con cui sono stati tarati luci, camera e galleggiamento, leva, è ancora dentro e si apre con Ctrl Maiuscolo D. Sul telefono, a ogni sosta, il sito scrive un numero nella console. E fra le curve della luce ce n’è una scritta male, poweri.inOut invece di power1.inOut: GSAP non la conosce e usa la sua curva di partenza, quindi l’intensità della luce cambia con un passo un po’ diverso da quello voluto. Nessuno se ne accorge, ma è lì.

Cosa ci portiamo via

Una scena 3D allo scroll non deve per forza essere calcolata: qui il movimento è disegnato nel programma 3D, come in un film, e lo scorrimento è solo la testina che va avanti e indietro sul nastro. Il resto è sottrazione: due colori, un carattere, due cerchi di un pixel, e un titolo che si ribalta in un secondo. È un sito di prodotto che fa quello che fanno le sue ruote: tutto il peso è dove serve, niente dove non serve.