Yusuf Kebab.

Bucharest, Romania. A Turkish grill wanted the site to feel like the food: dark, mood-lit, atmospheric, with delivery links front and center for Glovo and Wolt (src/data/site.ts:16), RON pricing, and a real address, not a template with stock photography.

An ember/particle effect run in JavaScript means a per-frame loop computing position, opacity and drift for every particle, competing with everything else on the main thread. On a restaurant site loaded mostly on phones over restaurant wifi, that is exactly the wrong place to spend a frame budget.

The ember field is a frozen 16-entry seed table (src/components/effects/EmberField.tsx:9-26) written once as inline CSS custom properties, which GPU-composited keyframe animations then consume (src/app/globals.css:97-110). There is no animation loop: the browser's compositor handles every frame after the initial paint.

Because the seed table is a fixed array evaluated the same way on server and client, there is no hydration mismatch, the thing a random-per-render particle system would hit immediately in a server-rendered React app. About 20 named keyframes drive the full effect, with a blanket prefers-reduced-motion override (globals.css:780-800) that disables the whole system for users who ask for it.

Food photography was compressed with a WebP pass that cut roughly 8 MB down to 3.4 MB, the difference between a fast-loading gallery and a stall on a restaurant's phone-heavy traffic.