; build notes

How this site was built

The opening film is generated footage, directed shot by shot and played back by a custom canvas player. Here is the pipeline, for anyone who wants something similar.

1. 01

   One idea

   Signal to object: noisy data becomes a forecast, the forecast becomes a printed lamp, and the lamp turns the lights on. Three concepts were pitched and stress-tested by a separate reviewer before any pixels were made.

2. 02

   Six keyframes

   Generated stills of one continuous push-in inside a printer enclosure. Each frame was made from the one before it, so light, haze and colour carry through. A garbled label was removed by hand and small push-in crops keep the camera moving forward.

3. 03

   Five chained clips

   Each clip is pinned at both ends: it starts on the literal last frame of the previous clip and must land on the next keyframe. A free direction check runs before anything is generated, and every clip is measured for pin fidelity and continuity afterwards.

4. 04

   Assembly

   Duplicate junction frames and frozen frames are dropped so the scroll never stalls. The result is 527 frames at 1280 px, about 22 seconds of footage.

5. 05

   Grade

   The generated footage drifted from warm graphite toward a steel blue as the clips went on. Every frame is measured and pulled back to one consistent look, with the orange and amber protected so the glow stays hot.

6. 06

   The player

   A canvas draws pre-extracted frames as you scroll. Frames stream in nearest-first, decode off the main thread into a sliding window of image bitmaps, and the playhead eases toward the scroll position. No video element, so no seek stutter.

7. 07

   Lights on

   The lamp switching on is done in code over the last frame, so no generated clip had to change its lighting. Visitors who prefer reduced motion get the keyframes as still images instead.

Work with me