Chāmpo, com’è fatto: un negozio che si muove poco, e bene

Chāmpo è un marchio inglese di prodotti per capelli che si rifà all’ayurveda, e il suo sito è prima di tutto un negozio. Lo ha fatto l’agenzia BAO, su Shopify, con un tema costruito apposta. I prodotti sono divisi in tre famiglie, i tre dosha dell’ayurveda, Vata, Pitta e Kapha, e ognuna ha un colore: grigio pietra, terracotta rosata e arancio bruciato.

Il tono è caldo e quieto: fondi color sabbia, pesca e cipria, testo e rettangoli neri, ritratti su campiture pastello e fotografie di flaconi al sole, con ombre lunghe e dure. Il carattere è uno solo, un grottesco umanista fatto per il marchio, in tondo e corsivo; il corsivo va sulla parola che profuma o che emoziona, il nome del prodotto, l’idratazione, la lucentezza.

La cosa più interessante è quanto poco si muove. Non c’è GSAP, non c’è WebGL, non c’è uno scorrimento morbido: ci sono transizioni CSS, qualche animazione a fotogrammi chiave, qualche ascoltatore dello scorrimento e un parallasse leggerissimo con Rellax. La pagina sembra una rivista aperta, non un negozio. Qui lo smontiamo in tre momenti, con una demo rifatta da zero per ognuno: erbe, disegni, testi, colori e codice sono nostri. Dal sito abbiamo preso l’idea e i tempi.

L’inchiostro sul bottone

Il gesto che si ricorda è piccolo. Ogni bottone è un quadrato col bordo nero di due pixel, e dietro l’etichetta c’è una lastra nera. Passandoci sopra, nel bottone pieno la lastra esce verso destra e il testo diventa nero; in quello vuoto la lastra entra da sinistra e il testo diventa bianco. A metà corsa la parola è mezza bianca e mezza nera.

Nel sito la lastra è uno pseudo-elemento dietro il testo, che scorre in 0,5 secondi con ease-in-out, mentre il colore del testo cambia in 0,2. Nella nostra demo il testo si spezza proprio sul bordo: sopra la base c’è una seconda copia del bottone già inchiostrata, tagliata da un clip-path. Il bordo è frastagliato come quello di un pennello, e la pennellata entra dal lato da cui arriva il puntatore ed esce da quello verso cui se ne va; se torni sopra mentre sta uscendo, ci ripensa e torna indietro.

Le colonne di colore

La schermata più riconoscibile della home presenta i tre dosha: tre colonne alte quanto lo schermo, grigio pietra, terracotta e arancio, ognuna con un solo segno nero di pennello calligrafico, un titolo, una riga e due bottoni. Passando su una colonna, dal colore esce un ritratto a tutta altezza, e il segno e il testo restano sopra.

Il ritratto sta fra il colore e il testo e passa da opacità 0 a 1 in 0,75 secondi; andando da una colonna all’altra le due foto si incrociano, e sembra che la persona esca dal colore. Al telefono le colonne vanno una sotto l’altra e il ritratto è sempre visibile. Nella nostra demo al posto dei ritratti ci sono tre erbe disegnate, salvia, lavanda e zafferano; i segni calligrafici si disegnano da soli all’apertura, e la colonna accesa si allarga mentre le altre si spengono appena.

I capitoli di colore

La pagina che spiega i dosha è l’unica vera scena di scorrimento del sito. È divisa in tre capitoli: a destra un terzo dello schermo resta fermo, del colore del capitolo, col suo segno di pennello grande, una frase e un bottone; a sinistra scorrono ritratti di clienti, testi e fotografie dei prodotti, un poco più lenti del testo. Quando arriva il capitolo dopo, il suo pannello spinge via il precedente: grigio, poi terracotta, poi arancio.

È fatto con position: sticky e Rellax: le foto vanno a velocità −1, cioè restano indietro di circa il 7% dello scorrimento, e gli elementi salgono di 30 pixel quando entrano. Al telefono il pannello sparisce e al suo posto scende una barra fissa in alto, col colore, il nome e un segno piccolo del capitolo: un indicatore semplice e riuscito. Nella nostra demo i capitoli sono le ore di una giornata all’orto, il pannello cambia colore in modo continuo invece di essere spinto via, e il segno di ogni capitolo si scrive e si cancella col pennello mentre scorri.

Gli altri dettagli

L’intestazione se ne va quando scorri in giù e torna solo dopo che sei risalito di almeno 250 pixel, e sopra la prima immagine è trasparente, poi diventa bianca. Nel menù, passando su una voce le altre scendono a un’opacità di 0,4. In basso a destra della prima schermata la parola «Scroll» è scritta in verticale con una freccia lunga; sparisce appena scorri, e cliccandola la pagina scende con una curva easeInOutQuint lunga al massimo 0,8 secondi. Nelle schede dei prodotti la foto sale di 20 pixel al passaggio del mouse. Nelle pagine dei prodotti c’è un confronto prima e dopo con una maniglia che, quando entra nello schermo, oscilla da sola come una molla che si ferma, per invitare a trascinarla. E nel foglio di stile c’è ancora un caricamento non usato: due bande nere che si ritirano in 3,1 secondi mentre l’immagine rimpicciolisce per venti secondi.

Dove inciampa

Dopo mille pixel di scorrimento compare una finestra per iscriversi alla newsletter, sopra a tutto, proprio mentre si comincia a leggere.

Per un sito che si muove quasi solo con transizioni CSS, il codice è pesante: un file JavaScript di 335 KB, con dentro anche jQuery, e un foglio di stile di 395 KB, dove resta anche il caricamento che la home non usa più.

Il parallasse è così leggero, una decina di pixel per parte, che quasi non si vede; e sotto i 900 pixel di larghezza sparisce del tutto; al telefono si perde anche l’apparizione dei ritratti, che restano sempre visibili. Fra badge dei premi sui flaconi, stelle di Trustpilot e selettori di valuta, la parte del negozio rompe un po’ la calma della rivista.

E la cosa più viva del sito non si muove: la luce delle fotografie, il sole duro, le ombre lunghe, le gocce d’olio. I prodotti non sono mai animati.

Cosa ci portiamo via

Un negozio può farsi ricordare con tre campiture di colore e un solo gesto ben fatto sui bottoni, ripetuto dappertutto. E un pannello sticky che cambia colore, con una barra al posto suo al telefono, racconta dei capitoli quasi gratis.