Realevate, com’è fatto: un sito dove ogni pagina è una carta

Realevate è un’agenzia che vende case da investimento a Cipro, in Montenegro e in Georgia, «a partire da centomila euro». Il sito divide le case in quattro collezioni, By The Sea, Evergreen, Urban Living e Rare Gems, più le pagine di chi sono e dei contatti. L’hanno fatto Or Halevi, designer e creative developer di Tel Aviv, e lo studio MAKETHECUT.

A prima vista sembra un dépliant di lusso: il marchio blu notte su fondo bianco, un colore scuro e prezioso per ogni collezione (un blu di mare, un verde bosco, un prugna, quasi un nero) e rendering pieni di sole. I titoli sono in Roslindale Display, un serif sottilissimo, il resto in Google Sans, il prezzo in Monument Extended, largo e maiuscolo. Ma quello che resta in mente è un’altra cosa: tutto il sito è un palco solo, e ogni pagina viene rimpicciolita, distribuita, fatta scivolare e ritagliata come se fosse una carta.

Sotto non c’è un framework. Sono pagine HTML statiche che un solo file JavaScript scritto a mano, 285 KB, trasforma in un’applicazione: scarica la pagina nuova, la monta dietro quella vecchia e cambia l’indirizzo. Le animazioni sono di GSAP 3.12, con ScrollTrigger e SplitText; lo scorrimento morbido è fatto in casa e le curve sono cubic-bezier risolte da una funzione scritta apposta. Niente WebGL. Qui lo smontiamo in tre momenti, con una demo rifatta da zero per ognuno: le foto sono disegni nostri, e così i testi, i nomi e il codice. Dal sito abbiamo preso l’idea e i tempi.

La pagina che diventa una carta

La home non scorre. Dietro la foto quadrata al centro passa, enorme, la scritta «Elevating Life», e la foto sembra una finestra ritagliata nella parola. Al primo colpo di rotella in giù, invece di scendere, tutta la pagina si rimpicciolisce e si appoggia in basso al centro, e sopra salgono quattro carte alte, una per collezione, ognuna col suo colore, un simbolo, il nome in piedi e una foto in fondo. Scegliendone una, la sua pagina sale nello spazio libero mentre la vecchia si scurisce; poi si allarga a tutto schermo e le carte ricadono in ordine inverso. La carta della collezione in cui ti trovi diventa bianca e riporta alla home.

Il conto che fa funzionare tutto è uno solo: la pagina rimpicciolita è larga come due carte più lo spazio fra loro, quindi la scala è (2 × carta + spazio) / schermo, con l’origine in basso al centro. Poi la si abbassa quanto basta perché se ne veda solo la parte alta, nello spazio che resta sotto il mazzo. Le carte partono a 47 millesimi l’una dall’altra e dentro ciascuna arrivano in fila il simbolo, il nome e il testo. Tutto usa la stessa curva, una cubic-bezier(0.7, 0.6, 0, 1) che parte quasi piatta e frena lunghissima: è lei a dare al mazzo il peso di un mazzo vero. Nella demo le collezioni diventano i quattro paesaggi di Altrove, un marchio inventato: mare, bosco, città e deserto.

Continua a scorrere

Ogni collezione finisce con la carta di quella dopo, e un piè di pagina non c’è. Arrivati in fondo si può continuare a scorrere: la pagina non si muove più, ma compare un anello con scritto «Scroll» che si riempie piano in senso orario, e si svuota se ti fermi o torni su. Quando è pieno, la carta si stacca, si allarga a tutto schermo mentre le sue scritte scappano in alto, e dietro nasce la pagina nuova; poi la stessa foto si rimpicciolisce fino a diventare il quadro della pagina appena arrivata. Una collezione porta all’altra e il giro non finisce mai.

