Birreria — sito 3D guidato dallo scroll
Scorrendo si attraversa il pub in 3D, fino al menu completo e all'ordine su WhatsApp.
- Astro
- Three.js
- Lenis
- JavaScript
- GitHub Actions
- GitHub Pages
- 0modelli 3D scaricati: ogni oggetto è procedurale
- 3livelli: 3D pieno, 3D alleggerito su telefono, ripiego SVG
- 15bug documentati come sintomo, causa e fix
Da un file di testo a una visita del pub
Un sito statico in cui lo scroll muove una camera dalla porta alla spina, ai panini e alle freccette, mentre menu e orari stanno in un solo file di contenuti.
Tocca un blocco per vedere cosa fa.
- Ingresso
- Infrastruttura
- Logica
- Uscita
Ingresso
File dei contenuti
Un solo file TypeScript contiene orari, menu completo con prezzi, contatti e SEO. I campi ancora da confermare sono segnati nei commenti.
- TypeScript
Passa a Build statica
Infrastruttura
Build statica
Astro genera in HTML statico la home e la pagina menu; GitHub Actions costruisce e pubblica a ogni push sulla cartella del sito.
- Astro
- GitHub Actions
- GitHub Pages
Riceve da File dei contenutiPassa a Controllo dispositivo, Menu e carrello
Logica
Controllo dispositivo
Legge supporto WebGL, memoria del dispositivo, risparmio dati e reduced motion, poi sceglie 3D pieno su desktop, 3D alleggerito su telefono o niente 3D.
- JavaScript
Riceve da Build staticaPassa a Timeline di scroll, Ripiego SVG
Uscita
Menu e carrello
Pagina menu con icone SVG per categoria e carrello in localStorage (formati, quantità, totale). L'ordine parte come messaggio WhatsApp; nessun backend.
- localStorage
- SVG
Riceve da Build statica
Logica
Timeline di scroll
Lenis guidato da un solo loop requestAnimationFrame e un unico avanzamento da 0 a 1. Waypoint della camera con tensione ed easing; niente GSAP.
- Lenis
Riceve da Controllo dispositivoPassa a Pub in 3D
Uscita
Ripiego SVG
Senza WebGL, con reduced motion o risparmio dati: lo stesso racconto in SVG, e il bicchiere si riempie comunque scorrendo.
- SVG
- CSS
Riceve da Controllo dispositivo
Uscita
Pub in 3D
Stazioni procedurali in Three.js: una pinta che si riempie alla spina, un burger che si scompone a mezz'aria, freccette, due boccali che brindano sulla CTA.
- Three.js
- WebGL
Riceve da Timeline di scroll
Il problema
Una birreria con birre alla spina, hamburger e sala giochi aveva solo foto e un menu in PDF. Serviva un sito che restituisse l'atmosfera del locale, veloce su telefono e aggiornabile senza sviluppatori.
Cosa ho costruito
- Ho fatto dello scroll il racconto: si entra dalla porta e la camera attraversa il locale, fermandosi a stazioni con piccole scene.
- Ho diretto i percorsi della camera come waypoint con tensione ed easing, perché il giro non sembri su binari.
- Ho fatto costruire ogni oggetto in modo procedurale in Three.js, senza modelli scaricati, per controllare peso e aspetto.
- Ho messo orari, menu, contatti e SEO in un solo file di contenuti, così aggiornare è modificare un testo, e ordini e richieste di tavolo partono come messaggio WhatsApp precompilato.
- Ho trasformato il metodo in una skill riusabile per siti 3D guidati dallo scroll: camera rig, timeline di scroll, render loop, controllo del dispositivo.
La parte difficile
Un moto fluido su telefono. L'animazione legata al frame rate causava scatti, la camera saltava al primo scroll su Chrome e Safari mobile e il caricamento pigro sulla GPU creava micro-scatti. Ho registrato ogni bug come sintomo, causa e fix; i micro-scatti sono spariti pre-riscaldando la GPU lungo il percorso della camera.
Risultato
Online come sito statico con la visita e la pagina menu, ricostruito e pubblicato da GitHub Actions a ogni push. Un audit di seconda opinione fatto con Codex sul bundle pubblicato ha dato 8,1/10 al prodotto e 7,4/10 al codice.
Il mio ruolo
Ho definito concept e regia della camera, scelto scene e dettagli, testato su telefoni veri e unito il lavoro con le mie pull request; il codice l'ha scritto Claude Code sui suoi branch.