Le Mans Classic, com’è fatto: un reportage che scorre come un rullino

Le Mans Classic «Below the Line» è il minisito che Richard Mille ha dedicato a Le Mans Classic 2025, la corsa delle auto storiche sul circuito della Sarthe. Non racconta la gara: racconta tutto quello che le succede intorno, i meccanici, i box, le notti, i volontari. Il sito è dello studio Magnetism, le fotografie di Ludovic Myers, i testi di Abdesslam Oulahbib.

È un reportage in bianco e nero diviso in dodici capitoli, e ogni capitolo è un’ora: si parte alle sei e mezza del primo giorno e si arriva al mattino del terzo. Ogni capitolo è una striscia orizzontale di foto, brevi video e parole enormi. I colori sono tre, un giallo acido, un nero d’inchiostro e il bianco; i titoli sono in un grottesco strettissimo e nerissimo che riempie lo schermo da un bordo all’altro.

Sotto c’è Nuxt, con GSAP (ScrollTrigger e il nuovo SplitText), Lenis per lo scorrimento morbido e la Web Audio API per i suoni. Niente WebGL: tutto l’effetto viene dai ritagli, dai tagli di montaggio e dal ritmo. Qui lo smontiamo in tre momenti, con una demo rifatta da zero per ognuno: le foto sono disegni nostri, e così i testi e il codice. Dal sito abbiamo preso l’idea e i tempi.

Il proiettore e il titolo che si alza

Si entra su uno schermo scuro con al centro una finestrella grande come una cartolina. Dentro, le foto scendono una dopo l’altra, tre decimi di secondo ciascuna, e ognuna copre la precedente: sembra un proiettore di diapositive. Ai lati salgono quattro didascalie. Poi l’ultima foto si ingrandisce oltre i bordi dello schermo mentre la finestra stessa si apre, e al centro compare una riga gialla. È il titolo, schiacciato: in mezzo secondo si alza a tutta altezza, e le didascalie si separano per incorniciarlo sopra e sotto. Chiude un lampo di foto dietro le lettere.

I due movimenti dello scoppio vanno insieme: l’immagine cresce con una curva lunga mentre il ritaglio della finestra si apre con una più breve, partita un attimo dopo. Il ritaglio iniziale va calcolato in pixel, perché un clip-path scritto con calc() non si anima bene. Il titolo si misura a cento pixel e si scala per riempire la larghezza; le didascalie stanno sulla linea di mezzo e si spostano di mezzo titolo con una variabile CSS.

L’orologio che conta i minuti

Ogni capitolo si apre con una scheda nera che entra di lato. Prima c’è solo il nome del capitolo, di colpo, largo quanto lo schermo. Dopo due secondi il nome sparisce e al suo posto un orologio enorme conta dall’ora del capitolo prima a quella nuova, un minuto alla volta, con un ticchettio da macchina da scrivere a ogni minuto e i due punti che lampeggiano. Sotto salgono il giorno e una frase. Poi la pagina del capitolo arriva di lato e copre la scheda.

Il conteggio è un solo numero, i minuti totali, che va da un’ora all’altra in un secondo: così l’orologio passa le ore e anche la mezzanotte. Le cifre si riscrivono solo quando cambia il minuto. Al posto del suono le abbiamo fatte saltare di un soffio, e ognuna sta in una casella di larghezza fissa, altrimenti l’orologio balla mentre conta.

La striscia che scorre di lato

Dentro un capitolo si scorre in giù e si va di lato. Lo schermo resta fermo e dentro scivola una striscia lunga più di dodicimila pixel, un pixel di lato per ogni pixel di rotella. Tutti gli altri effetti si agganciano a quella striscia: le foto scorrono dentro le loro cornici, più larghe del venti per cento, e ogni tanto arriva un pannello giallo con un’ora enorme. La lastra che ha davanti non se ne va: resta ferma sullo schermo, si rimpicciolisce e sparisce mentre il pannello le scivola sopra, e le cifre salgono una alla volta.

Il trucco della lastra ferma è semplice: mentre il pannello attraversa lo schermo, la lastra viene spinta a destra di quanto la striscia la porta a sinistra. Tutti gli effetti usano la striscia come containerAnimation, e per questo il suo movimento dev’essere lineare. L’altezza della sezione va ricalcolata a ogni ridimensionamento, perché dipende da quanto è lunga la striscia.

Gli altri dettagli

Arrivati in fondo a un capitolo si può continuare a scorrere: la rotella trascina la scheda del capitolo dopo attraverso lo schermo, e se si torna indietro la scheda si ritira. Le voci della testata cambiano colore una alla volta, ognuna secondo la lastra che ha sotto, così il confine fra giallo e nero passa sulla testata voce per voce. Il menu dei capitoli è un orario: ogni riga ha l’ora e il titolo, e al passaggio del mouse l’immagine del capitolo si scopre dall’alto in una cornice al centro. In un capitolo il titolo si inclina con la velocità dello scorrimento, in un altro una croce fa due giri mentre la si attraversa.

Dove inciampa

Per entrare bisogna premere «Start the experience». Serve a sbloccare l’audio, ma è un cancello davanti a un racconto che potrebbe partire da solo, con il suono spento.

Al telefono il caricamento resta nero per qualche secondo prima che compaiano le foto (nelle nostre prove circa cinque). La striscia orizzontale, poi, lascia il posto a una colonna: al telefono si perde proprio l’effetto più bello.

Il passaggio al capitolo dopo, trascinando oltre la fine, è la trovata migliore del sito, ma non si indovina: non c’è un pulsante per andare avanti, e chi non prova a scorrere ancora deve passare dal menu. E il lampo dopo il titolo sono dieci foto in un secondo: tenerlo così breve lo rende d’effetto, ma a chi è sensibile alle luci lampeggianti non fa bene.

Cosa ci portiamo via

Un racconto per immagini può avere il ritmo di un montaggio: tagli netti, un orologio che fa da titolo, una striscia che si ferma per lasciar passare l’ora. E il caricamento può essere già la prima scena, se mostra le foto invece di una barra che si riempie.