Case study · Sito manifesto in 3D · Community, AI e crypto
Igloo
Un sito con una sola pagina e una sola scena: un igloo su una montagna, in scala di grigi. Doveva far sentire un mondo prima di spiegare un'azienda, e trasformare lo scroll in un viaggio.
- Progetto
- Igloobrand concept
- Settore
- Holding di brand consumercommunity, AI, crypto
- Tipo
- Sito manifestouna scena 3D, un solo scroll
- Cosa abbiamo fatto
- Scena 3D, motion, sviluppomodelli, shader, audio
- Tecnologie
- Three.js · GLSLDraco, KTX2, EXR, Web Audio
Il punto di partenza
Un mondo prima di un'azienda
Una holding che costruisce brand consumer tra community, intelligenza artificiale e crypto ha un problema di racconto: i suoi prodotti sono diversi tra loro, e una pagina con tre loghi non dice niente. Serviva un'immagine sola che li tenesse insieme.
L'immagine è l'igloo: un rifugio fatto di blocchi, ognuno al suo posto. Il sito doveva essere quell'igloo, in tre dimensioni, e lo scroll doveva portare dentro: dalla montagna alla nebbia, ai frammenti delle società, al manifesto, e poi di nuovo fuori.
01
Un'immagine sola
L'igloo a tutto schermo, senza menu, senza sezioni. Chi arriva capisce il tono prima di leggere una parola.
02
Toccare e sentire
Il mouse solleva i blocchi e li accende. Lo scroll muove la camera. Il sito risponde, non si limita a mostrarsi.
03
Il peso nascosto
Modelli, texture, ambiente e audio pesano decine di megabyte. Il caricatore, la compressione e l'ordine di arrivo devono farli sembrare niente.
Cosa abbiamo costruito
Un igloo, una montagna, un viaggio
Non ci sono sezioni: c'è una scena e lo scroll la attraversa. Queste sono le tappe.
01
Un igloo, una montagna, niente altro
Tutto lo schermo è una scena: un igloo di blocchi di ghiaccio su una montagna, la nebbia che sale, il vento. Negli angoli solo il logo, una riga di missione e «scroll down to discover».
Nessun menu, nessuna sezione. Il primo minuto serve a entrare nel tono.
02
I blocchi che si sollevano al mouse
Passando il mouse sull'igloo, i blocchi vicini al puntatore si staccano dalla cupola, si sollevano e si accendono di bianco, poi tornano al loro posto. Più ti muovi, più l'igloo sembra respirare.
È il gesto che trattiene: chi arriva gioca, e intanto legge le due righe agli angoli.
03
Il portfolio come frammenti di ghiaccio
Scorrendo, la montagna sparisce nella nebbia e compaiono i frammenti: uno per ogni società del gruppo, un blocco di ghiaccio che ruota con il logo inciso, le etichette come su una scheda tecnica e «click to expand».
Ogni frammento si apre in una scheda. Tre società diverse, un solo materiale.
04
Il manifesto nel buio
A metà del viaggio la luce si spegne e resta un testo bianco su nero: la missione, per esteso. È l'unico punto in cui il sito chiede di leggere, e per questo toglie tutto il resto.
Quando hai finito, la luce torna e sei di nuovo sulla montagna.
Come è fatto
Sotto il cofano: una scena WebGL guidata dal mouse e dallo scroll
Sei meccanismi, uno alla volta. Modelli compressi, shader scritti a mano, e un caricatore che sembra un gioco.
- Three.js
- WebGL
- GLSL
- Draco
- KTX2
- EXR
- InstancedMesh
- EffectComposer
- SMAA
- GSAP
- Web Audio
- Web Worker
uHoverMix · uPressure
i blocchi vicini al puntatore si alzano e si accendono
I blocchi che si sollevano al passaggio del mouse
Cosa vedi. Avvicini il puntatore e i blocchi intorno si staccano dalla cupola, si alzano e si illuminano. Allontani il mouse e tornano giù, con un po' di inerzia.
Come è fatto. La cupola è un solo oggetto con tutti i blocchi in istanze: ogni blocco ha la sua posizione e una distanza dal puntatore, proiettato sulla scena con un raggio. Uno shader sposta ogni blocco lungo la sua normale in proporzione a quanto è vicino al mouse e alza la luce con lo stesso valore. Il ritorno è smorzato, così l'igloo respira invece di scattare.
Un solo scroll
uProgress: lo scroll è la timeline della scena
Lo scroll come timeline della scena
Cosa vedi. Non ci sono pagine: scorrendo, la camera scende nella nebbia, arriva ai frammenti, si spegne nel manifesto e risale all'igloo.
Come è fatto. La posizione dello scroll diventa un unico numero di avanzamento, passato a tutti i materiali come uProgress. Ogni tappa ha un intervallo: la nebbia si addensa tra due valori, i frammenti appaiono tra altri due, il buio tra altri ancora. Le transizioni le fa GSAP, così scroll veloce e scroll lento arrivano allo stesso fotogramma.
Draco · KTX2 · un frammento per società
Un frammento di ghiaccio per ogni società
Cosa vedi. Un blocco di ghiaccio ruota sospeso nella nebbia, con il logo inciso e le etichette tecniche intorno. Clic, e si apre la scheda.
Come è fatto. Ogni frammento è un modello compresso con Draco, dieci volte più leggero del formato normale, con texture in KTX2 che la scheda grafica legge senza decomprimerle. Le etichette sono HTML ancorato a punti 3D, così il testo resta nitido. Il «click to expand» lampeggia con lo stesso ritmo del cursore di un terminale.
fog · profondità di campo · particelle
La nebbia, la profondità e il vento
Cosa vedi. La montagna si perde nella foschia, quello che è lontano è sfocato, e il vento si sente davvero.
Come è fatto. Tre cose insieme: la nebbia della scena, che schiarisce con la distanza; una profondità di campo in post-produzione, che sfoca ciò che non è a fuoco; e particelle di neve mosse da un rumore. L'audio del vento è un file che gira in loop e sale di volume con il movimento.
Caricatore
Il caricatore che sembra un terminale
Cosa vedi. Prima della scena, una riga di simboli che cambia come un contatore: -===+++===. Poi il mondo appare.
Come è fatto. La scena pesa decine di megabyte tra modelli, texture, ambiente e audio. Il caricatore conta i file arrivati e li mostra come una barra di caratteri; intanto un worker decodifica le immagini fuori dal thread principale, così la pagina non si blocca. La scena parte solo quando tutto è pronto: meglio un'attesa dichiarata che un mondo a metà.
un materiale di ghiaccio scritto in GLSL
Un ghiaccio scritto in GLSL
Cosa vedi. I blocchi hanno la grana della brina, la luce li attraversa, e ogni tanto uno lampeggia.
Come è fatto. Il materiale è uno shader su misura: una texture di brina per la superficie, la trasmissione della luce per lo spessore, e un parametro di lampeggio per singolo blocco. L'ambiente è un'immagine EXR ad alta gamma dinamica, quindi i riflessi hanno luce vera, non un colore piatto.
Cosa puoi portare nel tuo sito
Cinque cose che valgono anche senza WebGL
Un sito così non serve a tutti. Le decisioni dietro, sì.
01
Un'immagine sola vale più di dieci sezioni
L'igloo tiene insieme tre società diverse senza spiegarle. Trova la tua immagine e falle occupare tutto lo schermo.
02
Il sito come viaggio, non come pagina
Lo scroll è una timeline: chi arriva in fondo ha attraversato qualcosa. Anche una pagina normale può avere un inizio, un centro e un ritorno.
03
Tocca e succede qualcosa
I blocchi che si sollevano non servono a niente e trattengono per un minuto. Un sito che risponde al gesto si ricorda.
04
Il buio per il testo che conta
Il manifesto è l'unico momento di lettura, e toglie tutto il resto. Se una cosa va letta davvero, non metterle niente accanto.
05
Il peso va nascosto, non evitato
Decine di megabyte diventano accettabili con un caricatore onesto e i formati giusti. Chi aspetta vuole sapere quanto manca, non un'animazione qualsiasi.
Il prossimo potrebbe essere il tuo
Vuoi un sito che si ricordi come un luogo?
Non tutti hanno bisogno di una scena 3D. Tutti hanno bisogno di un'immagine che li tenga insieme. Raccontaci cosa fai: ti diciamo cosa faremmo noi, gratis e senza impegno.
Preventivo chiaro. Zero sorprese, zero vincoli.
Guarda gli altri progetti