Le transizioni di pagina 3D di Mael Ruffini su Webflow creano una navigazione spaziale senza soluzione di continuità

Lo sviluppatore creativo Mael Ruffini ha pubblicato un tutorial su Codrops che mostra transizioni di pagina 3D su Webflow, mantenendo un canvas Three.js persistente durante la navigazione. Utilizzando Barba.js, GSAP e Three.js, la tecnica mantiene attivo il renderer 3D mentre la telecamera scorre lungo l'asse X tra modelli 3D quando l'utente clicca sulle pagine. La scena, modellata in Blender, include una penna, una tazza di ceramica e una testa di Suzanne, con mappe UV disegnate a mano in Photoshop e una texture di carta applicata in modalità moltiplica per un'estetica artigianale. Il sistema di build utilizza Vite, SplitText di GSAP per la tipografia animata e shader personalizzati per materiali organici. Ruffini, fondatore di Rhumb Studio, fornisce il codice completo e una demo live. L'approccio offre continuità spaziale per progetti Webflow, superando le capacità predefinite.