Cosmic Crisp

Contesto & brief

Sito europeo di Cosmic Crisp (cosmiccrisp.eu): contenuti editoriali, eventi, ricette e la Cosmic Experience, in italiano, inglese, tedesco e spagnolo. Progetto sviluppato con uno studio partner.

Cosa ho sviluppato

• Contenuti multilingua: pagine, eventi e ricette in Prismic, con URL localizzati per le quattro lingue.
• Esperienza 3D: scena in React Three Fiber (esperienze 3D e WebGL) con tunnel a scroll alimentato dal CMS e carousel 3D dei video Vimeo.
• Contenuti dinamici: card delle città che cambiano testo e visual in base all'ora del visitatore.
• Interazione in tempo reale: preferiti salvati in locale, like e contatore live dei visitatori connessi, tramite Supabase Realtime.
• Form pubblici: contatto, suggerimenti e contest con upload di file, salvati su Supabase e notificati via email.
• Back-office: gestione di invii, utenti, file e template email.

Architettura & stack

Layer	Tecnologia
Framework / App Router	Next.js 14, React
CMS	Prismic
Motion e 3D	GSAP, Lenis, Three.js, React Three Fiber, Theatre.js
E-commerce e pagamenti	—
Analytics / osservabilità	—
Servizi e hosting	Supabase

Decisioni chiave & trade-off

Tutta la Cosmic Experience in React Three Fiber

Tunnel, carousel e card appartengono alla stessa scena, non a un video incorporato.

Il tunnel legge il CMS

Gli elementi che compaiono allo scroll arrivano da Prismic e si aggiornano senza sviluppo.

Form su database, non solo via email

Gli invii dei contest, file compresi, restano tracciabili.

Crediti & riconoscimenti

Sviluppo full-stack: Luca Lodi. Studio e design: Glue Glue. Cliente: Cosmic Crisp.

cosmiccrisp.eu, 2025 — Next.js 14, Prismic, Three.js, React Three Fiber, Theatre.js, GSAP, Lenis, Supabase.

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