Meer Mohsin, com’è fatto: un portfolio girato come un film

Meer Mohsin è uno sviluppatore front-end, designer di interfacce e sviluppatore 3D che lavora dal Pakistan. Il suo portfolio non somiglia a un portfolio: somiglia ai titoli di testa di un film. Rosso e nero, un corsivo calligrafico per i numeri e le parole grandi, e in fondo allo schermo tre parole che fanno da programma: tensione, immersione, impatto.

Sotto c’è un progetto scritto a mano e impacchettato con Vite: Three.js per le scene 3D, GSAP con ScrollTrigger per tutto quello che si muove, Lenis per lo scorrimento morbido e una piccola libreria che divide i testi in righe, parole e lettere.

Qui lo smontiamo in tre momenti. Per ognuno c’è una demo rifatta da zero con grafica nostra: dal sito abbiamo preso l’idea e il ritmo, mai il codice o le immagini.

Un conteggio in corsivo e un velo che brucia

Alla prima visita lo schermo è rosso e al centro un numero in corsivo conta da zero a cento. Poi parte la cosa più memorabile del sito. Dal basso sale un fronte nero, frastagliato come carta che brucia, con il bordo acceso di rosso, e si mangia lo schermo in tre secondi. È un piano in WebGL: lo shader lo fa dissolvere con i bordi luminosi, e ci aggiunge righe sottili da vecchio schermo e un po’ di grana.

Il caricamento parte solo quando arrivi da fuori: se ricarichi la pagina, o se l’hai già visto nella stessa sessione, il sito lo salta.

La nostra versione ha il velo arancio e il numero in un Mona Sans larghissimo e leggero. Il fuoco è uno shader scritto a mano, senza Three.js: un solo triangolo che copre lo schermo e un rumore frattale che deforma la linea del fronte. Prima del bordo il velo si scurisce come carta bruciata, sul bordo c’è la brace che trema, al centro un filo quasi bianco, e sotto un alone arancio si posa sulla pagina appena scoperta.

I lavori in fila, con l’anello

La sezione dei lavori si ferma sullo schermo per tante altezze quanti sono i progetti. Il progetto corrente è grande; il precedente sale in alto, piccolo e sbiadito, il successivo aspetta in basso. A ogni cambio il fondo sfocato prende l’immagine del nuovo progetto, il nome e la descrizione si riscrivono parola per parola e un anello si riempie mentre ti avvicini al prossimo, con il numero del progetto al centro.

Nel sito le carte si spostano cambiando la proprietà top, e a ogni evento di scorrimento parte un’animazione per ogni carta. Noi le muoviamo con i trasformati, che non costringono il browser a ricalcolare la pagina, e facciamo partire le animazioni solo quando il progetto cambia davvero. Il nostro anello non ha numeri: dice quanto manca, non a che punto sei della lista.

Le parole che si accendono in ordine sparso

C’è un gesto che torna in quasi ogni testo del sito: gli elementi non entrano in fila ma in ordine sparso. Le parole del paragrafo manifesto salgono ognuna di cinquanta pixel, da un velo di sfocatura, in tre secondi e ognuna a un momento a caso. Lo stesso fanno le lettere del titolo grande, che crescono da metà della loro altezza, e le cifre dei numeri. Il risultato è una pagina che sembra comporsi da sola, un pezzo qui e uno là.

Qui abbiamo spinto l’idea un passo più in là. Le parole della nostra frase non partono solo in un ordine sparso, ma da punti sparsi dello schermo: spostate, girate, alcune grandi e altre piccole, ognuna con la sua larghezza e il suo peso del carattere variabile. Scorrendo tornano al loro posto e la frase si legge. Il disordine viene da un numero, il seme, quindi è sempre lo stesso.

Gli altri dettagli

Il resto del sito è una scena dopo l’altra. Una statua classica in 3D compare in due copie, una più opaca e una più lucida che arriva da destra e le si affianca, illuminate da luci rosse, una delle quali segue il mouse; mentre scorri la statua gira su sé stessa e in fondo alla pagina torna, con un suono. Il cursore si porta dietro una scia di fluido, calcolata da una simulazione in WebGL a tutto schermo. Fra una sezione e l’altra la pagina si strappa come carta, e il pulsante per scrivergli è magnetico: si sposta verso il mouse e sparisce di lato quando scorri verso il basso.

Dove inciampa

Alla prima visita il menù compare dopo otto secondi e mezzo e il pulsante dei contatti dopo nove: sono ritardi scritti nel codice per lasciare spazio all’ingresso. Per chi vuole solo un indirizzo email è molto.

La pagina è alta più di ventottomila pixel su uno schermo da computer e, oltre al velo iniziale, tiene accese più scene WebGL: il fluido, la statua, la vetrina dei riconoscimenti. È molto da far girare, soprattutto su un telefono. E molti testi piccoli sono rossi su nero: belli da guardare, faticosi da leggere.

Cosa ci portiamo via

Una tavolozza strettissima tiene insieme effetti diversissimi: con solo rosso e nero, un fluido, una statua e un fuoco sembrano lo stesso film. L’ordine sparso usato ovunque diventa una firma, a patto di tenerlo breve. E un caricamento può essere un materiale, carta che brucia, invece di una barra che si riempie.