The film on our homepage runs 79 seconds, with a 20-second loop cut from it for the hero. The game drew every frame of it: the same office, characters and interface you'd use, driven by a script and recorded one exact frame at a time.
The story in eight beats
The film is a tease. It shows the arc of founding a company and leaves the rest to your imagination.
| Seconds | What happens |
|---|---|
| 0–7 | Found a company. The camera glides down the street to an office called Pawtrail, and its founding card fills in. |
| 7–19 | Hire your agents. Milo gets a role, a name, hair, a hoodie, an energy level and a brain. Sketch and Pixel follow. |
| 19–25 | The three walk in from the street and sit down at their desks. |
| 25–37 | Give them tools. Figma goes to Sketch, GitHub and Expo to Pixel, Stripe to Milo. |
| 37–52 | They build, day and night. The clock races from 10:00 to the next morning while the board fills and an app assembles itself on a phone. |
| 52–62 | They ship. Pixel asks to put Pawtrail 1.0 on the App Store, you approve, and someone books a dog walk. |
| 62–70 | The florist across the street is a company too, and sells a bouquet online. |
| 70–79 | The camera pulls back over a whole street of companies at dusk. |
Freezing time
A game runs on the clock of the computer it's on, so a slow machine drops frames and a fast one races ahead. For a film, every frame must come out the same no matter how long it takes to draw.
So the film replaces time. Every clock the game reads (performance.now, Date, requestAnimationFrame and the timers) reads one virtual clock, and the random number generator is seeded. Nothing moves until the film advances to the next frame. Drawing a frame can take a second or a minute and the result is the same picture.
The office is the real one
The film runs the game's own life simulation and renderer, and a director script moves the cast: it walks them in from the street, sits them down, makes them talk, and switches the office clock to five times speed for the time-lapse. Name tags and speech bubbles are drawn 1.65 times larger than in the game, so they stay readable at thumbnail size.
Every shot is a function of time
Each cut is written as a function of the time t. Given t, it returns where the camera is, what time of day it is, what every panel shows and where the cursor points. The cursor aims at the real button in the real component on every frame, so a layout change can't make it miss.
The panels are the game's interface components, fed new values on every frame: the agent creator with a live 3D turntable of the character, a tools directory with 39 real tools, the Pawtrail phone app, the florist's web shop, the task board and the approval card.
Recording
A script builds the film page, opens it in headless Chrome with the graphics card switched on, and steps through the frames. It takes a screenshot of each frame through Chrome's developer protocol and pipes the images straight into ffmpeg. Recording the 20-second loop takes about two minutes, and the full film about seven.
Music scored to the cut
The music comes from ElevenLabs Music. We gave it a composition plan timed to the film: mellow, upbeat lofi at 96 beats per minute in F major. At that tempo one bar lasts 2.5 seconds, so every section is a whole number of bars and lands on a scene change. The drums come in at "Hire your agents", the tools scene gets a breather, the groove returns for "They build", and the brightest part plays under "They ship".
When we asked the model to end the track on its own, it finished about six seconds early and left the end card silent. So the plan now runs past the end of the film and the mix fades it out. We made three takes and kept the third.
Sound effects without samples
A script synthesizes every sound effect, with no recorded samples: keycap clicks, typing ticks, whooshes as panels arrive, a kalimba run for hires, approvals and payments, a bell for the App Store notification, and pops as pins appear over the town. The pitched sounds are in F major, like the music.
The film logs a cue at the exact moment of every click and drag while it renders, and the effects are placed on those cues, so each sound lands on its frame.
A loop without a seam
The 20-second loop on the homepage has to repeat without a visible or audible jump. For the picture, its last 0.6 seconds are crossfaded into its first. For the sound, we took eight bars of the music from 50 to 70 seconds, found the beat, stretched the section to exactly 20 seconds and crossfaded it on the downbeat.
The loop starts muted, because browsers only autoplay silent video, and a speaker key turns the sound on. It's encoded in AV1 with an H.264 fallback, with a 720p version for phones. The full film streams from Cloudflare R2 only when you press play.
The film is on the homepage, behind the Watch the film button.