bleibtgleich, com’è fatto: si chiama «resta uguale» e non sta mai fermo

bleibtgleich è il portfolio di Maksym Bleibtgleich, designer di interfacce e sviluppatore creativo che lavora da Kyiv. In tedesco il nome vuol dire «resta uguale», ed è una bella ironia: la pagina è bianca, il testo è nero, c’è un solo carattere, l’Akzidenz-Grotesk, eppure non c’è un elemento che arrivi fermo.

È la quarta versione del sito, uscita a fine luglio 2026. Sotto c’è Webflow, con GSAP e sei dei suoi plugin, Lenis per lo scorrimento morbido, Barba per i passaggi fra le pagine, Three.js per il 3D e perfino una connessione WebSocket, di cui parliamo più avanti. Nella console del browser l’autore ringrazia chi gli ha dato gli spunti di partenza per alcuni effetti: un gesto raro e giusto.

Qui lo smontiamo in tre momenti. Per ognuno c’è una demo rifatta da zero con grafica nostra: dal sito abbiamo preso l’idea e il ritmo, mai il codice o le immagini.

Il caricamento che diventa marchio

La pagina parte grigia e vuota. In basso a sinistra un numero sale da zero a cento, mentre una riga sottile scende dall’alto e divide lo schermo in due colonne. Il numero impiega due secondi, la riga quattro: arrivano sfalsati, con la stessa curva morbida in entrata e in uscita.

A cento il numero se ne va e succedono tre cose insieme. I due pulsanti d’angolo, la griglia e il menù, arrivano in diagonale da fuori dello schermo. Il marchio nasce: prima è un rettangolo nero di 95 per 160 che si scopre dall’alto, poi il rettangolo si piega nella silhouette di una testa. E le righe del nome e del titolo compaiono come macchie nere sfocate che si stringono fino a diventare lettere.

La nostra versione tiene la sequenza e cambia il materiale. Il marchio è un germoglio disegnato da noi. Le righe escono dall’inchiostro con un filtro SVG per riga: una sfocatura forte seguita da una soglia sulla trasparenza. Con la sfocatura alta la riga sparisce del tutto, poi compaiono macchie nette che si stringono in lettere. Partire da un rettangolo non è un dettaglio: un morph si legge solo se si capisce da dove parte.

Il titolo che si apre sul globo

Più sotto c’è il titolo della sezione dei lavori, due parole vicine al centro dello schermo. Scorrendo, il titolo si allarga fino ai bordi della colonna e nello spazio fra le parole compare un globo fatto delle immagini dei progetti, disposte su una sfera. Finito il passaggio il titolo si richiude e al posto delle parole restano i collegamenti.

Il globo è in Three.js e le immagini stanno sulla sfera con la spirale di Fibonacci: ogni punto è girato rispetto al precedente dell’angolo d’oro, così la sfera si riempie in modo uniforme senza file e senza poli affollati.

Noi l’abbiamo rifatto senza WebGL: sono copertine in CSS 3D, ognuna con il suo rotateY, rotateX e translateZ. Per dare profondità calcoliamo a ogni fotogramma quanto ogni copertina guarda verso di noi e la spegniamo quando scivola verso il bordo. E invece di allargare il titolo spostiamo le due parole: è più leggero, perché non costringe il browser a ricalcolare la pagina a ogni passo.

I premi che si impilano

La tabella dei riconoscimenti è la cosa più sobria del sito: anno, progetto, premio, categoria. Passando sopra una riga compare il suo attestato. Si apre dal basso con un clip-path e cresce da 0,9 a 1; lasciando la riga si richiude verso l’alto. Ogni attestato che si apre prende uno z-index più alto dei precedenti, quindi se scorri veloce sulla tabella i fogli si sovrappongono per un attimo, come carte buttate su un tavolo.

Abbiamo esagerato di poco la metafora: ogni nostro attestato è leggermente storto, ognuno a modo suo, e la pila si vede meglio. E abbiamo aggiunto il telefono, dove l’hover non esiste: lì si apre l’attestato della riga che passa a metà schermo.

Gli altri dettagli

Il resto del sito è pieno di cose piccole fatte con cura. I temi di colore sono cinque e cambiano anche l’icona nella scheda del browser; quando ne scegli uno, un piccolo totem fa due giri su sé stesso. Verso la fine c’è una frase che contiene l’ora di chi guarda, ore e minuti ai lati di una piccola immagine, aggiornata ogni secondo. Il nome dell’autore resta attaccato ai due angoli in basso per tutta la pagina e in fondo si stringe al centro, lasciando spazio alle note di chiusura.

Poi c’è la trovata più inattesa. Sul computer vedi i cursori degli altri visitatori che si muovono sulla stessa pagina, e premendo il tasto / puoi scrivere un messaggio che compare accanto al tuo cursore per qualche secondo. Serve un server acceso che smisti le posizioni: è il WebSocket di cui parlavamo.

Dove inciampa

Il caricamento chiede circa cinque secondi alla prima visita prima che si possa leggere. Il sito lo mostra una volta per visita, e i passaggi fra le pagine poi sono rapidi, ma per chi arriva da un link è un’attesa.

Il pezzo più spettacolare, il globo, sul telefono non c’è: sotto i 991 pixel di larghezza il codice non lo crea nemmeno e mostra un elenco che scorre di lato. È una scelta sensata per la batteria, ma chi guarda il sito dal telefono si perde il momento migliore.

E gli attestati rispondono solo al passaggio del mouse: su uno schermo a tocco la tabella resta una tabella. Infine il peso: jQuery, Webflow, GSAP con sei plugin, Barba, Lenis, Three.js e la libreria dei WebSocket, per una home fatta quasi solo di parole.

Cosa ci portiamo via

Un sito tutto tipografico può essere ricchissimo di movimento, se il movimento è coerente: qui quasi tutto nasce da un rettangolo, da una maschera o da una sfocatura, e alla terza volta lo riconosci. Due idee le teniamo strette. Un morph va fatto partire da una forma semplice, così si vede la trasformazione. E un’entrata può essere un materiale, l’inchiostro che mette a fuoco, invece di una direzione.