Bar di quartiere — sito comico
Una camminata nel bar guidata dallo scroll e un catalogo merch, pensati per chi arriva dai video social.
- Astro 7
- GSAP + ScrollTrigger
- Lenis
- Web Audio API
- Cloudflare Workers
- Vitest
- 14casi Vitest sulle fondamenta testate
- 3bottiglie sul bancone vero, una per merch, bar e social
Tre bottiglie, tre porte
Un sito per il pubblico di un format comico girato al bancone del bar: tre bottiglie aprono la camminata nel bar, il merch e i video.
Tocca un blocco per vedere cosa fa.
- Infrastruttura
- Ingresso
- Logica
- Uscita
- Persone
Infrastruttura
Astro su Cloudflare
Pagine Astro static-first pubblicate come Worker Cloudflare con sessioni su KV; un controllo post-build fa fallire la build se manca la config dell'adapter.
- Astro 7
- Cloudflare Workers
- wrangler
Passa a Bancone a bottiglie
Ingresso
Bancone a bottiglie
Tre bottiglie sulla foto del bancone vero brillano a turno; un tap fa saltare il tappo, esce la schiuma e si apre la pagina scelta.
- CSS
- HTML video
Riceve da Astro su CloudflarePassa a Intro a serranda, Catalogo merch, Muro social
Logica
Intro a serranda
La pagina resta bloccata finché la serranda non sale; il rumore è sintetizzato dal vivo con rumore filtrato in Web Audio, senza file audio.
- Web Audio API
- Lenis
Riceve da Bancone a bottigliePassa a Camminata POV
Uscita
Catalogo merch
Tre magliette fotografate di spalle, dove c'è la stampa; con il dito o il mouse si girano sul davanti, e una timeline GSAP fa posare la schiuma.
- GSAP
Riceve da Bancone a bottigliePassa a Prenotazione
Uscita
Muro social
I video del canale su un muro di foto del brand, che partono solo quando sono sullo schermo.
- IntersectionObserver
Riceve da Bancone a bottiglie
Logica
Camminata POV
Una camminata in piano sequenza dall'insegna al bancone: lo scroll fissa currentTime, la clip parte da un blob URL e il seek è smussato in rAF.
- HTML video
- requestAnimationFrame
Riceve da Intro a serranda
Persone
Prenotazione
Maglietta, taglia, nome e contatto, poi una clip della camminata come premio. Nessun finto pagamento: la lista resta nel browser fino al go-live.
- dialog
- localStorage
Riceve da Catalogo merchPassa a Pagamenti + stampa
Infrastruttura
Pagamenti + stampa
Progettati nella specifica, in modalità test: checkout Stripe e ordini di stampa on demand creati via API. Non ancora collegati.
- Stripe
- Printful API
Riceve da Prenotazione
Il problema
Un bar di quartiere si era fatto un pubblico con un format comico: finti telegiornali e sketch girati al bancone. Il pubblico arriva dai video brevi, dal telefono, e il bar voleva trasformare quel traffico in visite e in magliette vendute.
Cosa ho costruito
- Ho scritto una brand bible del format e una specifica con decisioni fissate: Astro su Cloudflare, pagamenti e stampa on demand in modalità test, 3D limitato a pochi momenti.
- Ho fatto della home un bancone con tre bottiglie: un tap fa saltare il tappo, un video di schiuma lava lo schermo e apre merch, bar o social.
- Ho costruito un film POV, una camminata in piano sequenza dentro il bar che avanza con lo scroll, dietro un'intro a serranda con il suono sintetizzato nel browser.
- Ho costruito il catalogo merch e un flusso di prenotazione: maglietta, taglia, contatto e, come premio, una clip della camminata.
- Ho diviso la specifica in un piano TDD per agenti, l'ho eseguito con subagent e ho aggiunto un controllo di build che fallisce se manca l'adapter Cloudflare.
La parte difficile
Sincronizzare con lo scroll un video in piano sequenza senza scatti, anche da telefono. La clip viene scaricata come blob così il seek funziona sempre, lo scroll fissa un tempo di arrivo e il seek viene smussato in requestAnimationFrame. I testi si accendono in punti precisi della camminata.
Risultato
Un prototipo avanzato che gira in locale: 17 commit di fondamenta testate con 14 casi Vitest, più le sezioni immersive. Pagamenti e stampa on demand sono progettati ma non collegati, quindi le prenotazioni restano nel browser finché non c'è l'endpoint.
Il mio ruolo
In solitaria, con agenti. Ho scritto brand bible, specifica e piano TDD e diretto la costruzione; Claude Code con le skill superpowers ha scritto il codice e Codex ha mappato il codice in un grafo.