Contraste Milano
Casa digitale di un brand culinario milanese: atmosfera, degustazione, prenotazione.
Next.js, Prismic, GSAP, Lenis.
Scheda.
Contraste Milano, tipografia in motion e prenotazione
Un sistema tipografico animato, scroll continuo e prenotazione in due lingue, con un designer di riferimento, 2024.
Contesto & brief
Sito di Contraste (contrastemilano.it), brand culinario milanese. Obiettivo: tradurre online l'atmosfera tipografica del brand, raccontare la sala e portare alla prenotazione, in italiano e inglese. Cliente: Polo Sur srl.
Cosa ho sviluppato
- Contenuti: home, ristorante, menu e squadra gestiti in Prismic.
- Sistema motion «CNTRST»: lettere che si mescolano e si rivelano, hero tipografico, griglie di immagini sincronizzate con lo scroll.
- Scroll continuo in home con Lenis.
- Prenotazione: Cover Manager integrato in un pannello laterale, in entrambe le lingue.
- Contraste Contrario: evento attivabile dal CMS, con video in overlay caricato solo all'apertura.
- Migrazione: redirect delle vecchie pagine
.php; file statici su CDN dedicata.
Carta dei vini, digestivi e tè su iPad
- Architettura: Next.js e Vercel Blob. L'Excel caricato dall'admin viene convertito in JSON e letto dalla carta, che gli ospiti consultano su iPad prima della cena. URL non pubblico.
- Admin per lo staff: caricamento del file Excel di magazzino con drag and drop.
- Dati sempre allineati: la carta mostra cosa è disponibile e cosa manca nei frigo.
- Approfondimento: carta dei vini digitale.
Architettura & stack
| Layer | Tecnologia |
|---|---|
| Framework / App Router | Next.js 14 |
| CMS | Prismic |
| Motion e 3D | GSAP, Lenis, Framer Motion, Three.js |
| E-commerce e pagamenti | Cover Manager |
| Analytics / osservabilità | — |
| Servizi e hosting | Vercel Blob, Mux |
Decisioni chiave & trade-off
Tipografia animata anziché WebGL
L'identità del brand vive nel carattere, non in una scena 3D. Il risultato è una pagina più leggera e fedele al design.
Prenotazione su un servizio esistente
Anziché un sistema su misura: affidabilità e gestione già note allo staff.
Crediti & riconoscimenti
Sviluppo: Luca Lodi. Design: Andrea Perato. Cliente: Polo Sur srl (brand Contraste).
Campagne e moda: Francesco Terramagra.
contrastemilano.it, 2024 — Next.js 14, Prismic, GSAP, Framer Motion, Lenis, Cover Manager, Mux. Carta su iPad: Next.js, Vercel Blob.
Servizi collegati: siti web animati · Next.js e CMS headless · sviluppo per agenzie · micrositi e campagne · siti multilingua · Guida: aggiornare i contenuti da solo
Stack
Headless, Next.js, Prismic CMS, GSAP, Lenis