REFERENCE
- Gallery page: https://magpui.com/en/i/isometric-pizza-stall-playground-219122
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/isometric-pizza-stall-playground-219122/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/isometric-pizza-stall-playground-219122/clip.mp4
- Original post: https://x.com/Aprilzz423/status/2115842123585269980 by @Aprilzz423
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
ASSETS
This needs real artwork, not shapes drawn in code. Use the files the user gives you (ask where they are). If you have an image generation tool, generate them with these prompts; otherwise leave clearly marked placeholders.
- Isometric pizza stall: Hand-inked isometric illustration of a small wood-fired pizza stall on a stone-tiled pad: mint-green counter with a vertical-slat shutter and a striped awning with a 'PIZZA' sign, brick dome oven with a glowing mouth, stacked log rack, dough balls tray, small bottles, a potted fruit tree, a checkered red-and-white table with two chairs, thick wobbly black ink outlines, flat colors with light hatching, long blue-violet cast shadow, cream background, no text other than the sign, 4:3 aspect ratio
- Two pizza top-views: Two round pizzas seen from above in a hand-inked flat illustration style with black outlines: one margherita with tomato, mozzarella and basil, one with spicy salami and chilli, charred crust, plain transparent background, square aspect ratio each
BUILD: Build a single-screen interactive page where the main attraction is an isometric, hand-inked illustration of a small wood-fired pizza stall that behaves like a toy: you can order pizzas from two menu boards, watch them travel to a tray, stoke the oven, open or close the shutter, toggle the lights and clear the table. A side panel lists two pizzas and a tray counter. It should feel warm, tactile and humorous, like a playable poster.
DESIGN SYSTEM: Page background warm cream #ebe7df. Layout: a rounded top bar (about 56px high, 2px black outline, cream #fbf6e9 fill, hard offset shadow 3px 3px 0 #111) with a small green round badge at left, an italic serif brand name (about 22px) over a tiny uppercase mono caption, then at right five color dots (yellow #f2b632, red #e5483b, mint #7fcfa5 selected with a ring, blue #5b86e5, pink #f08ab4), an oven-temperature pill (for example 'Oven 240°C') and a number pill. Left two thirds: a large italic serif headline in two lines (about 44px, near-black #14261d with the second line in dark green), a tiny uppercase mono subline, and the isometric stall (about 480px wide) sitting on a stone-tiled pad with a long blue-violet cast shadow (#3b3fa0): mint-green (#9ad9b5) shuttered counter with a striped awning and a 'PIZZA' sign, a brick dome oven (#b4472f) with a glowing mouth, log rack, dough balls tray, small tomato-red and olive-oil bottles, a potted fruit tree, a checkered red-and-white table with two chairs. All shapes have a 2px dark ink outline with slightly wobbly line weight and flat colors with light hatch shading. Bottom center: a row of five pill buttons (Shutter, Stoke the fire, Restock, Lights, Clear table; 12px mono, 1.5px outline, 999px radius) with a tiny hint caption under it, and a small zoom control (minus, 100%, plus) at the right. Right column: two stacked cards with 2px black outline, 16px radius and hard offset shadows. Card one: label 'What'll it be?' and two pizza cards (round pizza photo-illustrations, bold name, 11px mono ingredients, price and a black pill ORDER button) plus a small footnote. Card two (mint #d8f0dd): label 'Your tray', a big mono counter (about 44px, for example 011), a short status line in mono, a 4-segment progress bar, an isometric empty tray (mint rounded slab drawn in perspective), and four black pill buttons (Take a slice, Sip lemonade, Take apart, Clear tray).
MOTION: (1) Ordering: tapping ORDER or a menu board increments the counter, writes a status line ('Margherita. Stretching the dough.' then 'In the oven.' then 'Here it comes...') and advances the progress bar over about 6 s while the stall plays the steps: dough is stretched on the counter, a pizza slides into the oven, glows, and a finished pizza flies in an arc (about 700 ms, ease-in-out with a small bounce) from the stall to the tray in the side card; the oven temperature pill ticks up (about 240 to 380°C). (2) Eating: 'Take a slice' removes one wedge with a 200 ms scale-out, 'Sip lemonade' lowers a glass level, and a small speech bubble (cream with black outline) pops from the top of the scene with a 250 ms spring and disappears after about 2.5 s, with lines like 'Just ice and a lemon slice left' or 'All gone, order another?'. (3) Stoke the fire: the oven mouth flickers brighter for 800 ms, a few ember dots rise and fade, the temperature pill jumps. (4) Shutter: the counter shutter rolls down or up in 600 ms (cubic-bezier(0.22, 1, 0.36, 1)). (5) Lights: toggles a warm night variant, a 400 ms cross-fade with bulbs glowing along the awning. (6) Drag on the scene rotates the isometric camera a few degrees and the shadow follows; zoom buttons scale the scene 75% to 150% in 250 ms. (7) Color dots re-tint the stall's accent color and the tray card in 350 ms. (8) Idle: tree leaves sway and steam wisps rise from the oven.
SECTIONS: Top bar, headline plus stall scene, bottom action pills, menu card, tray card. States: idle, ordering (cooking steps), served (pizza on tray and table), eating (slices removed), shutter closed, night lights on.
IMPLEMENTATION: Layered pre-rendered illustration parts (stall base, oven glow, awning, props, pizzas) as SVG or PNG sprites in one isometric container, animated with Motion or GSAP timelines and CSS transforms; keep one state machine for order progress so the side panel and the scene stay in sync. Pointer drag handled with pointer events and a clamped rotation of about plus or minus 6 degrees. Text stays real DOM. prefers-reduced-motion: skip the flying arc and flicker, jump between states with a 150ms fade. All buttons are real buttons with visible focus rings and aria-live on the status line. Keep images under about 1 MB total and animate only transform and opacity.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens; never copy logos, brand names, photos or illustrations from the original; use placeholder or newly generated artwork.
SUCCESS CHECK:
- Ordering a pizza plays the whole chain (counter, status text, progress bar, oven glow, flight to the tray) in sync and ends with a pizza on the tray.
- Shutter, lights, stoke and clear-table each change the scene instantly and reversibly without layout shift.
- The page is usable with keyboard only, the status line is announced, and reduced-motion users get simple fades.
