NOTHIN’, com’è fatto: la parola che si gonfia sotto l’inchiostro

NOTHIN’ è uno studio creativo di Parigi fondato da Sara Guedj: marchi, editoria, direzione artistica e intelligenza artificiale per moda, lusso e tecnologia. Il sito ha lo sviluppo di Thomas Carré, il design di Pierre Patrault e le immagini di Guillaume Perrette. Il tono è impassibile e ironico: «Not a style, a perspective», perché «Nothin’ is Everythin’».

È una galleria bianca che si alterna a un vuoto nero. Il colore arriva solo dalle immagini, che sono oggetti lucidi e assurdi: gonfiabili, stagnola accartocciata, caramelle, un cuore di pluriball, un cagnolino di palloncino rosa. I testi sono in PP Neue Montreal, le etichette in IBM Plex Mono, e quasi ogni movimento usa la stessa curva, power4.inOut: parte piano, corre e frena piano.

Sotto c’è Webflow, che tiene l’elenco dei lavori, più un solo file JavaScript scritto a parte e servito da Netlify: 752 KB, 207 compressi. Dentro ci sono GSAP 3.13 con ScrollTrigger, SplitText e Flip, Lenis per lo scorrimento morbido, Taxi.js per i passaggi fra le pagine e Three.js, usato soltanto per il fluido della prima schermata. Le animazioni si agganciano ad attributi scritti nell’editor di Webflow, come line, letter o parallax. E c’è un dettaglio da officina: aggiungendo ?dev all’indirizzo, la pagina pubblicata carica il codice dal computer di chi sviluppa invece che dal file vero. Qui lo smontiamo in tre momenti, con una demo rifatta da zero per ognuno: parole, colori e codice sono nostri. Dal sito abbiamo preso l’idea e i tempi.

L’inchiostro che scopre

La prima schermata è il marchio NOTHIN’, nero e piatto su fondo bianco, largo quanto lo schermo. Al primo movimento del mouse la carta si strappa come inchiostro, e sotto c’è la stessa parola fatta di palloncini d’argento. Dopo circa quattro secondi la carta si richiude da sola. Tutti quelli che arrivano sul sito, senza saperlo, disegnano sul logo.

L’inchiostro è un fluido vero, calcolato con il metodo dei fluidi stabili: velocità su una griglia di 256 celle, colore su 512, venti passi per la pressione a ogni fotogramma. Il puntatore spinge la velocità e versa colore; la velocità perde il 3,8% a fotogramma, il colore l’1,2%. Il bordo netto viene da una soglia strettissima sul colore moltiplicato per 3,9: niente sfumature, solo carta o inchiostro. Nel sito, sotto, c’è un video di 20 MB con la parola gonfia; nella nostra demo non c’è nessun video e nemmeno Three.js. La parola d’argento la disegna lo shader: la stessa parola sfocata diventa una mappa d’altezza, le pendenze danno la direzione di ogni punto, e ogni punto riflette un orizzonte, cielo chiaro sopra e terra scura sotto, come fa il metallo. Quando nessuno la tocca, un pennello invisibile disegna un otto lento.

Il marchio a fisarmonica

Scorrendo, nella testata compare la sigla N’. Al passaggio del mouse lo spazio fra la N e l’apostrofo si allarga e la sigla diventa NOTHIN’: l’apostrofo scivola a destra, e le cinque lettere di mezzo salgono da sotto la linea in un ordine diverso ogni volta. Uscendo, ricadono in disordine e lo spazio si richiude.

Nel sito il marchio è un SVG: si anima la larghezza del suo viewBox, da 338 a 1398, in 0,7 secondi; ogni lettera sta in un ritaglio suo e sale in 0,6 secondi, sessanta millesimi dopo la precedente, a partire da 0,35 secondi. Per le interruzioni c’è una piccola macchina a sei stati. Noi l’abbiamo rifatto in HTML: un contenitore la cui larghezza va da zero alla somma delle lettere, con il punto che segue da solo. Invece della macchina a stati, ogni gesto ferma la sequenza in corso e ne costruisce una nuova da dove si trova. Il nostro studio si chiama Quasi, e non esiste.

Il manifesto che si sbriciola

Più in basso lo schermo si ferma su una scena dentro un ascensore, con blocchi di testo sparsi: tre volte «we are nothin’» e una riga di segni a caso. Se scorri in fretta il testo ribolle, e le lettere si scambiano con segni sbagliati. Se continui a scorrere, ogni lettera cade per conto suo come un filo di stagnola, e al centro una frase si scrive da sola.

Il ribollire dipende dalla velocità, non dalla posizione: la velocità dello scorrimento diventa un numero fra 0 e 0,45 che si spegne da solo, e ogni otto fotogrammi una finestra di 22 lettere corre lungo i blocchi scambiando segni con una probabilità che cala verso la coda. La caduta invece è legata alla posizione: ogni lettera scende di 40–160 pixel, gira di ±20 gradi e svanisce, in un momento tutto suo. La frase al centro segue la stessa timeline, con le ultime quattro lettere ancora in disordine. Nella nostra demo, perché la riga non balli mentre le lettere cambiano, ognuna tiene la sua larghezza.

Gli altri dettagli

Il caricamento è una slot machine: la N e l’apostrofo salgono, lo spazio fra loro si apre in una fessura dove gli oggetti lucidi si alternano sempre più in fretta e poi di nuovo più piano, mentre un contatore scende da 100 a 000. Poi il nero si arrotola verso l’alto come una tapparella, e le lettere giganti del marchio emergono in ordine sparso. Il video di presentazione, scorrendo, si fa da parte in un riquadro in basso a destra. L’etichetta WORKS si smonta e le sue lettere attraversano la pagina rimpicciolendosi fino a un puntino, con Flip. Il film del manifesto si allontana finché diventa uno schermo appeso in una sala da museo, con una copia sfocata dello stesso video dietro, come riflesso di luce. E alcuni oggetti scappano dal puntatore e tornano al loro posto con un rimbalzo elastico.

Dove inciampa

Alla prima visita il caricamento dura circa dodici secondi, e intanto non si può scorrere, nemmeno al telefono: nelle nostre prove un colpo di dito a cinque secondi non ha mosso la pagina di un pixel.

La home fa partire da sola quattro video per circa 82 MB, e tutte le immagini vengono forzate a caricarsi subito. Il fluido gira a ogni fotogramma finché si è in cima alla pagina, anche quando nessuno lo tocca, su una tela alta tre schermi, e al telefono non si ferma mai.

Il movimento ridotto non è previsto per niente: le animazioni restano tutte, i video in loop non hanno un modo per fermarli e la slot machine arriva a circa dieci cambi al secondo. La home non ha un titolo h1, il menu si apre solo col passaggio del mouse e dalla tastiera non si raggiunge, e ci sono sette link vuoti. Al computer la base dei caratteri è l’1% della larghezza della finestra: a 1024 pixel le etichette scendono sotto gli 8 pixel.

Cosa ci portiamo via

Un marchio può essere un giocattolo: il gesto più semplice, muovere il mouse, diventa un gioco con il logo, e nessuno se lo dimentica. E il testo può rispondere a come scorri, non solo a dove sei. Le idee migliori, però, stanno dietro a dodici secondi di attesa e 82 MB: la stessa magia, più leggera, arriverebbe a molte più persone.