Loading…
3D e motion — esperienze web interattive
Questi progetti esplorano come il 3D interattivo e WebGL possano rendere tangibile nel browser la storia di un prodotto o di un brand. Ogni esperienza collega movimento ed effetti visivi a uno specifico percorso utente.
- Ruolo
- Sviluppo web interattivo e WebGL — concept, impostazione delle scene 3D, lavoro sugli shader e coreografia GSAP e di scroll dall’inizio alla fine in ogni progetto.
- Stack
- Three.jsReact Three FiberGSAP (ScrollTrigger)GLSL ShadersBlenderLenis
Panoramica
Una fotocamera che diventa un mirino sui ricordi di qualcuno, una tastiera in cui ogni tasto è uno strumento sparso in attesa di essere unificato, particelle che si trasformano perché il prodotto stesso parla di trasformazione. Questa è una raccolta di quel lavoro — landing page complete costruite attorno a un'unica idea 3D e studi autonomi più piccoli che esplorano una tecnica alla volta.
Gli screenshot statici non rendono giustizia a questo lavoro — ogni pagina si guadagna il suo 3D legandolo direttamente alla storia che racconta.
Interfaccia
Cinque storie, cinque tecniche
Everline — vetrina per il noleggio auto
Un percorso cinematografico dall’accensione alla showroom — si entra in un abitacolo, poi una flotta si rivela sotto le luci da studio.
Interfaccia
Cinque storie, cinque tecniche
Everline — vetrina per il noleggio auto
Un percorso cinematografico dall’accensione alla showroom — si entra in un abitacolo, poi una flotta si rivela sotto le luci da studio.
Elementi del laboratorio
Non ogni idea ha bisogno di una pagina intera attorno a sé
Studi autonomi — una tecnica, isolata e spinta oltre quanto chiederebbe una singola landing page.
Elementi del laboratorio
Non ogni idea ha bisogno di una pagina intera attorno a sé
Studi autonomi — una tecnica, isolata e spinta oltre quanto chiederebbe una singola landing page.
Pietra di vetro cromatico
Una nuvola di particelle intrappolata in un vetro cromatico simulato — rifratta due volte, con bloom isolato così che il bagliore resti contenuto nella silhouette senza disperdersi all’esterno.
Configuratore di particelle
Decine di migliaia di punti GPU resi come vapore o sfere illuminate, che si trasformano tra le forme con controlli in tempo reale per posizione, movimento e aspetto.
Campo shader a creste
Una superficie astratta animata costruita interamente con proprietà del materiale — riflessi e luci sfumate che scorrono su uno shader per simulare un campo increspato a creste.
Approccio tecnico
Cinque abitudini che evitano che queste esperienze diventino il motivo per cui una pagina si carica lentamente o un telefono si scalda — maturate progetto dopo progetto e poi portate in ogni categoria di lavoro successiva.
Sempre più pesante, sempre più leggero
01
L’ottimizzazione dei modelli parte da Blender, non dal codice01L’ottimizzazione dei modelli parte da Blender, non dal codice
Ridurre il numero di poligoni e la dimensione delle texture prima che un modello arrivi al browser — il guadagno di prestazioni più economico arriva prima ancora di scrivere una riga di Three.js.
02
Nulla viene caricato finché non serve02Nulla viene caricato finché non serve
Scene e modelli pesanti si caricano dinamicamente e vengono rimandati finché non servono davvero — il caricamento iniziale della pagina non paga una scena 3D che l’utente non ha ancora raggiunto con lo scroll.
03
Le animazioni si mettono in pausa fuori dal viewport03Le animazioni si mettono in pausa fuori dal viewport
Una scena non visibile non ha bisogno di continuare il rendering. Animazioni e render loop si fermano quando una sezione esce dalla vista, e le scene vengono smantellate del tutto se la scheda perde il focus.
04
I trigger GSAP restano vicini a ciò che animano04I trigger GSAP restano vicini a ciò che animano
Le istanze di ScrollTrigger sono limitate alla sezione a cui appartengono e si attivano solo quando quella sezione si avvicina — non un’unica grande timeline che cerca di gestire l’intera pagina in una volta.
05
Su mobile arriva una scena diversa, non una più piccola05Su mobile arriva una scena diversa, non una più piccola
Le scene WebGL pesanti vengono sostituite da versioni più leggere o da immagini statiche su mobile, invece di forzare la stessa scena a girare a qualità ridotta — una decisione presa progetto per progetto, non un fallback generalizzato.
Risultati
Non una storia di metriche — una storia di mestiere
Cinque narrazioni 3D e motion distinte realizzate, ciascuna costruita attorno a una tecnica diversa — scene guidate da metafore, storytelling cinematografico basato sullo scroll, lavoro su shader personalizzati e un personaggio persistente che reagisce allo scroll
Un insieme coerente di buone pratiche di performance — ottimizzazione dei modelli, caricamento differito, pausa in base al viewport — portate avanti e affinate in ogni progetto
Studi autonomi su shader e particelle realizzati indipendentemente da qualsiasi landing page, come pratica deliberata di tecnica
Lo stesso istinto per la struttura maturato nel lavoro su architetture di dashboard e SaaS, applicato di nuovo al modo in cui queste scene vengono organizzate e caricate