The Making of CINDER

I · Concept & creative direction

The brief: appetite is the KPI. Most food sites shout — white tablecloth photography, four carousels, a hundred adjectives. CINDER does the opposite. The room is nearly black. Nothing moves fast. The photography behaves like a Caravaggio: one warm key light, smoke drifting through it, everything else surrendered to shadow.

The governing rule was darkness discipline: the page spends most of its height in near-black, so that when a dish does appear — lit as if a candle had drifted up to it — your eye has nowhere else to go. Restraint does the selling. The only constant life is a sparse field of embers that stirs when you scroll, like coals disturbed by a poker.

Voice matters as much as light: the copy is written like a maître d' who has seen things — «The book is written in pencil.» «The other seven are cooked in the dark.» Fictional, but never winking at you.

II · Palette & type

Prata has exactly one weight, which forces the hierarchy to come from scale and space — a constraint that suits a restaurant with one hearth. Course numerals are set as hollow ember strokes so they read as heat, not ink.

III · The signature technique — the candle-approach reveal

Five courses are staged inside one pinned viewport. Each dish sits in the dark until scroll progress carries a virtual candle toward it: a radial light-mask widens over the photograph while a warm grade ramp lifts it from cold underexposure to true color, and the plate settles from 1.16× scale to rest — three channels driven by two custom properties.

/* CSS — the mask and the grade read from --r and --lum */
.course-fig img {
  mask-image: radial-gradient(circle at 50% 46%,
    #000 calc(var(--r, 0) * 0.82%),
    transparent calc(var(--r, 0) * 1.45%));
  filter: brightness(calc(0.18 + var(--lum, 0) * 0.88))
          saturate(calc(0.35 + var(--lum, 0) * 0.72))
          sepia(calc(0.42 - var(--lum, 0) * 0.42));
  transform: scale(calc(1.16 - var(--lum, 0) * 0.16));
}

// JS — one scrubbed timeline, ten beats per course
// the candle approaches: light pool widens, grade warms
tl.to(state, { r: 100, lum: 1, duration: 4.6,
  ease: 'power2.inOut', onUpdate: apply }, base + 0.4)
// the flame breathes while you look
tl.to(state, { r: 116, duration: 2.6, ease: 'none' }, base + 5.0)
// …and drifts on; the plate returns to the dark
tl.to(state, { r: 5, lum: 0.05, duration: 2.0,
  ease: 'power2.in', onUpdate: apply }, base + 7.9)

Between courses the stage falls back to black and the ember field carries the page: a Canvas 2D system of 30–60 particles drawn with additive compositing. It listens to Lenis scroll velocity — flick the wheel and the embers scatter upward like disturbed coals, then settle. With prefers-reduced-motion, the pin, the smoothing and the particles are all removed and the five courses read as a plain, fully-lit editorial sequence.

IV · Asset pipeline

• The anchorThe langoustine was generated first (Higgsfield nano_banana_pro, 2K): «extreme chiaroscuro like a Caravaggio still life… single warm candle-orange key light raking in from the left… thin wisps of smoke drifting through the light beam.» It became the series bible.
• ConsistencyEvery subsequent photograph passed the anchor back as a reference image with the instruction «same photographic series» — same candle, same charred oak, same black ceramics. Seven images, one look, zero grading in post.
• The roomInterior at 16:9 with the same reference: twelve stools, open hearth, candle points along the counter, one chef silhouetted against the glow.
• The chefPortrait via soul_2. The first take embroidered a fictional logo across the shirt — AI text artifacts have no place at this counter — so it was reshot with «absolutely no logos, no embroidery, no lettering.»
• ShippingMasters stay out of the bundle. Everything ships as 1600/800 px WebP (82 q) — the heaviest file on the site is 171 KB.

9 generations · ≈18 credits · models: nano_banana_pro (7), soul_2 (2, one rejected for lettering artifacts).

V · Iteration diary