Point Of View, com’è fatto: la storia degli occhiali raccontata con gli occhi

Point Of View, all’indirizzo readingstones.com, è un racconto lungo in inglese sulla storia degli occhiali: parte dalle pietre levigate che si appoggiavano sulle righe per ingrandirle, passa per gli occhiali a rivetto, il pince-nez, l’occhialino e il monocolo, arriva alle stanghette e alla produzione in serie e finisce con gli occhiali come moda e come identità. Chi l’ha fatto non lo dice: sulla pagina non c’è una firma, e non l’abbiamo trovato tra i premi.

È tutto in bianco e nero, un nero quasi pieno e un bianco carta appena freddo, con fotografie in bianco e nero, ritratti a olio e sottili disegni tecnici grigi; il colore arriva solo dalle immagini. E ogni animazione parla di vista. La prima schermata è una tavola ottotipica, P O I N T, O F, V I E W, con le etichette dell’acuità; i titoli arrivano sfocati e vengono a fuoco; i ritratti restano miopi finché non ci si passa sopra; una finestra sbatte le palpebre per cambiare scena. Anche il caricamento è un occhio: una riga grigia attraversa il nero, poi il nero si apre in due palpebre.

Sotto c’è Taptop, un costruttore di siti senza codice, il cui motore porta con sé GSAP 3 con ScrollTrigger, Observer e CustomEase; sopra, quattordici script scritti a mano con IntersectionObserver, la Web Animations API e animazioni CSS. Niente WebGL, niente canvas, niente scorrimento morbido. 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.

La lente sul nastro

Nella sezione nera sulle pietre da lettura scorre un nastro di tredici pagine di manoscritti, piccole, sfocate e scure. Al centro c’è una finestra larga una pagina: quello che le passa sotto diventa nitido e prende colore, poi torna a sfocarsi. È la pietra da lettura fatta animazione.

Il nastro è clonato una volta e scorre con la Web Animations API, 32 secondi per giro, all’infinito, e si ferma quando la scheda non si vede. Sopra, due pannelli coprono i lati con una sfocatura dello sfondo e lo scuriscono; ognuno ha due maschere intersecate, una sfumatura di 48 pixel verso il centro e una di 18 in alto e in basso, e fra i due resta la finestra, con due parentesi a incorniciarla. Nella nostra demo i manoscritti sono francobolli disegnati, la lente è rotonda e ingrandisce davvero: dentro c’è una seconda copia del nastro, nitida e ingrandita attorno al centro della lente. Il nastro rallenta sotto il mouse, e si trascina e si lancia.

La finestra che sbatte le palpebre

Più giù, a tutto schermo, c’è una fotografia in bianco e nero, e davanti una finestra con un video di dettaglio: il sorriso della coppia che si abbraccia, i semi del campo di soffioni. Ogni due secondi la finestra si chiude sulla sua riga di mezzo, come una palpebra, e si riapre su un’altra scena.

Il ciclo è scritto con la Web Animations API: due secondi aperta, un secondo e mezzo per chiudersi con la curva cubic-bezier(0.65, 0, 0.35, 1), trecento millesimi chiusa, mentre la foto dietro sfuma in trecento millesimi e parte il video successivo, poi le stesse animazioni al contrario. Gira solo mentre la sezione si vede. Nella nostra demo le scene sono disegnate in SVG e il dettaglio è la stessa scena ingrandita, un secondo use con un viewBox stretto, quindi sempre nitido; la palpebra è un’ellisse che si stringe solo in altezza, così il rettangolo diventa una mandorla prima di chiudersi.

La cucitura

Il piè di pagina è diviso in due. A sinistra, su nero, la frase dice che gli occhiali non servono più solo a vedere il mondo; a destra, su bianco, che servono a come il mondo vede te. In mezzo passa una fila di volti: attraversando la cucitura ognuno si mette gli occhiali, e lo sfondo cambia colore.

Le file sono due, identiche, con le stesse persone negli stessi punti: una di ritratti senza occhiali, l’altra delle stesse persone con occhiali da sole o da moda; ognuna è tagliata sulla sua metà, e tutte e due scorrono della metà della loro larghezza in trenta secondi, in continuazione. Al telefono la cucitura diventa orizzontale e la fila verticale, e si vede Einstein diviso a metà, senza occhiali sopra e con gli occhiali scuri sotto. Nella nostra demo al posto dei volti ci sono oggetti, disegni tecnici di qua e cose finite di là, e la cucitura si può trascinare.

Gli altri dettagli

In alto al centro una donna cambia occhiali due volte al secondo: nove immagini una sopra l’altra, e un intervallo di 500 millesimi che passa alla successiva senza dissolvenza, come un passo uno. Sei ritratti a olio, da Puškin a Caterina la Grande, stanno sotto un velo sfocato con un occhio sbarrato, e passandoci sopra si scoprono nitidi e con gli occhiali. Frecce a gomito si disegnano da sole dentro una maschera SVG, righe di quota si aprono dal centro, barre crescono con lo scorrimento. Nella parola RIVET la V è trasparente e al suo posto c’è un paio di occhiali a rivetto. Una scheda fissata passa in rassegna pince-nez, occhialino e monocolo, con gli indici ai lati. Nelle frasi, fra le parole, ci sono piccoli pittogrammi, e un aggettivo è scritto in punti Braille. Il menù è una pillola nera che si allarga, e un archivio di otto modelli, dai rotondi del 1900 agli occhiali con la fotocamera, cambia un grande ritratto a ogni scheda.

Dove inciampa

Il caricamento aspetta che la pagina abbia finito di scaricare tutto, e la pagina è pesante: cinque video da 1920 pixel e circa centotrenta immagini. Nelle nostre prove la palpebra si è aperta dopo quattro o cinque secondi la prima volta, poi dopo venti o venticinque; al telefono l’evento di caricamento è arrivato a quasi venticinque secondi. In più, all’avvio la pagina blocca per 2,7 secondi la rotella, il dito e le frecce.

Le didascalie grigie sul bianco, a 11,7 pixel, hanno un contrasto di circa 2,5 a 1, e le etichette più piccole scendono a 9 pixel. Nel menù c’è un refuso che si nota: «Archieve».

Il resto regge: la sezione del battito gira solo quando si vede e mette in pausa i video, il nastro dei manoscritti si ferma con la scheda nascosta, e al telefono sopravvivono tutti gli effetti, cucitura compresa, anzi più chiara.

Cosa ci portiamo via

Quando il soggetto è la vista, ogni animazione può essere un gesto dell’occhio: mettere a fuoco, strizzare, sbattere le palpebre, guardare attraverso una lente. E per far cambiare qualcosa sotto gli occhi basta disegnarlo due volte e tagliare le due copie nello stesso punto.