How this site
was made

The concept

Ember & Salt is a fictional wood-fire tasting-menu restaurant, and the site treats a webpage like a dining room: one image and one thought per viewport, near-black walls (#0d0b09), candlelit amber (#e8a25a), and a menu written as poetry rather than a product list. The reference point is Michelin-site restraint and cinematic chiaroscuro: Rembrandt lighting, a single warm source, everything else falling to shadow. Nothing here rushes. That slowness is the design.

The techniques, honestly

• Photography. Six images generated with kie.ai's Nano Banana 2 (Gemini image model), written as a photographer's unified shot list: every prompt repeats the same grade ("one warm firelight source from the left, background falls to #0d0b09, amber highlights, cool ash-grey shadows, medium format, film grain"). Consistency comes from repetition, not luck.
• Type. Cormorant Garamond with real italics for display and menu poetry; Hanken Grotesk, letterspaced and uppercase, for quiet labels. Served from fonts.bunny.net.
• Smoke. A hand-rolled <canvas> particle system: sixteen soft radial-gradient puffs rising with sinusoidal drift, composited in screen blend mode over the hero, paused when off-screen.
• Motion. GSAP 3 + ScrollTrigger from jsdelivr: slow staggered reveals, scrubbed image parallax inside masked frames, hairline rules that draw themselves in. Everything respects prefers-reduced-motion.
• Texture. An SVG turbulence-noise film grain fixed over the whole page at 5% opacity.
• Stack. Pure static HTML/CSS/JS. No build step, no framework. Deployed on Vercel.

Three passes over the fire

The site was built in an iteration loop: serve locally, screenshot desktop and 390px mobile with a headless browser, actually read the screenshots, then fix what they show. Pass one caught raw structure: spacing rhythm, font loading, image crops, and a canvas bug that silently killed every animation. Pass two was the harsh critique: type hierarchy in the menu, contrast on captions, parallax speed, the smoke reading as fog instead of wisp. Pass three was detail density: course timestamps, coordinates, hairline geometry, the sticky reserve call-to-action's timing. Console errors and failed requests were fixed at every pass. Nothing shipped unseen.

Prompt your own

If you want an AI agent to build something like this, give it a world, not a wireframe:

"Build a one-page site for a wood-fire tasting-menu restaurant. Cinematic chiaroscuro: near-black #0d0b09, candlelit amber, bone text. Cormorant Garamond italics for display, a quiet letterspaced sans for labels. Generate 6 AI food photos from one shot list, with the same single light source and grade in every prompt. Write the 7-course menu as poetry, numbered with hairline rules. Canvas smoke over the hero, GSAP slow reveals and image parallax, sticky reserve CTA. One image, one thought per viewport. Screenshot and critique yourself at least three times before calling it done."

The two habits that matter most: repeat the lighting grammar in every image prompt, and make the agent look at its own output. Taste is a loop, not a setting.