← All build notes Motion

Product films as code: ten films from HTML

We made ten 10-second product films, one per product, as HTML pages rendered to video. Building them in code keeps each film on its design system.

ArcLayer teamBuild notesNov 2, 20262 min read

Each of our ten products has a 10-second film, made on 2 November 2026. None of them was cut in a video editor. Each one is an HTML page with timed animation, rendered frame by frame to a video file.

Why build films from code

Every product already has a design system, with its colours, type and components in code. A film built as a web page can use those same tokens, so the Gripz film looks like Gripz and the Kindlo film looks like Kindlo without anyone matching colours by hand. If a token changes, rendering the film again picks up the change.

Code also lets a person review a film the way they review product code. A change to a film is a diff they can read.

The shape of a film

A 10-second film is a fixed-size page with a timeline. Each scene is a group of elements with a start time and a duration. Here is an illustrative scene that reads its colours from the product's tokens:

html

<section class="scene" style="--start: 0s">
  <h1 class="title">Scan a receipt while it is in your hand.</h1>
</section>

<style>
  :root { --accent: #D72638; --ink: #101213; }
  .scene { position: absolute; inset: 0; background: var(--ink); }
  .title {
    color: var(--accent);
    animation: rise 0.6s var(--start) both;
  }
  @keyframes rise { from { opacity: 0; translate: 0 24px; } }
</style>

Rendering

A headless browser loads the page, moves the animation clock forward one frame at a time and captures each frame. A video encoder then joins the frames into an MP4. Because the clock moves in fixed steps, two renders of the same page produce the same frames.