Ppangeo

The problem

Ppangeo is a stall, not a shop. It moves between pitches, keeps different hours at each and sells out, so the fact that matters most — is it open, and where — was the one the first build answered last, three screens down under a heading called Visit our popups. That order is right for a shop and wrong for a stall. The restructure made it the organising principle: two people opening the site four hours apart should see materially different pages.

Design decisions

• Shapes come from the press and the pastry, not rounded cards — and hot iron clamps and latches rather than wobbling.
• Section boundaries are the seam where two mould plates meet, tiled so the scallops never stretch oval on a wide screen.
• The hero is a mould opening: two plates with a window that travels on a hinge arc onto the flavours panel behind.
• Three motifs used once each so none wears out — the die-cut fish, a pastry bitten open, and steam.

How we built it

• Three.js stays out of the 78 kB entry bundle, behind import rules the linter enforces rather than the team remembering them.
• GSAP tweens one custom property and CSS derives every visual consequence from it, so the same material works under a tween or :active.
• All eight sections arrive in one GROQ query, because the page renders on demand and per-component fetches would be serial hops.

Mobile, accessibility and performance

• No time-sensitive text is server-rendered, because the edge cache can serve day-old HTML — the server sends the timeless schedule, the client makes it live.
• With scripting off, that same rule leaves a correct schedule on a designed page rather than a hole.
• Zero axe-core violations and zero layout shift across a 13,778px page, with no horizontal overflow at 320, 360, 390 or 1440.