№ 01 · The brief received
The instruction was a place, not a page.
Every site in this collection starts from a world with a premise, never a wireframe. API & ARANG's brief named a specific pit in Kajang, a family, a year, and one impossible-but-precise rule: the fire is live, and the visitor's own hand controls it.
Kajang · est. 1983
№ 02 · The signature technique
A fire that rewards a steady hand.
The whole hero is one canvas simulation running at 60fps: a bed of coals, a fanned row of skewers resting on grill rails, and two particle systems — sparks that rise on buoyancy then fall on gravity, and smoke that swells and leans with the wind. Fanning is the only input. It drives heat, and heat drives everything else.
The design decision that makes it a game rather than a toy is the cooking curve. Doneness is not "more heat = more cooked." It is a narrow Gaussian bell centred on the right heat, gated so nothing cooks until the coals are truly lit — and above the band, char climbs fast and never comes back. Fan greedy and you feed the flame instead of the meat. That is the uncle's whole lesson, written in one line of math.
// cooking — gated by heat (nothing happens until you fan), narrow good band var bell = Math.exp(-Math.pow(heat-0.62,2)/(2*0.13*0.13)); var gate = Math.max(0,Math.min(1,(heat-0.36)/0.20)); doneness += 15*bell*gate*dt; if(heat>0.75){ char += (heat-0.75)*70*dt*(1+doneness*0.004); }
Peak cooking sits at heat 0.62; the green band on the heat meter is that Gaussian made visible. Char only accrues past 0.75 and accelerates the more cooked the batch already is — so the danger grows exactly as the reward gets close. Serve at 100% doneness before char hits 100% and the uncle says sedap. Miss, and it's hangus.
№ 03 · What each pass found
The loop is the level.
The first draft is never why these pages look the way they do. Each pass means: shoot the real page on desktop and mobile, read the screenshots like a hostile art director, fix everything, then add one deliberate upgrade.
PASS 01 Build & first read
- Stood up the canvas fire, the fan button, heat/done/char meters and the uncle commentary. First painted frame was pre-warmed — 60 particle steps seeded before frame one so the pit is already alive, never a black void.
- Wired the input three ways from the start: hold pointer, spacebar, and touch — the signature interaction had to work by hand and by keyboard.
- Upgrade: the doneness Gaussian and char penalty turned a glowing decoration into a game you can win or lose.
PASS 02 Rhythm & legibility
- The editorial sections below the fold — the "charcoal remembers" spread, the banana-leaf menu, the open-hours instrument — were tuned for reveal stagger and contrast.
- Confirmed the page holds together with motion off: prefers-reduced-motion leaves one alive static frame and every section fully readable.
- Upgrade: the live "open now" panel computes from the visitor's own clock against the real 5pm–11:30pm hours, Monday dark.
PASS 03 The cold read that caught the rest
- Collision fixed: the centred scroll cue was overprinting the uncle's dialogue at the hero's bottom edge — it now runs vertically down the right margin, clear of the HUD.
- Muddy satay fixed: the skewers sat under the bottom scrim and read as a smear. Added grill rails whose top edge glows hotter as you fan, plus a dark outline and a cooking glisten line on every chunk — the meat now has structure and reads its own doneness.
- Honest numbers: softened the bottom scrim so the coals show through, opened the cramped mobile ampersand, and corrected the footer's page-weight stat to the file's true size.
- Final proof: zero console errors on both viewports, one page under 90 KB, no external images.
№ 04 · What it proves
Atmosphere is a conversion tool.
A satay house does not need a chatbot. It needs a page that makes you hungry and makes you remember the name. Give a visitor a fire to fan and a batch to save, and the menu, the hours and the address arrive already wanted. That is the point of the whole collection: the craft is real, even when the brand is invented.
← back to the pit