L’accumulo si arma solo quando la pagina è in fondo e la carta si vede almeno per il 22 per cento: da lì ogni colpo di rotella conta per l’ottanta per cento, al massimo 64 pixel alla volta, fino a 1100. L’anello non mostra il conto esatto ma lo insegue con una frenata che non dipende dai fotogrammi al secondo: si riempie lento e si svuota quasi quattro volte più in fretta, ed è questo a farlo sembrare un respiro trattenuto. Nel sito è un conic-gradient ritagliato a corona da una maschera; nella demo è il tratto di un cerchio SVG, che si anima con una sola proprietà. In tutti e due i casi sta in mix-blend-mode difference, così si legge su qualunque colore. Nel sito, al computer, l’anello segue il puntatore; nella demo resta fermo al centro, come fa il sito stesso al telefono, e mentre si riempie la frase d’invito si fa da parte. La carta, poi, si può anche toccare. I capitoli sono tre ore del giorno: alba, meriggio e tramonto.

La galleria in diagonale

Dentro le collezioni c’è una fila di foto che attraversa lo schermo di traverso, salendo verso destra, ma con ogni foto dritta. Mentre scorri la pagina la fila si sposta di lato, un pixel per ogni pixel; la si può prendere e trascinare, e lanciata scivola ancora un poco prima di fermarsi. Non finisce mai.

Il contenitore ruota di -8 gradi e ogni foto di +8: il binario corre sulla diagonale e le immagini restano in piedi (al telefono bastano quattro gradi). Gli originali stanno in mezzo a due serie di copie e la posizione si avvolge sulla larghezza di una serie. Scorrimento, trascinamento, lancio e frecce muovono tutti lo stesso bersaglio, e la fila lo insegue a ogni fotogramma: il trascinamento vale due volte e mezzo il dito, il lancio perde il sei per cento ogni sessantesimo di secondo. Nella demo, al posto delle case, ci sono sei decori di maiolica; e rispetto al sito abbiamo aggiunto una cosa: quando nessuno la tocca, la fila va avanti da sola, pianissimo.

Gli altri dettagli

Il caricamento è un piccolo spettacolo: su un fondo blu notte si aprono dal centro, una ogni mezzo secondo, cinque foto grandi quanto il quadro della home, come il diaframma di una macchina fotografica, mentre un contatore a due cifre rotola da 27 a 99. Poi il blu si alza come una tapparella e il quadro scivola al suo posto. Il cartellino del prezzo si disegna un lato alla volta, in senso orario. Il menù è un quadrato blu che si apre a partire dal pulsante stesso, e le sue voci, al passaggio del mouse, fanno rotolare le lettere verso l’alto una dopo l’altra. Le pagine di chi sono e dei contatti arrivano dentro una finestra che si apre fino a tutto schermo, mentre la vecchia pagina sale e si scurisce.

Ogni misura, poi, è in vw moltiplicata per il più piccolo fra uno e l’altezza dello schermo divisa per 950: la home sta sempre in una schermata, qualunque sia la forma della finestra. E con Maiuscolo e G compare la griglia a dodici colonne su cui è disegnato tutto.

Dove inciampa

Il movimento ridotto è rispettato a metà: con l’impostazione attiva sparisce il caricamento e lo scorrimento torna quello del browser, ma la parola enorme della home continua a scorrere, e non c’è un modo per fermarla.

Con la tastiera non si vede dove si è, perché il contorno del focus è tolto dai link e dal pulsante del menù. Nessun testo si può selezionare, nemmeno il numero di telefono e l’indirizzo email. Al telefono in orizzontale il sito chiede di girarlo. E il verde dei testi di Evergreen su bianco ha un contrasto di 3,09 a 1, sotto il minimo di 4,5.

Lo scorrimento, poi, quasi mai fa quello che ci si aspetta: nella home apre il menù, in fondo a una collezione porta via dalla pagina, e durante le transizioni rotella, dito e tasti non rispondono. È la scelta che rende il sito memorabile, ma chi cerca solo un’informazione deve prima capire il gioco.

Infine il peso: quasi quattro secondi di caricamento a ogni prima visita, mezzo megabyte di immagini prima di vedere la home e 285 KB di JavaScript scritto a mano che tiene insieme tutto.

Cosa ci portiamo via

Un menù può essere il gesto più memorabile di un sito, se usa una metafora fisica: la pagina che diventa una carta fra le altre si capisce senza spiegazioni. E la fine di una pagina può essere una porta invece di un piè di pagina, purché ci sia sempre anche una maniglia visibile, la carta da toccare.