Marimba, com’è fatto: un portfolio nella luce del pomeriggio

Marimba è il portfolio di Myranda Wicks, designer digitale di Calgary: una home che scorre come un racconto, una pagina dei lavori, una di presentazione e gli studi dei progetti. Il tono è soleggiato e morbido: carta color crema, un inchiostro verde oliva, titoli grandi e leggeri in Instrument Serif, testo sottile in Geist, e intorno oggetti 3D pastello, sfocati e iridescenti: una stella di vetro, una foglia, un asterisco, tre sfere luminose.

Sotto c’è poco: HTML e CSS scritti a mano, GSAP 3.12.5 con ScrollTrigger, lo scorrimento normale del browser, niente WebGL. Il JavaScript è un solo file di 2.887 righe, non compresso, e si legge come un quaderno: i valori che citiamo qui vengono da lì. Lo smontiamo in tre momenti, con una demo rifatta da zero per ognuno: sfere, disegni, testi, colori e codice sono nostri. Dal sito abbiamo preso l’idea e i tempi.

L’anello delle sfere

È la scena che firma il sito. Attorno al titolo della home stanno tre sfere luminose; al primo colpo di scorrimento il titolo si scioglie nel blur, e le sfere girano insieme lungo un arco fino a chiudersi in un anello sottile, con al centro le parole «My design practice». Ognuna porta il suo nome, sempre dritto. Se smetti di scorrere, l’anello continua a girare da solo.

Nel sito lo sfondo della prima schermata resta fermo mentre sale la sezione dopo, alta quasi tre schermi, e una linea del tempo legata allo scorrimento con scrub 1 muove tutto. Nel primo quinto il titolo va a blur(20px), scende di 100 pixel e sparisce. Le sfere sono tre immagini webp di 600 pixel, e a muoverle è un oggetto qualunque con quattro numeri, t, r, s e cy, animato con power2.inOut: a ogni aggiornamento lo script calcola per ognuna un angolo e un raggio. All’inizio ogni sfera prende la strada più corta verso il suo posto, mentre il gruppo fa sei decimi di giro, il raggio si stringe fino a quello dell’anello e la scala scende a 0,6. Le sfere girano anche su sé stesse, di 300, 270 e 140 gradi, e le etichette girano all’indietro della stessa quantità per restare dritte. I nomi compaiono al 70% della scena, l’anello all’80%. Finita la scena parte un’orbita infinita, un giro ogni 50 secondi; tornando su, l’angolo si riavvolge in tre decimi di secondo.

Nella nostra demo le sfere sono disegnate in CSS, con un gradiente radiale e un lucido che gira dentro: a girare è solo il lucido, e i nomi restano dritti senza controrotazioni. E il percorso cambia forma: ogni sfera corre su un’ellisse grande quanto lo schermo, che si stringe fino al cerchio dell’anello, così nessuna esce dai bordi, nemmeno su un telefono. Il sito, al telefono, rinuncia alla scena e mette al suo posto un video in loop dello stesso anello: un’idea furba, che tiene l’immagine senza far lavorare lo script.

Le pillole nel titolo

Il titolo della home è una frase, e fra le parole ci sono due link a forma di pillola con dentro una foto, un autoritratto e un sito. Finito il caricamento le pillole, larghe zero, si aprono e la riga si riapre per fare posto alla foto. Passandoci sopra, la foto si schiarisce fino al pastello e compare dove porta il link.

È tutto CSS: un’animazione a fotogrammi chiave porta larghezza e margini da zero a 6,5vw e 0,7vw in 1,2 secondi, con 3,5 secondi di ritardo per aspettare la fine del caricamento. Al passaggio del mouse la pillola prende una larghezza fissa di 85 pixel e un fondo azzurro chiaro in mix-blend-mode: lighten, che lava la foto, e in tre decimi di secondo compare un’etichetta, About me o Work. Sono link veri, alla presentazione e ai lavori.

