ART+TECH Report, com’è fatto: un rapporto di dati che si monta da solo

ART+TECH Report è un’indagine sul collezionismo di arte digitale, l’edizione 2023 intitolata «Digital Art Coll3cting». Invece di un PDF c’è un sito che si legge scorrendo: introduzione, metodo, chi ha risposto, poi nove capitoli di risultati con grafici e citazioni, e in fondo il modulo per scaricare il rapporto completo. Il sito e i grafici sono dello studio MoreSleep.

L’aspetto è quello di una rivista di dati: un blu oltremare elettrico con celle dai bordi sottilissimi e gli angoli arrotondati in modi diversi, poi capitoli bianchi con i dati in menta, corallo e lilla. I titoli sono in un grottesco stretto e maiuscolo, i numeri e le citazioni in un graziato elegante, le etichette in un monospazio minuscolo.

Sotto non c’è GSAP: è tutto fatto con le interazioni di Webflow, con Lenis per lo scorrimento morbido e Lottie per i grafici. 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.

La griglia che si sposta col mouse

L’apertura è uno schermo blu diviso in celle vuote, solo contorni. All’arrivo la griglia respira da 0,85 alla sua misura in un secondo e mezzo, con una frenata lunghissima. Al centro si monta il marchio, tre pastiglie: DIGITAL, ART, COLL3CTING. Partono vuote e piccole, compaiono una dopo l’altra, poi dopo un secondo si aprono di scatto alla larghezza della loro parola con una curva che resta quasi ferma e poi scatta. Le parole arrivano per ultime, uscendo da una sfocatura di cinque pixel.

Poi si muove il mouse, ed è la cosa più bella del sito. La griglia si riproporziona: la X del puntatore allarga la colonna di sinistra da 36 a 60 vw e sposta le celle interne, la Y alza e abbassa le righe. Tutto insegue il puntatore con un ritardo lungo, e le celle sembrano liquide.

Noi abbiamo messo le misure in variabili CSS dentro griglie annidate: il puntatore muove una manciata di numeri, e i numeri diventano grid-template-columns e grid-template-rows. Col dito la griglia segue il tocco, e se nessuno la muove va a spasso da sola su una curva lenta.

I titoli che vengono a fuoco

Le sezioni si aprono con titoli enormi legati allo scorrimento. Quando entrano sono sfocati di 14 pixel e semitrasparenti; a un quarto della loro corsa sono nitidi. Poi il titolo sale piano mentre il sottotitolo sale molto più in fretta, cinque volte tanto, e lo supera. Le citazioni fra un capitolo e l’altro, in un graziato grande, fanno la stessa messa a fuoco da otto pixel e si fermano nitide a un terzo della corsa.

È una parallasse senza immagini: due testi con due velocità. Nella nostra versione ogni capitolo ha una timeline sola con scrub, e dentro le durate sono frazioni della corsa, così la messa a fuoco e la salita restano nello stesso rapporto su qualunque schermo.

I grafici che si disegnano

Ogni capitolo ha un grafico su una carta grigia chiarissima: barre, ciambelle, reti di pillole, griglie di punti. Sono animazioni Lottie, e le più belle sono legate allo scorrimento: il grafico si disegna mentre scorri e si smonta se torni su. Le altre partono una volta sola quando entrano. Intanto la carta scivola di pochi punti, per dare profondità.

Noi li abbiamo fatti in SVG scritto a mano, senza Lottie: barre che crescono dal basso, una ciambella che chiude l’arco, cento punti che si accendono uno alla volta. I numeri contano nella stessa timeline del disegno, quindi il dato e la forma arrivano insieme. I valori della demo sono di esempio.

Gli altri dettagli

Il menù è una tenda di nove colonne scure che cadono dall’alto a gradini, trenta millesimi l’una dall’altra; le voci sono enormi e al passaggio del mouse una barra gialla riempie la riga mentre le parole rotolano verso l’alto. Nell’indice dei risultati le tessere si tingono di corallo e il titolo del capitolo sale da sotto. I titoli dei capitoli salgono dalla loro maschera con una rotazione di due gradi, come fogli appoggiati di sbieco.

Dove inciampa

Lo scorrimento è pesante di proposito: Lenis ha la rotellina dimezzata, e nelle prove 450 pixel di rotellina hanno spostato la pagina di 228. Su una pagina alta sedicimila pixel vuol dire il doppio della fatica per arrivare in fondo. Rende l’idea della lettura lenta, ma chi cerca un dato preciso si stanca presto.

Le celle dell’apertura sono solo contorni: belle, ma non contengono niente, e sul telefono diventano schede impilate senza il gioco del mouse. E il nome dell’edizione scritto con il tre al posto della e, «COLL3CTING», è simpatico da vedere e faticoso da leggere ad alta voce.

Cosa ci portiamo via

Un rapporto di dati può avere il ritmo di una rivista: ogni capitolo ha lo stesso impianto (titolo che viene a fuoco, grafico che si disegna, citazione), e la ripetizione diventa una guida per chi legge. E una griglia vuota può diventare il personaggio principale, se reagisce al puntatore con abbastanza ritardo da sembrare fatta d’acqua.