Meech213, com’è fatto: il menu a quadrante, le foto a ventaglio e la cupola da girare

Meech213 è il sito di Dametreus Ward, fotografo e regista di moda e bellezza: ritratti, campagne per marchi, copertine di riviste, musica. Le pagine sono cinque, Home, Photo, Video, About e Book, quella per prenotare uno scatto. Il fondo è una carta bianco caldo, #F8F6F1, e l’inchiostro un nero appena caldo, #141212, che nel menu scende a trasparenze del 40, del 10 e del 5 per cento; i colori veri li mettono le foto. I caratteri sono due: Ceraph Roman, un serif sottile, tutto maiuscolo e stretto di quattro centesimi, per il menu e i titoli, e Articulat CF di Adobe Fonts per i testi. In un angolo, storta, c’è la scritta It’s Meech’s time: il tempo è il filo di tutto il sito. Sul sito di CSS Design Awards è stato Sito del giorno l’8 giugno 2026, con 8,27 dalla giuria. Il sito lo firma The Blackpepper Studio, di Londra; in fondo a ogni pagina c’è scritto Site by TBP.

È un sito Next.js 16, con React 19. Le animazioni sono di GSAP 3.15, con useGSAP, ScrollTrigger e Observer; nel pacchetto c’è anche Lenis 1.3.26. Le foto in 3D sono Three.js dentro React Three Fiber, col renderer nuovo WebGPU e i materiali a nodi: le deformazioni sono scritte nel linguaggio a nodi di Three, non in GLSL. Su Safari prima della versione 18.4 il sito chiede a Three di usare WebGL. I valori che citiamo vengono dal codice pubblico, i pezzi minificati che il sito carica, rimessi in ordine.

Lo smontiamo in tre momenti, con una demo rifatta da zero per ognuno, nello stile minimal, per uno studio di fotografia di moda inventato, Velure: le immagini, le parole e il codice sono nostri. Dal sito abbiamo preso le idee e, dove lo diciamo, i numeri.

Il menu a quadrante

Il menu sta in fondo allo schermo ed è un orologio. Le voci, Photo, Video, About, Book e Home, stanno sul bordo di un quadrante visto di sbieco, e in mezzo ci sono due lancette sottili e un perno. La voce della pagina in cui sei sta in alto a destra, piena e con un’ombra morbida; le vicine sono grigie, quelle dietro quasi sparite. Cambiando pagina, il quadrante ruota fino a portare davanti la voce nuova, e intanto le lancette fanno un giro intero.

Il quadrante è un riquadro largo al massimo 800 pixel e alto la metà, con il centro al 50 per cento della larghezza e all’84 per cento dell’altezza: l’ellisse delle voci ha i raggi al 38 e al 52 per cento, così la parte bassa finisce sotto il bordo della pagina. I posti sono dieci, ognuno con la sua opacità e la sua scala: 1 e 1 per quello davanti, 0,4 e 0,97 per i vicini, poi 0,1, 0,05 e 0 per quelli dietro. Ogni voce ha anche una copia fantasma, così la ruota è sempre piena. Al cambio di pagina una timeline di GSAP sposta ogni voce di tanti posti quanti servono, per la strada più corta, in 1,18 secondi con la curva power4.inOut, e fa girare l’orologio da 0 a meno 360 gradi, o più 360 se il passo è all’indietro. Le lancette sono righe da un pixel, una di 4,5 rem a meno 38 gradi e una di 8 rem a meno 20, col perno di 0,28 rem, che girano attorno allo stesso punto all’84 per cento.

Alla prima visita il quadrante fa anche da intro. Si ingrandisce a una volta e mezza in 0,82 secondi, appoggiato sul bordo in basso, e al posto delle pagine mostra le categorie del lavoro, Fashion, Beauty, Brands, Magazine e Artist; poi gira da una all’altra, un passo ogni 0,87 secondi circa, e alla fine torna su Home tornando alla sua misura in 0,93 secondi. Le categorie spariscono in 0,24 secondi, una ogni 18 millesimi, e le pagine compaiono in 0,52, una ogni 4 centesimi.

