Pokeria — sito giocoso per ordinare
Sito one-page giocoso: il cliente compone la bowl e mostra uno scontrino QR alla cassa.
- Vanilla JS
- Motion One
- Canvas API
- qrcode-generator
- jsQR
- PWA
- Puppeteer
- 2,304righe in 5 file, senza build
- 4stadi di testo lungo l'hero video guidato dallo scroll
- 3script di QA Puppeteer a misura telefono e desktop
Componi la bowl, scansionala in cassa
Una sola pagina senza build: un hero video guidato dallo scroll, un compositore di bowl il cui carrello diventa uno scontrino QR e una vista cassa che lo scansiona. Nessun pagamento online.
Tocca un blocco per vedere cosa fa.
- Ingresso
- Infrastruttura
- Logica
- Persone
- Uscita
Ingresso
Clip hero
Il film dell'hero in due tagli, 16:9 per il desktop e 9:16 per il telefono, ognuno inquadrato per il suo schermo.
- MP4
Passa a Motore di scrub
Infrastruttura
Pagina senza build
Una pagina HTML, un CSS e JS semplice; installabile come PWA, servita in sviluppo da un piccolo server che non mette mai in cache l'HTML.
- PWA
- Python
Passa a Motore di scrub, Motion sticker, Compositore di bowl
Logica
Motore di scrub
Fa avanzare l'hero con lo scroll: clip come blob URL, preload pigro, dissolvenze, sblocco iOS, smorzamento indipendente dal frame rate, poster con reduced motion.
- Vanilla JS
- Blob URLs
Riceve da Clip hero, Pagina senza buildPassa a Theme-color dal vivo
Logica
Motion sticker
Reveal a molla e stagger per lettera con Motion One, corsie di reel trascinabili e un recupero dei titoli rimasti invisibili, bug trovato con Puppeteer.
- Motion One
- Puppeteer
Riceve da Pagina senza build
Persone
Compositore di bowl
Il cliente sceglie base, proteine, verdure, crunchy e salse nei limiti della misura; le bowl finite vanno in un carrello salvato sul dispositivo.
- localStorage
Riceve da Pagina senza buildPassa a Scontrino QR
Logica
Theme-color dal vivo
Campiona su canvas le strisce in alto e in basso del fotogramma e imposta il theme-color, così le barre del browser si fondono con l'hero.
- Canvas API
Riceve da Motore di scrub
Uscita
Scontrino QR
L'ordine è codificato in un link QR; lo scontrino si salva come PNG disegnato su canvas, si manda su WhatsApp o si mostra alla cassa.
- qrcode-generator
- Canvas API
Riceve da Compositore di bowlPassa a Vista cassa
Persone
Vista cassa
Lo staff scansiona gli scontrini con la fotocamera (BarcodeDetector, o jsQR su iPhone); gli ordini si accumulano in una lista e scadono dopo sei ore.
- getUserMedia
- BarcodeDetector
- jsQR
Riceve da Scontrino QR
Il problema
Una pokeria di quartiere viveva su Instagram e su un'app di delivery. Voleva un sito con la stessa energia giocosa del brand, capace di portare ordini in negozio senza un checkout online.
Cosa ho costruito
- Prima il brand kit: loghi generati con le immagini di ChatGPT e una palette campionata dai materiali del locale.
- Ho prodotto il video hero e scritto un motore di scrub che lo fa avanzare con lo scroll, con tagli separati 16:9 e 9:16 e quattro stadi di testo.
- Ho costruito il compositore di bowl con carrello: base, proteine, verdure, crunchy e salse, con limiti che cambiano con la misura.
- Ho trasformato il carrello in uno scontrino con QR che il cliente può salvare come immagine, mandare su WhatsApp o mostrare alla cassa.
- Ho aggiunto la vista cassa per lo staff: si scansionano gli scontrini con la fotocamera del telefono e gli ordini si accumulano in un'unica lista.
La parte difficile
Uno scrub video fluido su iPhone. Il motore carica ogni clip come blob URL così il seek funziona sempre, sblocca la riproduzione al primo tocco, dissolve da una clip all'altra e smorza lo scroll in modo indipendente dal frame rate. Con reduced motion mostra un poster.
Risultato
Un sito one-page completo con il bundle di deploy pronto: 2.304 righe in 5 file, senza build, controllato con script Puppeteer a misura telefono e desktop. Poi ho trasformato il metodo di design e motion in una skill Claude Code riusabile, che ho usato nei siti successivi per altri clienti.
Il mio ruolo
In solitaria. Ho dato la direzione creativa, fatto brand kit e video hero, eseguito la QA e impacchettato la build; il codice l'ho sviluppato insieme a un agente AI di coding.