OTRO
Esperienza di brand per OTRO: interattiva, guidata dal motion, su misura.
Sito custom con Three.js e GSAP.
Scheda.
OTRO, esperienza di brand in Three.js e GSAP
Una scena WebGL e una coreografia di scroll per una bevanda analcolica, con un designer di riferimento, Awwwards Honorable Mention 2024.
Contesto & brief
Sito di brand per OTRO (alternativeotro.it), bevanda analcolica pensata come alternativa a tavola. Il sito presenta abbinamenti botanici, fermentazione parziale, racconto del prodotto e rete di professionisti, in italiano e inglese.
Cosa ho sviluppato
- Esperienza interattiva, non una scheda catalogo: scena Three.js e coreografia di scroll.
- Tipografia e parallax in GSAP e Lenis.
- Racconto del prodotto: origine, abbinamenti, punti vendita.
Architettura & stack
| Layer | Tecnologia |
|---|---|
| Framework / App Router | — |
| CMS | — |
| Motion e 3D | GSAP, Lenis, Three.js |
| E-commerce e pagamenti | — |
| Analytics / osservabilità | — |
| Servizi e hosting | — |
Decisioni chiave & trade-off
Testo in HTML accanto alla scena
Il contenuto resta leggibile e indicizzabile anche senza il 3D.
Scena caricata separatamente
Il peso del WebGL non rallenta il resto della pagina.
Sviluppo su misura anziché template
Pieno controllo su motion e scena, necessario per un brand con una direzione artistica forte.
Crediti & riconoscimenti
Sviluppo (Three.js, GSAP, Lenis): Luca Lodi. Design: Andrea Perato.
alternativeotro.it — Honorable Mention su Awwwards, 2024.
Servizi collegati: siti web animati · esperienze 3D e WebGL · sviluppo per agenzie · Guida: quanto costa un sito web animato o 3D
Stack
Custom website, Three.js, WebGL, GSAP, Lenis