Victoria Music
Esperienza immersiva per un brand musicale, con una forte presenza WebGL.
Next.js, Three.js, React Three Fiber, Framer Motion.
Scheda.
Victoria Music, WebGL continuo su Next.js
Una scena WebGL sotto tutte le pagine, in cinque lingue, con un designer di riferimento.
Contesto & brief
Sito di Victoria Music Srl (victoriamusic.it), società attiva in edizioni musicali, management, collecting, licenze, live, sync, consulenza e formazione. Cinque lingue: italiano, inglese, francese, spagnolo e tedesco.
Cosa ho sviluppato
- Scena WebGL continua sotto le pagine (oceano e superfici in shader), in Three.js e React Three Fiber.
- Pagine istituzionali: servizi, chi siamo e contatti, con URL localizzati.
- «Viky World»: il metaverso del brand, integrato da Spatial.io, insieme a podcast e rete di partner.
- Motion dell'interfaccia in Framer Motion.
Architettura & stack
| Layer | Tecnologia |
|---|---|
| Framework / App Router | Next.js 14, React |
| CMS | — |
| Motion e 3D | Framer Motion, Three.js, React Three Fiber, canvas |
| E-commerce e pagamenti | — |
| Analytics / osservabilità | — |
| Servizi e hosting | Spatial.io |
Decisioni chiave & trade-off
Un solo canvas condiviso
Anziché una scena per pagina: continuità visiva tra le pagine. La scena non intercetta i clic sul testo e si carica dopo il contenuto.
Qualità adattiva
La risoluzione della scena si riduce sui dispositivi meno potenti.
Metaverso su piattaforma esistente
(Spatial.io) anziché un mondo 3D su misura.
Nessun CMS
I contenuti sono gestiti nel codice.
Crediti & riconoscimenti
Sviluppo: Luca Lodi. Design: Emanuela Carelli. Cliente: Victoria Music Srl.
victoriamusic.it, 2024 — Next.js 14, Three.js, React Three Fiber, Framer Motion.
Servizi collegati: siti web animati · esperienze 3D e WebGL · Next.js e CMS headless · sviluppo per agenzie · Guida: quanto costa un sito web animato o 3D
Stack
Custom website, Next.js, WebGL, Three.js, React Three Fiber, Framer Motion