Artisan shop — immersive storefront, phone CMS
A forest-walk storefront where the maker can publish one-off pieces from her phone in about 20 seconds.
- JavaScript
- Canvas
- Cloudflare Workers
- GitHub Git Data API
- Python
- Gemini Veo
- ~20 sfrom upload on the phone to the piece online, no redeploy
- 2 × 120film frames driven by scroll, desktop and phone
- 45automated tests, run against a fake GitHub
From her phone to the forest, one commit at a time
A scroll walk through a forest made from an AI film, and a catalogue the maker updates from her phone: every edit becomes a GitHub commit that a Cloudflare Worker serves in about 20 seconds.
Tap a block to see what it does.
- People
- Logic
- Data
- AI
- Output
People
Phone app
Installable app behind a PIN. Photos are resized on the phone to WebP at 900, 600 and 240 px and named by their SHA-256, then sent one at a time.
- PWA
- Canvas
- WebP
Hands to Worker API
Logic
Worker API
Checks the PIN and issues an HMAC-SHA-256 signed HttpOnly cookie; validates each piece. The GitHub token lives only in Cloudflare variables.
- Cloudflare Workers
- HMAC
Gets from Phone appHands to GitHub as CMS
Data
GitHub as CMS
Git Data API: blob, tree, commit. Photos and data of a piece land in one commit; undoing an edit is a git revert.
- GitHub Git Data API
Gets from Worker APIHands to Edge serving
Logic
Edge serving
The Worker reads the catalogue and photos straight from the main branch with a 20 s cache and falls back to the last good copy; videos go out as HTTP 206 ranges.
- Cloudflare Workers
Gets from GitHub as CMSHands to Scroll walk, Catalogue
AI
AI forest film
Generated with Gemini Veo and Google Flow from fixed start and end frames, at a constant dolly speed, in 16:9 and 9:16; a Python script cuts it into frames.
- Gemini Veo
- Google Flow
- Python
- ffmpeg
Hands to Scroll walk
Output
Catalogue
Catalogue and piece pages built from the pieces file, with sold pieces marked. A collection basket sends the request as a WhatsApp message, no checkout.
- JavaScript
- localStorage
Gets from Edge serving
Output
Scroll walk
Canvas image sequence loaded in passes, damping 1 - exp(-λ·dt), loop that stops when settled. A procedural Celtic vine grows with the scroll.
- Canvas
- SVG
- JavaScript
Gets from AI forest film, Edge serving
The problem
An artisan hand-paints bones and skulls found in the woods and sells one-off pieces at fairs and on Instagram. She needed a storefront with the mood of a cabinet of curiosities in a forest, and a way to publish pieces herself from her phone, with no paid CMS and no checkout: purchase requests go through WhatsApp.
What I built
- I built the opening as a walk through a forest: an image sequence drawn on a canvas, 120 frames per device, scrubbed by the scroll with story notes along the path.
- I produced the forest film with Gemini Veo and Google Flow from fixed start and end frames, in 16:9 and 9:16, then cut it into frames with a Python script.
- I made GitHub the database: each edit from the phone app becomes one commit through the Git Data API, so history and rollback come free.
- I built the phone app: PIN login, photos resized to WebP on the phone, add, edit and mark as sold.
- I tried three builds with different agents (Next.js with React Three Fiber, then Astro) before settling on a framework-free site on a Cloudflare Worker.
The hard part
Scrubbing a video with the scroll stuttered on iPhone: seeking showed only a handful of frames. I replaced the video with an image sequence on a canvas, loaded in progressive passes so the walk starts moving after the first frames, with damping that does not depend on the frame rate.
Result
The site runs on a Cloudflare Worker with 45 automated tests against a fake GitHub. From the phone app a piece can be added, edited or marked as sold, and it is online in about 20 seconds without a redeploy.
My role
Solo build across three generations. I chose the final architecture, wrote the specs, produced the AI film and handled deploy and the client's catalogue data; Codex and Claude Code wrote most of the code.