Nella nostra demo le pillole sono tre, con dentro scene disegnate, e si misurano in em: seguono il titolo a qualunque grandezza. Si aprono appena il carattere è caricato, una dopo l’altra, e al passaggio si allargano ancora e spingono le parole; il velo lascia intravedere la scena, che dentro la pillola scivola piano. Col dito si accendono al tocco.

La luce delle persiane

La cosa che si ricorda di più non è un’animazione. Sopra tutto il sito, testo e oggetti compresi, cade l’ombra di una persiana: righe di luce in diagonale, come in una stanza il pomeriggio. E in fondo alla home, ai contatti, la pagina diventa notte verde oliva, e le righe di luce restano lì, sul buio.

Nel sito la luce è una fotografia, in un div fisso sopra la pagina, con mix-blend-mode: overlay, opacità 0,4 e pointer-events: none. Non si muove: è la pagina a scorrerci sotto. La sera invece è legata allo scorrimento: quando i contatti arrivano a metà schermo, il fondo passa dalla carta al verde notte, e testo e bordi passano al crema.

Nella nostra demo la luce è disegnata con due gradienti, senza fotografia e senza fusioni, e si muove: dall’inizio alla fine della pagina gira, si inclina e si allunga, come il sole che scende. La sera cambia cinque variabili CSS, e basta.

Gli altri dettagli

All’apertura c’è uno schermo verde scuro col logo vuoto: dentro il logo, che fa da maschera, una barra di luce lilla e crema cresce da sinistra a destra in 1,2 secondi, poi lo schermo si alza come una tenda. Dietro, sette oggetti 3D entrano da fuori schermo girando su sé stessi, in un tempo fra due secondi e mezzo e cinque, con power4.out; se cominci a scorrere arrivano subito. L’asterisco della prima schermata gira in un senso e la sua trama nell’altro, di 360 gradi in 30 secondi: la sagoma ruota, la trama resta ferma.

Più sotto un portatile si apre: 73 fotogrammi precaricati, sostituiti uno dopo l’altro in 1,2 secondi, poi sullo schermo compare un video in loop, inclinato in prospettiva per stare sul piano del display. Quattro dischi in prospettiva, riempiti da gradienti conici che girano, si impilano come piatti mentre la sezione resta ferma. Il puntatore è un punto oliva di otto pixel che insegue il mouse; sui lavori si ingrandisce quattordici volte e diventa un disco con scritto View work.

Fra una pagina e l’altra non c’è un ricaricamento: un sipario verde sale, lo script scarica la pagina nuova, ne sostituisce il contenuto, e il titolo nuovo esce dal blur. Sulla pagina dei lavori il titolo parte quasi tre volte più grande e si rimpicciolisce, e i progetti si danno il cambio con una tendina che sale dal basso e uno zoom che si alterna. Sui link del menù nessuna riga animata: l’opacità scende a 0,7, e basta.

Dove inciampa

La sera costa: per cambiare i colori lo script anima colore e bordo di ogni elemento della pagina, uno per uno, presi con querySelectorAll(‘*’). Poche variabili CSS farebbero lo stesso lavoro.

Su Safari per iPhone la luce delle persiane è spenta, perché lì un elemento fisso con mix-blend-mode si comporta male: proprio sul telefono il sito perde la cosa che lo rende sé stesso. Disegnata con colori trasparenti, senza fusione, la luce sarebbe rimasta.

La scena dei lavori finisce a «+=4800vh», ma in quel punto ScrollTrigger non conosce l’unità vh e legge 4.800 pixel: funziona, ma per caso. E col tasto Indietro le transizioni fatte in casa si arrendono e ricaricano tutta la pagina.

Cosa ci portiamo via

Una sola luce fissa sopra la pagina dà a un sito intero la sua ora del giorno, e se la luce resta quando viene sera, un cambio di colore diventa un tramonto. E tre sfere che si chiudono in un anello dicono come lavora qualcuno meglio di un elenco.