KILN.
← All work
◆ 980°CTier 02 · EssentialRestaurant · Hospitality

Ember & Ash

A coffee counter that becomes a wine room after dark, so the page does the same thing. Scroll the hero and the sun crosses an arc — the ground, the glow, the clock and the word behind the counter all move with it, from eight in the morning to eight at night.

Role
Design + build
Type
Restaurant site
Stack
GSAP · Canvas
Status
Concept build
The idea

One room, two very different moods.

Scroll — the room turns from day to night

One counter, two businesses. Coffee and pastry until the light goes, natural wine and small plates after — same room, same hands. A restaurant site normally has to pick one of those to be a photograph of, and picking is the thing that loses the other half.

So the page does not pick. The hero is pinned, and scrolling it moves the sun along an SVG arc: one number comes out of that scroll, and the page background, the glow, the colour of the sun, its position, the clock in the corner and the word behind the counter are all interpolated from it. Day is a warm near-black at eight in the morning; night is a colder one at eight in the evening. Nothing is a second copy of the page — it is one set of content, re-lit continuously.

Two decisions inside that are worth naming. The arc finishes at seventy-eight per cent of the pin rather than at the end, so there is a held sundown to read the last of the hero in instead of the sun landing exactly as the section releases. And Lenis came out: opened as a local file it could swallow wheel input without applying the scroll, which leaves the page apparently frozen except by the scrollbar — an unacceptable failure for a demo whose whole point is that you scroll it. Native scroll gives ScrollTrigger everything it needed anyway.

What went into it
Light

One number lights the whole page

Scroll progress across the pinned hero drives everything: two colour triples for day and night are mixed at that position and written to custom properties, so the ground and the glow travel together rather than being animated separately and drifting. The sun is placed by sampling the arc path itself at the same fraction of its length, which means the curve in the markup is the curve it actually follows.

Time

The clock is real arithmetic

Eight in the morning plus twelve hours of scroll, floored to the nearest ten minutes so it reads like a clock rather than a counter. The word behind the counter rolls from espresso to natural wine across the middle third of the arc — started late and finished early on purpose, so it is settled well before the hero unpins and never swaps under your eye at the moment the section lets go.

Air

Seventy motes, tinted by the hour

A canvas of slow-drifting particles sits under everything, each wobbling on its own phase so the field never pulses in unison. They take their colour from the same day-to-night mix as the page, so the air warms and cools with the room instead of staying one fixed colour over a ground that has moved.

Honesty

Three pictures the page admits to

Everything else here is drawn, but a restaurant needs to show a room, and there is no room — Ember & Ash does not exist. The three images are stand-ins, filtered and tinted to the page so they sit in it, and the colophon says outright that they are not photographs of this place, because there is no place to photograph.

Light the kiln

Run a place worth booking?

Tell me about it. I'll come back with whether it's a Tier 01 or Tier 02 job, a timeline, and a fixed quote.

hello@studiokiln.space
  • Tell meWhat you're building, roughly when you need it, and a link or two you like.
  • You'll hear backWithin 48 hours, from me. There's nobody else here to route it through.
  • You'll getA tier recommendation, a timeline, and a fixed quote. No hourly billing.