SITO 3D · IMPRESE E COMMERCIO
Emme Digital Studio
Il 3D dentro al sito, in WebGL, senza rinunciare a velocità, accessibilità e SEO.
VISITA EMMEDIGITALSTUDIO.IT(si apre in una nuova scheda)- CLIENTE
- Progetto dello studio
- RUOLO
- Progettazione, sviluppo, scena 3D
- TECNOLOGIE
- Next.js · React · Three.js · TypeScript · Supabase · Netlify
- SERVIZIO
- Siti 3D
IL CONTESTO
Il sito dello studio doveva dimostrare quello che offre. Una scena 3D di solito si paga: pagine lente, testo che i motori di ricerca non vedono, animazioni che si mettono fra chi legge e quello che legge. Qui la scena doveva esserci senza togliere niente al resto.
COSA HO FATTO
- Un solo canvas per tutto il sito, con le scene delle pagine disegnate in viste separate: un solo contesto WebGL, qualunque cosa ci sia in pagina.
- La scena si carica dopo il contenuto e disegna solo quando qualcosa si muove: il testo arriva subito, e a pagina ferma la scheda grafica riposa.
- Il monogramma segue lo scorrimento su un copione per pagina, con l’inquadratura calcolata per ogni schermo: non passa sotto a un titolo in vista, e un controllo automatico lo verifica a ogni modifica.
- Tutto il testo sta nell’HTML e si legge anche senza JavaScript; la scena è nascosta alle tecnologie assistive e si ferma per chi chiede meno movimento.
- Contrasti AA misurati su ogni pagina, con la scena in movimento dietro al testo.
RISULTATO
254 kB
il peso compresso della scena 3D, che arriva dopo il contenuto: il JavaScript del primo caricamento resta sui 109 kB per pagina.