EDDY-OS, com’è fatto: un portfolio dentro un vecchio televisore

EDDY-OS è il portfolio di Eddy Naboulet, che fa front-end a Bordeaux e ha una formazione da designer. Non sembra un portfolio: è un sistema operativo inventato, alla versione 2.6, visto attraverso lo schermo di un televisore a tubo. Si entra da una schermata di avvio che scrive il suo registro, e dentro ci sono una barra dei menu come sui Mac di una volta, finestre, una tavolozza di 36 comandi che si apre con ⌘K, scorciatoie da tastiera, una cartuccia con Doom, un gioco di astronavi nella pagina di errore e un curriculum da stampare. Grafica, codice e disegni sono suoi.

I colori sono quelli di un fosforo ambra: un fondo quasi nero, poi ruggine, brace, arancio e crema. I temi sono sei e ognuno ridefinisce gli stessi sei colori; dagli stessi colori nasce la rampa che colora ogni particella WebGL, quindi cambiando tema si ricolora tutto, dal ritratto ai cursori. I titoli sono in Jacquard 12, un gotico a pixel, il resto in DotGothic16. E c’è un’idea che tiene insieme tutto: le cose dell’interfaccia si muovono a scatti, trenta volte al secondo, mentre le particelle scorrono morbide.

Sotto c’è Astro, con GSAP 3.15 (quickTo, Observer, Draggable, CustomEase e ScrollTrigger per una sola sezione fissata), Lenis e Three.js con shader scritti a mano. Il vetro del televisore usa, dove esiste, un’API sperimentale che disegna la pagina vera dentro un canvas, così lo shader la può deformare; altrove un velo sopra la pagina. I suoni sono tutti sintetizzati con la Web Audio API. Qui lo smontiamo in tre momenti, con una demo rifatta da zero per ognuno: disegni, testi, colori e codice sono nostri. Dal sito abbiamo preso l’idea e i tempi.

Il rilievo a trattini

Dopo l’avvio, al centro dello schermo compare un ritratto che saluta, fatto di circa centomila trattini orizzontali, come un’incisione. Non è piatto: le parti chiare stanno più avanti, e trascinandolo si vede che è un bassorilievo sottile come un foglio. Passando sui quattro angoli il ritratto si sfalda in una nuvola di polvere e si ricompone in un altro disegno.

L’immagine passa per un dither ordinato, la matrice di Bayer 4 x 4: dove il valore di un punto supera la soglia della sua cella nasce un trattino, e la profondità viene dallo stesso valore. Ogni trattino è una copia di un quadrilatero disegnata dalla scheda video. Il cambio di forma dura 1,15 secondi, ma ogni trattino parte sfasato del suo numero a caso e curva lungo un arco, sin(π t), per questo a metà strada il disegno è una nuvola. Trascinando si gira di 0,0075 radianti per pixel, lasciando la rotazione frena con e^(−2,6 × dt), e più gira in fretta più il rilievo si gonfia. Nella nostra demo niente ritratto: una sfera, una e commerciale, un nodo e un fiore disegnati al momento, e nessuna libreria 3D, solo WebGL2.

Il tubo catodico

Tutto il sito sta dietro un vetro: righe ogni tre pixel, una griglia verticale ogni quattro, una banda di luce che scende ogni nove secondi circa, grana, un leggero sfarfallio, la vignetta e una cornice dagli angoli tondi. Cambiando tema il televisore si spegne come una volta, l’immagine si schiaccia in una riga e poi in un punto, e si riaccende con una lama di luce che si allarga.

Lo spegnimento dura 0,44 secondi, l’accensione 0,78 con una curva che va un poco oltre e torna. Sotto il vetro i testi si scrivono a scatti: il titolo scopre le lettere con le ultime due più accese, le righe compaiono dietro un cursore a blocco grazie a due strati di mask-image, e una finestra si annuncia con tre rettangoli vuoti che crescono uno dietro l’altro dal suo centro fino alla sua misura, come sui computer degli anni Ottanta, per poi comparire attraverso un retino. Nel sito il tema nuovo arriva ricaricando la pagina durante il buio; nella nostra demo cambia sul posto, i rettangoli partono dall’icona che si apre, e il vetro è un canvas trasparente sopra la pagina che non ferma i clic.

La stanza delle carte

I progetti sono diciassette dischetti con l’angolo tagliato, disposti su una cupola intorno a chi guarda. La rotella e il trascinamento girano la cupola con un piccolo scatto a ogni carta che passa davanti, come la manopola di una cassaforte. Altri due pulsanti cambiano vista: un elenco con i nomi enormi, oppure una fila in diagonale dove le carte lontane si sgretolano in polvere.

Le carte stanno su una spirale di Fibonacci e l’angolo dalla vista è schiacciato, così la sfera sembra una cupola. La rotazione segue il gesto con gsap.quickTo, un secondo con power2, e si accumula in un quaternione. Il cambio di vista dura 1,6 secondi senza curva, ma ogni carta ne usa solo metà, partendo in ordine, così le carte si staccano una dopo l’altra. Nel sito sono texture in Three.js con la polvere nello shader; nella nostra demo sono sedici pulsanti veri in CSS 3D, con copertine disegnate a retino e una maschera di Bayer al posto della polvere.

Gli altri dettagli

Il registro dell’avvio accende una riga ogni 130 millesimi, poi chiede di premere un tasto: una linea di luce scende e il nome si scrive con la testa arancione, mentre la polvere si raccoglie nel ritratto. Il curriculum è una fila di pannelli disegnata come il grafico di git log, con una mappa da metropolitana per le strade parallele e il codice del commit che si decifra da solo. Il titolo del profilo si compone di particelle che si schiariscono dopo l’atterraggio, e scorrendo quelle particelle attraversano la pagina come una cometa, da una figura all’altra. C’è un diagramma isometrico che si costruisce con lo scorrimento, scritto con un carattere vettoriale a un solo tratto. I cursori sono pixel art disegnata al momento nei colori del tema, e ogni gesto ha il suo bip, sintetizzato: si spegne con il tasto S.

Dove inciampa

Prima di vedere qualunque cosa bisogna premere un tasto o toccare lo schermo: la schermata di avvio è un cancello.

La cupola dei progetti resta vuota per circa due secondi e mezzo, al computer e al telefono, mentre le diciassette copertine vengono trasformate in trattini sul thread principale. Intanto girano più contesti WebGL insieme, uno per scena più quello del vetro.

La leggibilità soffre: i titoli in gotico a pixel sotto le righe e la vignetta si leggono a fatica, le didascalie sono di 10 e 11 pixel, e il rosso ruggine sul fondo ha un contrasto di 2,22 a 1. Lo sfarfallio e la banda di luce sono accesi fin dall’inizio. Al telefono i quattro disegni del ritratto non si vedono mai, perché toccare un angolo porta subito nella sezione.

Va detto il bello: il movimento ridotto è rispettato ovunque (sparisce il viaggio delle particelle, e con lui sfarfallio e banda), ci sono titoli nascosti per i lettori di schermo, un elenco testuale dietro ogni scena WebGL e un curriculum pensato per la stampa.

Cosa ci portiamo via

Una regola di movimento può essere un’identità: qui l’interfaccia va a scatti e la materia scorre morbida, e quel contrasto basta a far sembrare vero un computer che non esiste. Le particelle non devono per forza essere punti: dei trattini in rilievo fanno di un’immagine un oggetto.