Neighbourhood bar — comedy network site
A scroll-driven walk into the bar and a merch catalogue, built for traffic coming from social video.
- Astro 7
- GSAP + ScrollTrigger
- Lenis
- Web Audio API
- Cloudflare Workers
- Vitest
- 14Vitest cases on the tested foundations
- 3bottles on the real counter, one each for merch, bar and social
Three bottles, three doors
A site for the audience of a comedy format shot at the bar counter: three bottles open the walk into the bar, the merch and the videos.
Tap a block to see what it does.
- Infrastructure
- Input
- Logic
- Output
- People
Infrastructure
Astro on Cloudflare
Static-first Astro pages deployed as a Cloudflare Worker with KV sessions; a post-build guard fails the build if the adapter config is missing.
- Astro 7
- Cloudflare Workers
- wrangler
Hands to Bottle counter
Input
Bottle counter
Three bottles on a photo of the real counter glint in turn; a tap pops the cap, foam bursts out and the chosen page opens.
- CSS
- HTML video
Gets from Astro on CloudflareHands to Shutter intro, Merch catalogue, Social wall
Logic
Shutter intro
The page stays locked until the roller shutter goes up; its rattle is synthesised live from filtered noise in Web Audio, with no audio file.
- Web Audio API
- Lenis
Gets from Bottle counterHands to POV scroll film
Output
Merch catalogue
Three T-shirts shot from the back, where the print is; touch or hover turns them to the front, and a GSAP timeline lets the foam settle.
- GSAP
Gets from Bottle counterHands to Pre-order flow
Output
Social wall
The channel's videos on a wall of brand photos, playing only while they are on screen.
- IntersectionObserver
Gets from Bottle counter
Logic
POV scroll film
A one-take walk from the sign to the counter: the scroll sets currentTime, the clip plays from a blob URL and the seek is smoothed in rAF.
- HTML video
- requestAnimationFrame
Gets from Shutter intro
People
Pre-order flow
T-shirt, size, name and contact, then a clip from the walk as the reward. No fake payment: the list stays in the browser until go-live.
- dialog
- localStorage
Gets from Merch catalogueHands to Payments + print
Infrastructure
Payments + print
Designed in the spec, in test mode: Stripe checkout and print-on-demand orders created by API. Not connected yet.
- Stripe
- Printful API
Gets from Pre-order flow
The problem
A neighbourhood bar had built a following with a comedy format: fake newscasts and sketches shot at the counter. Its audience arrives from short videos on a phone, and the bar wanted to turn that traffic into visits and T-shirt sales.
What I built
- Wrote a brand bible for the format and a spec with locked decisions: Astro on Cloudflare, payments and print-on-demand in test mode, 3D kept to a few moments.
- Made the home a counter with three bottles: a tap pops the cap, a foam video washes over the screen and opens merch, the bar or social.
- Built a POV film of a one-take walk into the bar that plays as you scroll, behind a roller-shutter intro whose sound is synthesised in the browser.
- Built the merch catalogue and a pre-order flow: T-shirt, size, contact, then a clip from the walk as the reward.
- Split the spec into a TDD plan for agents, ran it with subagents, and added a build guard that fails if the Cloudflare adapter goes missing.
The hard part
Syncing a one-take video to the scroll without stutter, on phones too. The clip is fetched as a blob so it is always seekable, the scroll sets a target time and the seek is smoothed in requestAnimationFrame. Text beats switch on at fixed points of the walk.
Result
An advanced prototype that runs locally: 17 commits of tested foundations with 14 Vitest cases, plus the immersive sections. Payments and print-on-demand are designed but not connected, so pre-orders stay in the browser until the endpoint exists.
My role
Solo, with agents. I wrote the brand bible, the spec and the TDD plan and directed the build; Claude Code with the superpowers skills wrote the code, and Codex mapped the codebase as a graph.