Queer Beer
Sito di identità per Queer Beer di URANI3: giocoso, spaziale, interattivo.
Landing Vite con model-viewer (WebGL e AR).
Scheda.
Queer Beer, landing 3D e AR per Urani3
Una birra di Urani3 e La Spilleria: la bottiglia in 3D e in AR, i punti vendita, l'ordine. Design e sviluppo miei.
Contesto & brief
Landing di ФЦЕЕR ЪЕЕЯ (Queer Beer) per la collettiva Urani3 e il birrificio La Spilleria: un progetto che dà visibilità alle comunità marginalizzate, con 1€ per bottiglia devoluto a Urani3, Milano Checkpoint e Casa Marcella. In italiano.
Cosa ho sviluppato
- Racconto del progetto e del suo messaggio.
- Bottiglia in 3D nel browser, in rotazione con lo scroll, e in AR su iOS e Android con model-viewer.
- Acquisto: pack, punti vendita e ordine online tramite Google Form.
- Integrazione: pagina all'interno del sito di Urani3 (urani3.xyz), non un sito separato.
Architettura & stack
| Layer | Tecnologia |
|---|---|
| Framework / App Router | Vite |
| CMS | — |
| Motion e 3D | Three.js, model-viewer |
| E-commerce e pagamenti | — |
| Analytics / osservabilità | — |
| Servizi e hosting | — |
Decisioni chiave & trade-off
model-viewer anziché una scena Three.js
Meno codice e AR nativa; il minor controllo sul look 3D non era un limite per questo progetto.
Modello caricato dopo il primo scroll
Prima un'immagine, poi il 3D.
Ordine tramite form
Anziché e-commerce: tempi di messa online compatibili con una campagna.
Crediti & riconoscimenti
Design e sviluppo: Luca Lodi. Progetto: Urani3 × La Spilleria.
urani3.xyz/queerbeer, 2024 — Vite, model-viewer.
Servizi collegati: esperienze 3D e WebGL · sviluppo per agenzie · WebAR · Guida: WebAR per prodotti
Stack
Custom website, Vite, WebGL, AR, model-viewer