Bottega artigiana — vetrina immersiva, CMS mobile
Una vetrina-sentiero nel bosco da cui l'artigiana può pubblicare pezzi unici dal telefono in circa 20 secondi.
- JavaScript
- Canvas
- Cloudflare Workers
- GitHub Git Data API
- Python
- Gemini Veo
- ~20 sdal caricamento sul telefono al pezzo online, senza redeploy
- 2 × 120fotogrammi del film guidati dallo scroll, computer e telefono
- 45test automatici, eseguiti contro un finto GitHub
Dal suo telefono al bosco, un commit alla volta
Una camminata a scroll in un bosco nato da un film AI e un catalogo che l'artigiana aggiorna dal telefono: ogni modifica diventa un commit su GitHub che un Cloudflare Worker serve in circa 20 secondi.
Tocca un blocco per vedere cosa fa.
- Persone
- Logica
- Dati
- AI
- Uscita
Persone
App sul telefono
App installabile protetta da PIN. Le foto vengono ridotte sul telefono in WebP a 900, 600 e 240 px, con nome dallo SHA-256, e inviate una alla volta.
- PWA
- Canvas
- WebP
Passa a API del Worker
Logica
API del Worker
Controlla il PIN e rilascia un cookie HttpOnly firmato HMAC-SHA-256; valida ogni pezzo. Il token GitHub sta solo nelle variabili Cloudflare.
- Cloudflare Workers
- HMAC
Riceve da App sul telefonoPassa a GitHub come CMS
Dati
GitHub come CMS
Git Data API: blob, tree, commit. Foto e dati di un pezzo finiscono in un solo commit; annullare una modifica è un git revert.
- GitHub Git Data API
Riceve da API del WorkerPassa a Servizio edge
Logica
Servizio edge
Il Worker legge catalogo e foto direttamente dal branch main con cache di 20 s e ripiega sull'ultima copia buona; i video escono come range HTTP 206.
- Cloudflare Workers
Riceve da GitHub come CMSPassa a Camminata a scroll, Catalogo
AI
Film del bosco
Generato con Gemini Veo e Google Flow da fotogrammi iniziali e finali fissi, a velocità costante, in 16:9 e 9:16; uno script Python lo taglia in frame.
- Gemini Veo
- Google Flow
- Python
- ffmpeg
Passa a Camminata a scroll
Uscita
Catalogo
Catalogo e pagine dei pezzi costruiti dal file dei pezzi, con i venduti segnati. Una raccolta invia la richiesta come messaggio WhatsApp, senza checkout.
- JavaScript
- localStorage
Riceve da Servizio edge
Uscita
Camminata a scroll
Sequenza su canvas caricata a passate, smorzamento 1 - exp(-λ·dt), loop che si ferma a convergenza. Un tralcio celtico procedurale cresce con lo scroll.
- Canvas
- SVG
- JavaScript
Riceve da Film del bosco, Servizio edge
Il problema
Un'artigiana dipinge a mano ossa e teschi trovati nel bosco e vende pezzi unici a fiere e su Instagram. Le serviva una vetrina con l'atmosfera di una wunderkammer nel bosco e un modo per pubblicare da sola i pezzi dal telefono, senza CMS a pagamento né checkout: le richieste d'acquisto passano da WhatsApp.
Cosa ho costruito
- Ho costruito l'apertura come una camminata nel bosco: una sequenza di immagini disegnata su canvas, 120 frame per dispositivo, guidata dallo scroll con note di racconto lungo il sentiero.
- Ho prodotto il film del bosco con Gemini Veo e Google Flow da fotogrammi iniziali e finali fissi, in 16:9 e 9:16, poi l'ho tagliato in frame con uno script Python.
- Ho usato GitHub come database: ogni modifica dall'app sul telefono diventa un commit tramite la Git Data API, così storico e rollback sono gratis.
- Ho costruito l'app per il telefono: accesso con PIN, foto ridotte in WebP sul telefono, aggiungi, modifica e segna come venduto.
- Ho provato tre costruzioni con agenti diversi (Next.js con React Three Fiber, poi Astro) prima di scegliere un sito senza framework su un Cloudflare Worker.
La parte difficile
Lo scrub di un video con lo scroll scattava su iPhone: il seek mostrava solo pochi fotogrammi. Ho sostituito il video con una sequenza di immagini su canvas, caricata a passate progressive perché la camminata parta dopo i primi frame, con uno smorzamento che non dipende dal frame rate.
Risultato
Il sito gira su un Cloudflare Worker con 45 test automatici contro un finto GitHub. Dall'app sul telefono un pezzo si aggiunge, si modifica o si segna come venduto, ed è online in circa 20 secondi senza redeploy.
Il mio ruolo
Progetto in solitaria, in tre generazioni. Ho scelto l'architettura finale, scritto le specifiche, prodotto il film AI e gestito deploy e dati del catalogo della cliente; gran parte del codice l'hanno scritto Codex e Claude Code.