Salt & Smoke

Salt & Smoke is a scroll story set around one fire on a bluff above the Oregon coast. The fiction is a wood-fired restaurant that cooks over alder, apple and hickory in a ring of beach stones. The page is one long take: as you scroll, the camera comes down to the fire, works its way round it, rises into the smoke and comes out the other side, while the sun sets and the moon rises behind it.

It is a concept site, made by the Laarpi team with Laarpi's library and process. The restaurant, the menu, the address and the phone number are invented, and the footer says so. The deposit buttons sell nothing. What the page says about smoke is true.

The idea

The brief starts from one observation: everything in this kitchen is shaped by smoke. So the whole site is a single camera move around a single fire. The smoke is the thread the camera follows, and the light is the clock. Sunset at the top of the page, blue hour in the middle, moonlight by the end.

The audience was set first: people planning a dinner on that coast who care where their food was cooked, and anyone who has stood downwind of a good fire. The voice was specific, dry, warm and patient. The brief also listed what to leave out: barbecue-joint clichés such as wood-type slabs, distressed textures and flame clip art; flames, logs or buildings built from basic shapes; invented reviews, awards or numbers; and anything that implies a real restaurant, business or person.

That made the story the cook's own knowledge. White smoke means a hungry fire, so the kitchen waits. Thin blue smoke is the smoke they cook on. Each wood does something different to the smoke and to the food, and the page shows the difference rather than describing it.

What you can do

• Follow the plume. The page opens at sunset on the bluff, with the Pacific and its sea stacks behind and the smoke rising through the title. Scrolling is the only control: the camera eases between stations and never overshoots one.
• Put a log on. Three woods, three sections. Alder is light and quick, apple slow and sweet, hickory strong and dark. Each has a "Put a log on" button: the fire flares, sparks go up, and a puff with that wood's character rolls up the plume. Pale and quick for alder, warm and rolling for apple, dense and dark for hickory.
• Lose the picture. At "So we wait" the camera rises into the plume and thick white smoke fills the frame. The type turns to soot so it stays readable against it.
• Watch it clear. The smoke thins to a blue thread at blue hour, rising through a single line of type: "Thin, blue, nearly gone."
• Read the menu in the smoke. Tonight's menu is a printed card of four courses and twelve dishes. As each course passes your eye line, a dish's name condenses out of the smoke above the coals, and the air takes it apart.
• See the room, then leave. At night the long window of the dining room glows across the meadow. The page closes looking down into the ring at the last coals, and "Back to sunset" takes you to the top.

How it's made

The smoke is a real-time 3D fluid simulation: stable fluids with buoyancy so hot smoke rises, vorticity confinement so it curls, and MacCormack advection to keep it sharp. It runs on a 48 × 96 × 80 grid on desktop and 32 × 64 × 52 on phones, packed into a 2D texture atlas. It is drawn by raymarching through a precomputed light field, lit by the sun, then the moon or the dining-room window, the fire itself and the sky. Light of different colours fades at different rates through the smoke, which is why thin smoke turns blue against the dark, as it does outdoors. The words of the menu come from a second, finer 2D simulation.

Around the smoke is a whole place. The stone ring, the logs and the sea stacks are CC0 scans from Poly Haven; the logs char and glow in a shader. The coals, short flames, sparks, the sky and sea from dusk to night, the moon path, the terrain with burnt ground, gravel and coastal grass, and the dining room's lit window are all original shaders. The moon is NASA's public-domain lunar map.

The camera is the backbone. Every section of the page is a station the camera passes through, and its path between stations is a smooth curve that slows in and out like a crane operator. On a phone some stations have their own framing, so the fire stays in the top half and the copy below it.

Kalnia, a display face with hairlines and teardrop terminals that read like wisps at the top of a fire, sets the title thin and wide like a film title over one long shot, and heavier for the dishes written in smoke. Albert Sans is the calm text face that stays legible over moving smoke. The palette is ash-white on night, with ember orange kept for fire, sparks and the main action.

The scrollytelling website examples show where this sits among our other concept sites. If you run a real restaurant, remember that menus, hours and a way to reach you matter far more to diners than any fire.

Speed

Measured on 6 October 2026, cold, with an empty cache, on our phone profile: slow 4G (1.6 Mbps down, 150 ms round trip), CPU slowed four times, a 390 × 844 screen.

This is the heaviest scene among our concept sites, and on a slow phone connection it shows. Four scanned models, five ground and wall materials, a moon map and a 3D smoke simulation all have to arrive and be set up before the first complete frame. We chose to wait for that frame rather than reveal a half-textured coast.

The loader, "Ember", makes the wait part of the evening: night over the Pacific, one ember, and a hairline of smoke rising from it, drawn to exactly the share of the page that has arrived. When the first frame is ready, the ember settles onto the fire's place on screen and the hairline thins into the live plume.

Before this loader pass, the same profile showed a half-textured scene at 21.3 seconds, with textures still arriving until about 37 seconds, from four origins. Now everything comes from one origin, the textures are decoded off the main thread, and the wait for shaders to compile dropped from about 430 ms to about 130 ms. The smoke runs on a smaller grid on phones, resolution is capped (1.5× on desktop, 1.25× on touch screens) and steps down a quality ladder when frames run long, rendering pauses in hidden tabs, and everything is released when you leave. The phone profile slows the CPU but not the graphics chip, so real phones can take longer on the smoke. Fast websites with 3D explains when a scene this heavy is worth it, and how to keep a lighter one fast.

Accessibility

With reduced motion on, nothing animates. Smooth scrolling is off, and each camera station renders as a finished still, with the fire and smoke frozen at a settled moment. Headings normally arrive by clearing from blur to sharp, the way smoke does; body copy simply fades. The copy is checked for contrast against the live render, and in the whiteout the type switches to soot so it stays readable. "Put a log on", the reservation buttons and "Back to sunset" are ordinary buttons, and each log is announced to screen readers ("A log of alder on the fire. Watch the smoke."). There is a link to skip straight to the menu. Accessible motion covers these decisions for your own site.

Provenance and credits

A concept site made by the Laarpi team with Laarpi's library and process. It was not produced end to end by SI, Laarpi's website agent. Sites SI builds on its own carry a "Built by SI" label with their build time and cost.

Third-party pieces, all free for commercial use:

The smoke follows published methods: Stam's stable fluids (1999), vorticity confinement from Fedkiw, Stam and Jensen (2001) and MacCormack advection from Selle et al. (2008). The implementation, the shaders, the loader and the camera are original to this site.

For two more stories told down a single scroll, see HADAL, a dive to the floor of an ocean trench, and Aster & Kiln, where clay becomes a vase. To start your own from this one, remix it.