Pensatori Irrazionali, com’è fatto: un gesso bianco che si sveglia al passaggio

Pensatori Irrazionali è il sito di uno studio creativo che si presenta come una casa europea al lavoro in tutto il mondo (l’indirizzo in fondo alla pagina è a Dubai) e che ha lavorato per nomi come Vodafone, Cadillac, FaZe Clan e Neymar Jr. Lo studio l’ha fatto da sé: su Awwwards il credito è suo, ed è stato Sito del giorno il 20 settembre 2026.

L’impianto alterna due mondi. Il caricamento è un laboratorio nero, con pannelli bordati, testi che si decifrano, spie verdi che si accendono una dopo l’altra e un globo bianco che si gonfia da un punto, circondato da orbite che si disegnano. Poi delle persiane bianche coprono tutto, compare un leone araldico sopra un tricolore che cresce barra per barra, e la pagina intera si solleva come una carta per lasciare il posto a un mazzo di nastri colorati, ognuno con il marchio di un cliente. Da lì il sito è una galleria grigio chiaro: titoli enormi in un corsivo da incisione su rame, il Ballet, testi in Helvetica Now, angeli incisi, gessi bianchi, e un colore acceso per ogni servizio.

Sotto c’è Next.js 16 con Sanity per i contenuti, GSAP 3.14 (ScrollTrigger, SplitText, Flip, ScrambleText, DrawSVG e CustomEase), Lenis per lo scorrimento e Three.js con il WebGPURenderer e i materiali scritti in TSL. Il passaggio fra le pagine usa la View Transitions API. 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 luce radente

A metà della home, dietro la mappa con le coste di Los Angeles e di Tokyo, c’è un’area bianca che sembra vuota. Passandoci sopra col mouse compaiono due bassorilievi di gesso, due angeli: le piume si staccano con ombre profonde dove passa il puntatore, e dopo un paio di secondi tornano bianco su bianco. È il momento più bello del sito, e non si vede finché non lo si tocca.

Ogni rilievo è la stessa immagine preparata prima sotto sei luci, dalla più piatta alla più radente, messe in un’unica texture KTX2 da 1440 × 1440 pixel. Il puntatore disegna una scia che sbiadisce da sola su una tela di 216 pixel, dentro un web worker con un OffscreenCanvas: 200 punti al massimo, ognuno un timbro morbido che si spegne in due secondi, più due punti vaganti che timbrano da soli, così il gesso respira anche quando nessuno lo tocca. Lo shader sfoca la scia con cinque campioni e da quel valore sceglie, mescolandole, fra le sei luci. Si disegna 44 volte al secondo, meno sulle macchine lente, e il giro si ferma quando non serve. Nella nostra demo niente angeli e niente sei immagini: un rosone disegnato dallo script come mappa d’altezza, e la luce calcolata dallo shader a ogni fotogramma, con le ombre portate che si allungano quando la luce si abbassa. Così la demo pesa pochi kilobyte, e per cambiare il disegno basta un canvas.

La lettera che cade

Verso la fine della pagina c’è la parola BUILD, a tutta larghezza. Scorrendo si ripete a scalini: sei copie una sopra l’altra, ognuna su una lastra del colore del fondo, sempre più piccole e più in basso, così delle copie dietro restano solo le cime. Poi la I si inclina, cade sotto la parola e si scopre che è un bottone: CONTACT US, che si scrive rimescolando le lettere.

Le copie sono SVG, e lo scorrimento porta la copia numero i a scala 1 − i/13 facendola scendere del 2i% della sua altezza (al telefono 1 − i/12 e 10i%). La I della copia davanti è un link vero, che ruota e cade seguendo lo scorrimento; quando arriva, ScrambleText ne scrive il nome. Nella nostra demo la parola è SCRIVI e la sua I diventa SCRIVICI, la scena resta ferma mentre succede tutto, e l’atterraggio ha un suo piccolo rimbalzo a tempo, non legato allo scorrimento. Cadendo, la barra si allarga fino a uno spessore comodo per un dito.

Il menù dei foglietti

