# Motion design and the edit Code on top of video. How the lyrics, graphics, cuts and the XP desktop were drawn frame by frame, on the beat. The generated footage is only the plate. Everything that carries meaning (every lyric on its word, the graphics that explain each joke, the split-flap board, the XP desktop) is drawn in code on top, so it is exact and lands on the beat. ## The engine - **Every frame is a pure function of song time.** A frame never depends on the frame before, so any frame can be rendered alone, out of order, on any number of workers. Check it: render a few frames in a different order and compare. - **Headless Chromium** draws each frame: canvas and WebGL for the graphics and a print pass, the footage underneath. - **Chapters are separate files** with one contract: draw footage, draw lyrics, draw graphics, draw transitions. One animator agent writes each chapter, an art-director agent renders real frames and reviews them, and a fixer applies the notes. - **Render numbers:** ESCAPE VELOCITY, 7,354 frames at 1080p in about 63 minutes on 4 cores; BLISS, 4,351 frames in 4.7 minutes on a render box. ## A lyric video All three are lyric videos: every sung word is on screen at its aligned time. A lyric gate checks it before any render (all 315 words of CLODYSSEY, all 240 of BLISS). But the director's bar is that the lyrics are composition, never karaoke: they live on surfaces in the scene. - ESCAPE VELOCITY sets words as subtitles, model cards, garment tags, mastheads and split-flap rows. - CLODYSSEY has a type system: DINish Condensed Black for "the Mast language" (TIE ME TO THE MAST!, UNTIE ME!), Nimbus Sans Bold for her lines, IBM Plex Mono for readouts (the rope's load in kN, the P(doom) gauge). - BLISS puts the chorus in one giant title bar whose × is pressed on "windows", and the verses in balloons, Notepad, dialogs, an address bar and a chat window. ## Graphics that explain the words The director's brief on ESCAPE VELOCITY: "motion graphics and motion design, not just animated lyrics but things that fit the words being said … almost explaining the words with visuals." Every line gets a graphic that explains its joke, built from real things: real data, real interfaces, real references. Computer-vision boxes tracked to her (a real detector's boxes, labels and scores), a P(doom) gauge, a care label, a garment tag with a barcode. Nothing decorative. ## Tucks and depth - **Type behind her.** Per-frame mattes (BiRefNet, SAM 2) let type pass behind her hair, the mast or the Mask. The rule: tuck an edge, never lose a glyph. The director: "i like rotoscopes and depth mapping to cover text". - **2.5D.** A depth map (Depth Anything V2) separates a still into layers for parallax. Each 2.5D shot needs a treatment of its own; a still with a slow zoom is not a shot. - **Real scenes, not frames.** An insert never floats in a box on a flat background; it sits in the scene, on a screen or a surface, depth-matched. ## On the beat - Build a **sound-event map** from the stems: kick, snare and hat onsets, impacts, risers, vocal entries. - **Cuts land on kicks and snares; camera moves ride risers into their hits.** The director asked for editing at "edgar wright level … but also not overdone and amateurish": mostly hard cuts on the beat, with a motivated device every few shots. - **Flashes only where the idea calls for them**, at most three full-frame flashes a second, checked with a WCAG-style flash test before delivery. - **Let a calm song be calm.** BLISS's shots run longer ("dont need to cut like michael bay"). ## Colour and texture Keep Midjourney's colour. ESCAPE VELOCITY's first cut ran a monochrome xerox look over everything, and the director's note was "way too.. gray … loses the Midjourney magic". The print pass became a colour halftone. Texture is decided per film: - **ESCAPE VELOCITY:** colour halftone and line screens, grain, dither transitions, misregistration; clay orange `#D97757` as the graphics accent. - **CLODYSSEY:** clean, no halftone ("keep it clean so it feels like imax, high res rather than dithered"), every plate and clip graded toward one storm plate's blue-green-grey ("s018 color is PERFECT", "dont over do it"), with Claude orange kept as the one accent. - **BLISS:** a screen recording. Native colour, XP's own palette, nothing on top but the desktop. ## Build the tool first BLISS needed a Windows XP desktop that could be choreographed, so one was built: about 2,700 lines of JavaScript that draw Luna windows, the taskbar, the Start menu, 68 icons as vector paths, the 1-bit cursor set and a 1-bit Tahoma, with the boot, Welcome and Turn Off screens. A shot is a script (windows, icons and a cursor path whose clicks land on the song's beats) compiled into motion. The storyboard frames and the film are the same pixels. The wordmark reads "Macrohard", and the welcome mark is a four-pane parody flag drawn in code. The wallpaper is the real Bliss photograph, graded into five times of day for the story's clock, and the sound layer is made of the real XP sound files, placed in key (103 cues, ducked under her voice). ## Desktop dancers The old desktop-dancer programs, as the director described them: "those back then would be on a green screen and was cut out and youd just have her dancing on teh taskbar". So: a Seedance performance on chroma green → a matte (BiRefNet plus SAM 2) → cropped, despilled, with a solid core so her feet are never see-through → standing on the real taskbar. ![A desktop dancer, step by step: the take on green; its matte; the sprite; on the taskbar in the film.](https://claudia.gallery/record/bliss/dancer-process.webp) ## Render and deliver - **Encode** a CRF 16 master tagged BT.709. An untagged stream looks washed out in QuickTime. - **Gates before delivery:** the lyric gate (N of N words), contact sheets of the whole film, chapter seams, 100% crops of her face, and the flash test. - **Map a new mix through time,** not through a re-edit: when CLODYSSEY's final mix added two beats, the video followed it through a time map. The renderer's contract, the lyric modes, the camera on hits and the checks are specified in [What to build](https://claudia.gallery/wiki/toolkit/#18-the-renderer). More, film by film: [the ESCAPE VELOCITY record](https://claudia.gallery/record/escape-velocity/) · [CLODYSSEY](https://claudia.gallery/record/clodyssey/) · [BLISS, including how the XP desktop was built](https://claudia.gallery/record/bliss/xp-desktop-and-sound/). --- From the Claudia wiki: https://claudia.gallery/wiki/motion/