Nella nostra demo le voci sono quelle di uno studio, Work, Films, About, Book e Index, e prima le categorie, Editorial, Beauty, Campaigns, Portraits e Music; il serif è variabile e la voce che arriva davanti prende peso. L’ellisse con il centro all’84 per cento e i raggi al 38 e al 52, le opacità dei posti, gli 1,18 secondi con power4.inOut, lo zoom a una volta e mezza e i tempi delle etichette sono quelli del sito; le tacche, il perno vermiglio, la lancetta dei minuti che fa un giro a ogni voce e si ferma puntando quella davanti, e il clic su ogni parola sono nostri.

Le foto a ventaglio

Mentre il quadrante passa da una categoria all’altra, sopra di lui compaiono cinque foto, una per categoria, disposte su un arco come carte in mano: quella in mezzo dritta, le altre sempre più storte verso i lati. Quando il menu torna su Home le foto salgono un poco, si spengono e il palco intero si sfoca, mentre sotto arriva la cupola.

Le carte sono piani di Three.js in un canvas a parte, con una camera stretta, 30 gradi di campo, e i loro posti sono scritti come frazioni dello schermo: al centro a metà larghezza e al 19 per cento dell’altezza, poi al 34 e al 66 per cento, poi al 22 e al 78, ruotate di 0, più o meno 18 o 19 e più o meno 23 gradi, alte il 19 per cento dello schermo per 0,9, 0,84 e 0,8. Sul telefono i posti sono altri, più bassi e più stretti. Ogni carta parte un po’ più in basso, a 0,88 della sua misura e trasparente, e arriva in poco più di mezzo secondo, 0,527, con power3.out; entrano da destra a sinistra, la prima subito e le altre una a ogni passo del quadrante. All’uscita le carte, nello stesso ordine e una ogni decimo di secondo circa, si spengono, salgono e scendono a 0,97 in 0,25 secondi, e intanto tutto il palco va a opacità zero e a un blur di 8 pixel in 0,65.

Nella nostra demo le foto sono campi di colore disegnati nel codice, con il nome della serie scritto piccolo, e sotto il ventaglio la parola della categoria cambia con ogni carta; alla fine, nel blur, si compone il marchio. Le dieci posizioni, le rotazioni, le misure, l’ordine da destra a sinistra, gli 0,527 secondi con power3.out e l’uscita col blur di 8 pixel sono quelli del sito; la stampa che si posa con un pixel di troppo, la parola che sale prendendo peso e il segno vermiglio che cammina sul filo delle tacche sono nostri.

La cupola da girare

Finita l’intro, le foto sono attorno a chi guarda: la camera sta al centro di una cupola e le immagini sono appese sulla parete, un po’ curve, più grandi davanti e più piccole in alto e in basso. La rotella, o il dito, fa girare la cupola, che continua da sola e rallenta piano; quando gira veloce le foto si piegano, perché il loro centro resta indietro rispetto ai bordi.

I piani sono dodici, su un cerchio di raggio 15,2 unità, a 0,95 del raggio; l’altezza di ognuno cambia con un angolo che va su e giù a gruppi di tre, e quelli che starebbero troppo in alto sono tirati giù dell’80 per cento. Ogni piano è alto 8,1, largo fra 5,6 e 9,9 secondo il formato della foto, diviso in 16 per 16 pezzi perché si possa piegare, e guarda il centro. La camera, 60 gradi di campo, sta ferma in mezzo e guarda un punto che gira attorno, un po’ in basso. La rotella aggiunge alla velocità 0,18 per ogni pixel, fino a 180 in un senso o nell’altro; il dito funziona allo stesso modo, ma solo dopo 6 pixel, sull’asse che ha scelto per primo. A ogni fotogramma la velocità si moltiplica per 0,92, misurato su 60 fotogrammi al secondo, così la cupola frena allo stesso modo su ogni schermo.