Il menù sta in un bottone di 44 pixel a forma di biglietto, con gli angoli morsi da un quarto di cerchio di 8 pixel. Aprendolo, il bottone stesso cresce e diventa il pannello, le voci scendono al loro posto e a fianco arrivano le notizie dello studio, un poco storte, che si raddrizzano. Chiudendolo le notizie non spariscono: cadono come fogli lasciati andare.

Nel sito pannello e notizie sono di vetro scuro, all’80% con una sfocatura dietro. Le notizie arrivano da 8rem a destra e 2rem in alto, con una rotazione a caso fra −7° e 7°, in 0,55 secondi. La caduta dura 0,8 secondi con power2.in: ogni scheda si sposta di lato a caso e gira fino a 58° attorno a un punto diverso della sua superficie, in ordine sparso. Nella nostra demo le notizie sono ritagli di carta su una pagina grafite, la caduta si piega anche in profondità, e ogni foglio usa lo stesso ritardo a caso per cadere e per girare, così la traiettoria ondeggia invece di separarsi.

Gli altri dettagli

Il passaggio fra le pagine rimpicciolisce la pagina vecchia all’85% e la fa volare via verso l’alto in 1,2 secondi, mentre la nuova sale dal basso in 1,8, con una curva molto decisa, cubic-bezier(0.86, 0, 0.07, 1). I titoli dei lavori si rimescolano in minuscolo al passaggio del mouse, e cliccando una riga la sua colonna si allarga fino a diventare la testata del progetto, che si apre con la stessa impaginazione: sembra lo stesso elemento, invece è una pagina nuova. Le coordinate di Los Angeles e di Tokyo girano come un contachilometri, le lettere H e D di una citazione di Warhol ogni tanto scattano come le palette di un tabellone, e alla fine di ogni progetto una barra nel colore del successivo si riempie scorrendo e porta avanti da sola. C’è un universo dei lavori senza fine, visto con un obiettivo a occhio di pesce e i colori un poco separati sui bordi, e nella pagina di errore un leone a pixel che corre e raccoglie pizze e vino. I suoni accompagnano quasi ogni gesto, e il codice Konami ha la sua sorpresa. Prima di tutto questo, uno script dà un voto alla macchina (memoria, processori, scheda video) e decide quanto disegnare.

Dove inciampa

Il peso. La home carica in anticipo due texture da 16,6 MB per i rilievi; il menù ne precarica altre sei da 10,9 MB per una mano di gesso, circa 65 MB, e il browser stesso avverte che non vengono usate subito. Con il video dei lavori (19,1 MB), quello delle bandiere (5 MB) e più di un megabyte di HTML, una visita può superare i 120 MB.

Il tempo. Caricamento, persiane e passaggio fanno quasi sette secondi prima del contenuto, a ogni caricamento completo, anche arrivando da un link diretto, per esempio all’universo o alla pagina di errore; e intanto la pagina non scorre.

La lettura. Le voci del menù a riposo sono grigio su grigio scuro, con un contrasto di 2,45 a 1, e i testi del caricamento, di 12 pixel, arrivano a 2,9. Il titolo principale è una riga di 16 pixel con il nome del marchio, una fascia scorrevole ripete sei volte la stessa frase e 21 immagini su 70 non hanno un testo alternativo: non a caso il voto più basso della giuria degli sviluppatori è per semantica e SEO, 6,6.

Il telefono. Nella home il rilievo al telefono non c’è proprio, quindi l’effetto migliore resta a chi usa il mouse; il marchio fisso in alto passa sopra i testi, e la pagina segnala un errore di idratazione di React.

Va detto il bello: il movimento ridotto è rispettato quasi ovunque (il caricamento si riduce a un attimo, i rilievi non partono, le fasce si fermano), i giri di disegno dormono quando non servono, e la perdita del contesto WebGL è gestita.

Cosa ci portiamo via

Un effetto nascosto è un premio per chi esplora, ma deve esserci anche per chi non ha un puntatore: basta una luce che ogni tanto passa da sola, o un dito che la trascina. E un bottone può nascere da una lettera: se la parola è quella giusta, l’invito a scrivere è già scritto nella pagina.