Hayler, com’è fatto: un gesto solo per tutto il sito

Hayler è un template HTML che Clapat vende agli studi creativi. A prima vista è il sito di un’agenzia come tanti: pagine chiare, un grotesk grande e stretto, qualche intermezzo nero, un solo colore acceso che compare quasi soltanto nei momenti di passaggio.

Quello che lo rende diverso non è un effetto mai visto. È la disciplina: la stessa mossa apre il sito, porta da una pagina all’altra e fa passare dalle sezioni chiare a quelle scure. Dopo due clic chi guarda la riconosce, e il sito sembra un oggetto solo invece di una raccolta di pagine.

Qui lo smontiamo un pezzo alla volta. Per ogni effetto c’è una demo rifatta da zero con grafica nostra: dal sito originale abbiamo preso l’idea e il ritmo, mai il codice o le immagini.

Un gesto solo: le colonne a scalinata

Al caricamento lo schermo è pieno di colore, diviso in quattro colonne di larghezza diversa: due strette, una larga, una stretta. Quando la pagina è pronta le colonne si ritirano, ma non in fila. Parte la terza, la più larga, poi la prima, poi la quarta, poi la seconda. Per un attimo il bordo diventa una scalinata irregolare, ed è quel gradino a dare carattere a tutto.

Ogni colonna impiega circa un secondo con una curva expo in entrata e in uscita: parte piano, accelera, frena molto. Il ritardo fra una colonna e l’altra è minimo, cinque centesimi di secondo, abbastanza per vedere l’ordine ma non per sentire un’attesa.

Quando clicchi un collegamento succede lo stesso al contrario: le colonne cadono, la pagina nuova viene caricata sotto, le colonne si ritirano. E scorrendo, prima delle sezioni nere, strisce del colore della sezione precedente si ritirano a gradini legate allo scorrimento. È sempre la stessa idea, in tre posti diversi.

La nostra versione scende dall’alto e, per aprire, continua la corsa verso il basso invece di tornare indietro: sembra una pellicola che scorre nel proiettore. Due dettagli contano più del resto. Le larghezze devono essere diverse, altrimenti sembra una tenda. E l’ordine va scritto a mano in un array, perché un ordine casuale cambia a ogni visita e smette di essere una firma.

Il tamburo delle voci

Nella sezione dei servizi, la lista si ferma sullo schermo e le voci scorrono in verticale come sul tamburo di una macchina. Solo quella che passa nella fascia centrale è piena; le altre restano al quindici per cento e sfumano del tutto ai bordi, grazie a una maschera con un gradiente trasparente sopra e sotto.

È un modo elegante di leggere un elenco lungo senza un elenco lungo: l’occhio resta fermo al centro e sono le voci a venirgli incontro.

Nella nostra versione l’opacità non scatta da una voce all’altra: dipende dalla distanza dal centro, quindi la luce scivola. Accanto al titolo abbiamo messo un rombo che gira di un quarto di giro a ogni voce, un segnale piccolo che dice «stai avanzando» senza numeri.

Il nastro che sente la velocità

Fra due sezioni scure corre un nastro di parole grandi, separate da una stella. Da solo va piano. Quando scorri la pagina accelera, fino a dodici volte, e poi torna alla sua andatura con un freno morbido. Col mouse lo puoi afferrare e lanciare; passandoci sopra rallenta fino a fermarsi.

La nostra versione aggiunge l’inclinazione: più veloce vai, più il nastro pende nel verso della corsa, come se avesse peso. Il trucco che lo rende infinito è semplice. La posizione cresce senza fine e viene «avvolta» sulla larghezza di un pezzo del nastro: quando torna indietro, al suo posto c’è una copia identica e il salto non si vede.

Le persiane sulle miniature

Le immagini dei lavori non compaiono in dissolvenza. Quando entrano nello schermo sono coperte da tre stecche del colore della pagina, due strette e una larga, che si ritirano verso l’alto in ordine casuale. Nello stesso momento l’immagine sotto passa da ingrandita a normale, un po’ più lentamente.

Abbiamo reso le stecche proporzionali alla larghezza dell’immagine: da due a cinque, sempre con l’ultima più larga. Così una griglia di foto non si apre mai tutta allo stesso modo. Attenzione al colore: deve essere identico allo sfondo vero, altrimenti prima dell’animazione si vedono dei rettangoli.

Le parole che si sciolgono

Fra gli strumenti del template ce n’è uno che la home non usa ed è il più poetico: passando sopra una parola, questa si scioglie in un’altra. Sotto c’è un filtro SVG in due passi. Il primo sfoca le lettere, il secondo taglia di netto la trasparenza. Due forme sfocate vicine diventano una goccia sola, e per un istante le due parole sono una cosa sola.

Da noi la fusione segue lo scorrimento e passa da una parola alla successiva in catena, mentre la larghezza del font scivola dall’una all’altra. Il filtro si spegne quando le lettere sono ferme: su Safari tenerlo acceso a riposo costa caro.

Dove inciampa

Il tasto Indietro del browser ricarica tutta la pagina. Si rivede il caricamento da capo, più di cinque secondi, e si atterra a metà pagina. È il punto debole di molti siti con i passaggi fatti a mano: ci si concentra sull’andata e si dimentica il ritorno.

Anche il caricamento ha un minimo di tre secondi a ogni visita. La prima volta è una presentazione, la decima è un’attesa. Sul nostro sito la schermata di caricamento compare una volta sola per sessione; dopo restano solo i passaggi, che durano meno di un secondo, e tornando indietro l’otturatore si riapre subito.

Cosa ci portiamo via

Un gesto solo, usato ovunque, vale più di dieci effetti diversi. Il movimento in Hayler è punteggiatura: segna i cambi di pagina e di sezione, poi si fa da parte e lascia leggere. E le micro-interazioni sono tante ma brevi, quasi tutte sotto il mezzo secondo, tranne i passaggi grandi, che hanno il tempo di farsi vedere.