La piega è scritta nel vertex shader, a nodi: ogni punto va indietro di 0,11 per il coseno della sua altezza per 0,18, che curva la foto come la parete; scende di quanto è veloce la cupola per il seno della sua posizione da un lato all’altro, che fa restare indietro il centro; e si allontana di 0,05 per l’altezza alla 1,25, così le foto in alto e in basso si chinano. Le foto non finiscono mai: dei dodici piani solo gli otto più davanti contano come visibili, e quando uno esce dietro prende la foto successiva della lista, al massimo quattro per fotogramma. I video partono solo sui piani girati verso la camera e si fermano appena escono. All’entrata i piani arrivano dall’alto verso il basso, ognuno da 1,25 più giù e 0,45 più indietro, a 0,92 della sua misura, in tre quarti di secondo con power3.out.

Nella nostra demo le foto sono disegnate in un canvas, campi di carta e d’inchiostro con una sola tinta d’accento, e la cupola, a riposo, gira piano da sola e ogni tanto si dà una spinta. Il raggio, i dodici posti con l’altezza a gruppi di tre e le foto alte tirate giù, i 16 pezzi, la camera, lo 0,18 della rotella, lo 0,92 dell’inerzia, gli otto posti visibili e la forma della piega sono quelli del sito. Nostri sono la deriva e le spinte, la piega sei volte più forte, perché si veda anche in una casella piccola, e il marchio sotto, che prende peso quando la cupola corre. Il disegno è il WebGL di Three.js, non il WebGPU del sito.

Gli altri dettagli

L’intro c’è una volta sola per visita: il sito lo ricorda in sessionStorage, e chi chiede meno movimento al sistema non la vede mai e trova subito la cupola. Nella pagina Photo le foto stanno in una fila che scorre di lato senza fine, con la stessa piega della cupola e la stessa frenata di 0,92; sopra le foto c’è il nome della persona ritratta, in corsivo bianco, che si spegne quando la fila corre più di poco e si riaccende quando si ferma. Anche qui c’è un orologio, disegnato in 3D, con la lancetta delle ore a 32 gradi e quella dei minuti a 12.

Nella pagina About la foto si apre dall’alto con un clip-path, dal 100 per cento a zero, scendendo da una volta e tre decimi alla sua misura in un secondo e mezzo con expo.out, e le parole del testo si accendono mentre si scende, da due decimi di opacità a piena, fra l’85 e il 75 per cento dello schermo. Nella pagina Book i generi di fotografia, Beauty, Magazine, Advertising, Maternity, Fashion e Cinematography, stanno in cerchio attorno al modulo e arrivano girando: ognuno parte 18 gradi più indietro sul cerchio e scivola al suo posto in 0,6 secondi, uno ogni cinque centesimi.

Dove inciampa

Il menu a quadrante è bello ma chiede di leggere parole storte e mezze sparite: solo la voce davanti si legge bene, e le altre, al 40 per cento o meno di un grigio già chiaro, sono poco contrastate. Sul telefono le voci scendono a 1,5 rem e il quadrante occupa quasi tutta la larghezza.

Il pacchetto con Three.js e i suoi materiali a nodi pesa da solo 1,5 MB, circa 400 KB compressi, e la home ne ha bisogno prima di mostrare qualsiasi foto; nella pagina ci sono 67 indirizzi di immagini e video. Sotto la cupola la pagina ha comunque i 42 collegamenti ai lavori in HTML, e i motori di ricerca li trovano; ma le 27 immagini scritte nella pagina hanno tutte il testo alternativo vuoto. Il movimento ridotto salta l’intro, ma la cupola si piega lo stesso quando la si gira.

Cosa ci portiamo via

Un’idea, il tempo, portata dappertutto: lo slogan, il menu che è un orologio, le lancette che fanno un giro a ogni pagina, anche un orologio nella pagina delle foto. E il modo di far sentire la velocità senza effetti in più: le foto che si piegano perché il centro resta indietro, e i nomi che spariscono quando si corre. Due numeri, quanto si piega e quanto frena, fanno quasi tutto.