Journal · Client work ·

Every cut is a commit.

Ads now version like code. We made wallloom’s opening film as code with Shaderera: ten versions in a day, every change reviewable, every frame reproducible.

Client
wallloom
Work
Opening film
Made with
Shaderera
Versions
10 in one day

IThe client

wallloom frames art online.

Pick any picture, then choose the frame, the mat and the glazing, and see the finished piece in 3D before you buy. Every frame is made to order from real materials, and every one is guaranteed.

The shop is a configurator. So the film about it had to be one too: a product that changes on every click, shown the way a customer meets it.

Desktop: a picture is measured, framed, turned round and framed again.
Phone: the same choices, one thumb.

IIThe brief

An opening film, with no timeline.

wallloom asked for an opening film for its site: cuts on the beat, objects that build in the shot, one idea per scene. Only the real catalogue, with the frames, mats and glazing the shop actually sells.

We did not open an editor. With Shaderera, the film is a TypeScript function of time. Give it a moment and it returns that frame. There is no project file and no render queue to babysit; there is code, and code has history.

The whole film, simplified
export function render(t: number) {
  const { shot, local } = shotAt(t)   // which scene, how far into it
  const villa = buildVilla(t)         // walls, frames, mats, light at t
  draw(villa, camera(shot, local))    // the same t, the same frame
  words(shot, local)                  // the line and the chooser on this beat
}

IIITen versions

Ten versions in a day.

From the first storyboard at 00:51 to the master at 16:02, the film went through ten versions on 14 October. Scroll to play them back.

  1. 01/ 10

    First storyboard: mouldings in macro on dark sets.

  2. 02/ 10

    A new storyboard: one colour set per shot.

  3. 03/ 10

    Same shots, new artworks.

  4. 04/ 10

    A new storyboard: the villa.

  5. 05/ 10

    Five scenes reworked. The opening untouched.

  6. 06/ 10

    One scene changed: the room.

  7. 07/ 10

    A new storyboard: a drawn villa that takes colour, and a chooser on the beat.

  8. 08/ 10

    Every scene refined.

  9. 09/ 10

    Version 8, rendered in full.

  10. 10/ 10

    The master: a new sky, the garden and the ending.

IVDiff a film

Diff a film.

Every frame is a function of time, so two versions can be compared the way two commits are: render the same moments from each and measure what moved.

Version 6 touched one scene. Version 10 touched three; the other five match version 9 frame for frame. Two side branches tried a single scene each and were left behind, which is what branches are for.

VersionOpenFramesMatsGlazingCollageRoomTrustEnd
V1First storyboardNew storyboardNew storyboardNew storyboardNew storyboardNew storyboardNew storyboardNew storyboardNew storyboard
V2New storyboardNew storyboardNew storyboardNew storyboardNew storyboardNew storyboardNew storyboardNew storyboardNew storyboard
V3New artworks; three moments identicalChangedIdentical to the version beforeChangedIdentical to the version beforeChangedChangedChangedIdentical to the version before
V4New storyboard: the villaNew storyboardNew storyboardNew storyboardNew storyboardNew storyboardNew storyboardNew storyboardNew storyboard
V5Five scenes reworkedIdentical to the version beforeChangedChangedNot renderedChangedChangedChangedNot rendered
V6Only the roomIdentical to the version beforeIdentical to the version beforeIdentical to the version beforeIdentical to the version beforeIdentical to the version beforeChangedIdentical to the version beforeIdentical to the version before
V7New storyboard: the drawn villaNew storyboardNew storyboardNew storyboardNew storyboardNew storyboardNew storyboardNew storyboardNew storyboard
TestTried the opening aloneChangedNot renderedNot renderedNot renderedNot renderedNot renderedNot renderedNot rendered
TestTried the frames scene aloneNot renderedChangedNot renderedNot renderedNot renderedNot renderedNot renderedNot rendered
V8Every scene refinedChangedChangedChangedChangedChangedChangedChangedNot rendered
V9V8 rendered in fullIdentical to the version beforeIdentical to the version beforeIdentical to the version beforeIdentical to the version beforeIdentical to the version beforeIdentical to the version beforeIdentical to the version beforeChanged
V10The masterChangedIdentical to the version beforeIdentical to the version beforeIdentical to the version beforeIdentical to the version beforeChangedIdentical to the version beforeChanged
  • New storyboard
  • Changed
  • Identical to the version before
  • Not rendered

Versions 1 to 3 were a 35-second cut, so their columns are eight equal slices of it. A scene counts as changed when its frames differ by more than 2 % on average.

VBranch a scene

Branch a scene.

Each scene can be swapped on its own: change one, and every other frame renders exactly as it did. It is the same idea as wallloom’s configurator, pointed at the film itself.

Try it. Pick a scene, then another take of it.

Open: the take in the master

Your cut

Your cut is the master.

Every take is a real frame of this film, from its earlier versions and tests.

VIWhy code

Why make an ad in code?

  1. 01

    Review it like code

    A change to the film is a diff a person can read: the mat colour on one line, the beat a cut lands on in another. Feedback lands on the line, not on a timecode.

  2. 02

    The same moment, the same frame

    render(t) depends on t alone. A check renders frames out of order and in parallel, and fails if any of them differs.

  3. 03

    Look before you render it all

    Any moment renders on its own as a still, so a change is checked on the frames it touches, not by re-exporting the film.

  4. 04

    Roll back, branch, ship variants

    Every earlier version is a commit away. A market cut, a shorter cut or a vertical one is a branch, not a re-edit.

VIIThe cut

The cut.

wallloom’s opening film, version 10: 45.6 seconds, 1920 × 804, every frame rendered from code.

Made with Shaderera, an open-source toolkit for video made in code. We also designed shaderera.com.

Book a 15-min call

Tell us what you’re building

Choose a service and leave your email. We’ll get back to you as soon as we can.