Every film I have made, in one place: product films, brand films and music videos, all made in code.
None of this is filmed. A product film is the product’s own interface rebuilt in code as a function of time, so a vertical cut is a new layout and not a crop. A music video is a web page that draws frame t, captured frame by frame. 37 films, 88 minutes.
One · Product films
One film per product, each at its full length with sound. Shorter and vertical cuts of the same film are listed under it.
A product film whose picture is a coded replica of the ArchCanvas studio, not a screen recording. Four lengths by two aspect ratios, in two cuts, from one scene library.
Remotion, coded UI replica
A coded replica of the ArchLang playground in which every floor plan is compiled during the render by the real compiler, with real command-line output and a synthesised soundtrack.
Remotion, real compiler in the render
A replica of the product's terminal interface that is a pure function of time, set in a procedurally painted watercolour world with a synthesised score.
Remotion, procedural watercolour, synthesised score
A narrated film in which every number on screen is captured from the real command-line tool and gated by an automated verify step.
Remotion, figures captured from the real CLI
The product interface recreated in code as a pure function of time and cut to measured downbeats.
Remotion, coded UI replica
Product UI recreated in code; sequence shortened. Controlled measurements, not a production SLA.
Also on YouTube →A coded replica of the offline-first field app over a procedurally painted watercolour map, with a synthesised score and sound effects.
Remotion, procedural watercolour map, synthesised score
The interface is a coded replica of the app. Every name and place shown is fictional.
Also on YouTube →The member platform's interface rebuilt in code, with gates that trace every on-screen string and figure to its source.
Remotion, coded UI replica, synthesised audio
A coded replica of the product interface with procedural watercolour art and a synthesised score.
Remotion, procedural watercolour, synthesised score
Interface recreated in code for this film. Demo account and figures are illustrative.
Also on YouTube →The festival website's own interface rebuilt in code as a pure function of time, with gates that keep every frame true to the product.
Remotion, coded UI replica
A coded replica of the free bilingual course site and its AI assistant.
Remotion, coded UI replica
Two · More cuts
Some products have more than one film: an earlier version, or a second idea made on a different engine. They are kept here beside the one each product shows.
A film with no voiceover, built from one continuous session on the live product. Music, sound design and text cards carry the argument, and five build gates enforce cleared copy and honest footage.
HyperFrames, footage of one real product session
One continuous zoom across the product's infinite canvas, told backwards. A silent film carried by text set in the canvas and one music bed, with four aspect ratios out of one edit.
Remotion
The earlier promo, made when the product was still called claude-code-audio-hooks, with React-based animation, generated voice and sound effects, and a Suno score.
Remotion, ElevenLabs, Suno
Six 21 to 29 second shorts, one product feature each, cut from the same session on the live product as the 92-second film and reusing its on-screen copy word for word. Each exists in 16:9 and 9:16.
Three · Brand & event films
An event promo rebuilt from photographs of the May 2024 Les Mills evening, with a Suno score cut on the beat.
Remotion, Suno
The brand monkey escorts eight on-screen facts about Chan's work, each one traced to the career database, painted in the sting's world and cut to a code-synthesised score.
p5.js, p5.brush, code-synthesised score
A wordless sting for Chan's own mark. One orange pixel circles the monkey, bursts, and swirls back into a disc as the monkey settles into the exact logo. Every frame is a pure function of time.
p5.js, p5.brush, code-synthesised score
Eleven projects, one print and one figure each. The brand monkey's pixel pins up a print in which the project's own finished film plays (for the two projects without a film, its animated README card or a screen capture of its site) and stamps one figure traced to the career database. Painted in the intro's world; the short cut shows the first five.
p5.js, p5.brush, score played by sampled instruments
Four · Music videos
Films for my own songs. Each one is drawn a different way, and no image or video generation model is used for the picture. They play in up to 1080p and adjust to the connection.
Two films for two of Chan's songs. Every frame is drawn by code, a web page draws frame t, headless Chrome captures it and ffmpeg adds the song.
Hand-inked cel animation, the ink lines redrawn every second frame
Also on YouTube →One continuous line that draws a single day
Also on YouTube →Songs by Chan Meng, made with Suno. Production method, frame renderer and cel brush engine from the open-source mg-styles-15 library (MIT). No image or video generation model is used for the picture.
A trilogy, one blind date in a café seen three times, hers, his and from above, each film in its own visual style. Every frame is drawn in code and cut to the song's beat grid.
Red paper-cut
Also on YouTube →80s cel anime
Also on YouTube →Risograph print
Also on YouTube →Music, lyrics and recordings by Chan Meng. Visual styles and engine modules from the open-source Lemo-Opuscar style library (MIT). No video generation and no stock footage.
Eight films for one album, a memoir of one year, with one film per song and a different way of drawing for each. Three rules run through all eight, one amber light per film, one white that changes meaning from film to film, and no faces.
Procedural watercolour bitmaps with parallax
Also on YouTube →Shadow-puppet paper theatre
Also on YouTube →CRT damage, halftone and character cells
Also on YouTube →Wax-crayon picture book, drawn and rubbed out
Also on YouTube →Black-and-white woodcut
Also on YouTube →Grey gouache with a single colour
Also on YouTube →Three-ink risograph punk zine
Also on YouTube →Gouache skies, folded along the horizon
Also on YouTube →Songs and lyrics by Chan Meng, generated with Suno. Renderer, timing tools and method adapted from the open-source mg-styles-15 library (MIT); several films adapt techniques from the Lemo-Opuscar style library. No image or video generation model, no photograph and no footage is used for the picture.
One film for one of Chan's songs. Python paints the watercolour layers, a web page animates them as a pure function of time, headless Chrome captures every frame and ffmpeg adds the song.
Procedural pen-and-wash watercolour, with rain on glass
Also on YouTube →Song and lyrics by Chan Meng, made with Suno. Painted with numpy, OpenCV and Pillow, timed with faster-whisper, librosa, pypinyin and OpenCC, rendered with puppeteer-core and ffmpeg. Pen-and-wash habits and one transition idea are adapted from the notes of the Lemo-Opuscar style library, with no code copied. No image or video generation model, no photograph and no footage is used for the picture.
