Christian Gehrke
SOURCE ORDERBuild it right, then build it beautiful
Issue 404: Not Found (Yet)

The Studio as working.

Build Notes

A river through the Studio

A case study of the Studio's header: a glowing river with three liquids, day and night, two small toggles, 36 clips that hand off cleanly, and a liquid that now runs through the whole page.

More from SOURCE ORDER → The newsstand

Listen · 2:08A river through the Studio

The Studio is the private side of this site, where a day out becomes a Field Note. It deserved a front door that felt like a workshop, so its header became a glowing river running through a crack in an old workbench, with a brass STUDIO panel bolted on above it.

Real video DAY/NIGHT: the dusk clip plays once, the tube on the bank flickers on, and the dial turns to the moon.

Green, then blue

It began green, from rendered 4K footage. Then I wanted a blue river, and the best I could render was 1080p. That turned out fine: the header is a short, wide strip, so 1920 pixels across is all it ever needs. The first version jumped when you switched. Every change now plays its own clip and crossfades in, and the buttons wait until it's done.

Real video Blue to green at night: the heart pumps the green through its tubes, and the page skin goes from steel to verdigris once the river has changed.

Two small toggles

Real video Green to orange at night, the heart filling orange and the rivets in the rails refilling with the new colour.

The controls took the longest. I tried handwheels, then bypass valves with lit windows, then valves down in the footer, then lamps beside them. It was all too much. What stuck is the smallest version: two little toggles on the panel, each between jewel pilot lamps. DAY/NIGHT plays dusk or dawn. CHANGE LIQUID only goes one way round, blue to green to orange and back to blue, so every change has exactly one clip.

That one-way rule is what made it buildable. Three liquids, day and night, each with a loop, a dusk and dawn, and a change to the next liquid: 18 clips for the river and 18 more for the glowing pipe in the footer. With each one in a few sizes for different screens, that's 124 video files behind one header.

Real video Orange back to blue by day, closing the loop.

That one-way rule is what made it buildable.

The two toggles: DAY/NIGHT plays dusk or dawn, and CHANGE LIQUID only goes one way round, blue to green to orange and back to blue, the jewel lamps and the rails following.

How it's built

  1. Render the river

    Green came first, from 4K footage. Blue could only be rendered at 1080p, which is plenty: the header is a short, wide strip, so 1920 pixels across is all it needs. Orange makes the third liquid.

  2. Give every change its own clip

    The first version jumped on a switch. Now each change plays its own clip and crossfades in, and the buttons wait until it's done.

  3. Cut the controls down

    Handwheels, bypass valves with lit windows, valves in the footer and lamps beside them were all tried and cut. What stayed: two little toggles on the panel, each between jewel pilot lamps.

  4. Run the liquids one way round

    CHANGE LIQUID goes blue to green to orange and back to blue, so every change has exactly one clip. With day and night, that's 18 clips for the river and 18 for the footer pipe, 124 files across sizes.

  5. Put every clip through one light model

    The glass tube's glow is measured once from the blue night footage, then painted back in the liquid's colour, scaled by how dark the scene is. Both ends of each change are graded to the loops they meet.

  6. Let the liquid spread

    The rivets in the brass rails fill with its colour, the page skin shifts with it, and the STUDIO letters fill with a slow wave using a CSS text-filling technique, draining and refilling on every change.

  7. Put the look in the address

    A ?look= link opens in the same liquid and time of day it was shared in, and its preview card shows it.

One light model

The renders never quite agreed with each other. A glass tube on the river bank was lit in one clip and dark in the next, and a new render would arrive with the lamps glowing green when the loop it hands over to has them orange. So every clip goes through the same light model before it's used. The tube's glow is measured once from the blue night footage, then painted back in the colour of the liquid, scaled by how dark the scene is. Both ends of each change are graded to match the loops they meet, so the hand-offs don't show.

The valves that were cut: bypass valves with lit glass windows, fun to build and wrong to keep, back under the dust sheet.
Made with AI The valves that were cut: bypass valves with lit glass windows, fun to build and wrong to keep, back under the dust sheet.

The liquid spreads

The STUDIO letters filling with the liquid, a slow wave running through them; on every change they drain and fill again.

Then the liquid started spreading. The rivets in the brass rails fill with its colour. The page itself shifts: gold on walnut for orange, steel on slate for blue, verdigris on bronze for green. The STUDIO letters fill with it too, a slow wave running through them, borrowed from an old CSS trick for text filling with water. On every change they drain and fill again.

Even the links remember. The address carries the look, so a link shared at night with the orange liquid opens that way, and its preview card shows it.

One page, three liquids: steel on slate for blue, gold on walnut for orange, verdigris on bronze for green.
One page, three liquids: steel on slate for blue, gold on walnut for orange, verdigris on bronze for green.

What I learned: less is more, again. The valves were fun to build and wrong to keep. And it only feels like one machine when the light agrees everywhere, so measure the light once and paint it back the same way in every clip.

Build log

  1. A green river, from rendered 4K footage

  2. A blue river, rendered at 1080p; orange joins as the third liquid

  3. The first version jumped on a switch; every change gets its own crossfading clip, and the buttons wait

  4. Handwheels, then bypass valves with lit windows, then valves in the footer, then lamps beside them

  5. Two toggles between jewel pilot lamps, and a one-way change cycle

  6. A tube light model learned from the blue night footage, re-applied to every clip; change ends graded to the loops

  7. Rivets, page skin, liquid-filled STUDIO letters and glowing buttons

  8. Per-look share cards via ?look=