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. 64 films, 154 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
One full loop of the tool, plan, write, audit, fix and report, walked by a simulated keyboard, cursor and agent window. Written as code, a huashu-motion composition rendered frame by frame in Chrome, with a score composed in ABC notation and played by sampled instruments. Every command-line string on screen comes from real runs of a11y-loop 0.4.1 and every browser shot is a real screenshot of its demo page.
huashu-motion (HTML + GSAP), sampled-instrument score
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
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
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.
One film for one of Chan's songs. Python paints the watercolour layers for thirteen sets, 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 sticky-note transitions
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; the watercolour engine, render harness and timing tools are carried over from A Coffee for One. No image or video generation model, no photograph and no footage is used for the picture.
Five · Explainer films
Short films that build one argument each, chapter by chapter, with captions in Chinese. The picture is procedural watercolour or a globe drawn from map data, and the score is played on recorded instruments; no image or video generation model is used.
Fourteen short explainer films on the thought of the historian and political theorist Liu Zhongjing, one framework each, built as an argument in seven to thirteen chapters with Traditional Chinese captions. Every captioned quotation is verbatim from his writings, lectures and interviews and names its source on screen. 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 score.
Order grows rather than being designed: roots spread under a tree, a village lights its lamps, dancers fall into step, and a grey wall rises to cut the field at the height it reached
Also on YouTube →The seasons of a civilisation: feudal towers in spring, a free river town in summer, an imperial palace in autumn, fireworks of the golden age, lamps going out, a winter of scattered huts, riders from the steppe
Also on YouTube →What survives the flood: a lamp in a snowbound monastery, a copyist at night, a clock tower speeding through the years, a man digging holes and planting trees, a walk through a blizzard, sprouts under melting snow
Also on YouTube →Order flows like weather into a basin: rain runs down to a walled capital, caravans stream through a mountain gate, bronze vessels coarsen copy by copy, and a blue-green landscape in mineral pigment fades to monochrome ink
Also on YouTube →Atomised by design: clan compounds dissolve into identical huts, a lone tower stands on a dune beside a deep-rooted tree, a field of chives is cut and regrows, and a house of cards falls when a door opens
Also on YouTube →Nations are invented: a membrane forms around a crowd, a crown washes out of a throne, a river delta splits into colours, a boomerang comes back to its thrower, and many small walled towns line a river
Also on YouTube →Common law as a path trodden through the forest: an elder and a clerk under an oak, a market of precedents, a feudal contract with two equal seals, a duel crowd that becomes a jury, an empty throne
Also on YouTube →Sovereignty from arms: spearmen round a council fire, a widow paid at a stone gate, a queen between merchant ships and graves, a farm wall growing into a fort, and a crop-dusted field where only the resistant weeds rise
Also on YouTube →Three generations of civilisation: lamps lit from a ziggurat eastward, a black box falling from a burning sky, a capsule that opens on a seed, caravans sailing a sea of grass, a cathedral growing from barbarian soil
Also on YouTube →His anti-self-help advice: a basket drifting past different doors, a donkey circling a millstone after a carrot, fourteen lamps lit among hundreds, a diver stepping off a jetty, a crumpled butterfly leaving its cocoon
Also on YouTube →Fervent belief as the producer of order: candles in a dark nave, mould ringing a dish so bacteria cannot enter, a hand wiping it away, a church granary feeding the poor, summer leaves over hidden roots, light reflected by the moon, a match girl in the snow, seeds through winter
Also on YouTube →Liberal education: copying before asking why, a go board, rows of examination desks, a seed holding its paths, a master and his apprentices, a page being erased, maps drawn for different purposes, a water spider skimming a pond, and a ladder climbing out of the dark
Also on YouTube →Family and the small community: a clan courtyard, a household split into strangers, a net of kin, lanterns, a shared store of rice, a banyan whose roots make the grove, a wedding as an alliance, a jar of the grandchildren's rice, generations climbing, a child backstage
Also on YouTube →Nodes and founding: a valley that sets the path, a train riding the rails between stations, a sluice gate opened, a wager, a furrow ploughed round a new city, wandering scholars and rooted strongmen on the grass, an assembly of founders, and an oak for those who can wait
Also on YouTube →Ideas and quotations: Liu Zhongjing. Concept, painting engine, animation and scores by Chan Meng, built with Claude Code. Scores played back from recorded instruments (VSCO 2 Community Edition, Salamander Grand Piano, VCSL, Karoryfer) with a sampler adapted from the Lemo-Opuscar library (MIT); fonts LXGW WenKai TC and Noto Serif TC (SIL OFL). No image or video generation model, no photograph and no footage is used for the picture.
Eleven animated map documentaries in three series, This Land (the East Asian mainland), The Republic (the People's Republic) and The World, that retell history as Liu Zhongjing reads it in ten to twelve chapters with Traditional Chinese captions. Every captioned quotation is verbatim and names its source on screen. A WebGL and Canvas globe built from Natural Earth data flies between regions, colours historical polities and draws campaigns, trade streams, walls and fronts; headless Chrome captures every frame and ffmpeg adds the score.
This Land, c. 3300 BC to 660 BC: a broken, many-peopled mainland, chariots arriving from the steppe, Shang strongholds, Zhou military colonies, and the Xia states as islands in a barbarian sea
Also on YouTube →This Land, c. 450 BC to AD 220: commanderies spreading from the frontier, the registered household, the steppe answering, mercenaries marching and the grid falling apart
Also on YouTube →This Land, 280 to 1912: from Yongjia and the Xianbei north through Sui-Tang, Liao, Jin, the Yuan provinces and the Ming to a Qing facing China from an Inner Asian base
Also on YouTube →This Land, 1842 to 1949: the Royal Navy replacing Inner Asia as the source of order, provinces before the republic, and Wu-Yue, Ba-Shu, Hunan, Yunnan, Guangdong, Manchuria and Taiwan each lit with its own resources
Also on YouTube →The Republic, 1920 to 1953: a small Comintern branch, money and discipline flowing from Moscow, the party-state template, the nodes of 1928 and 1937, and the Manchurian party
Also on YouTube →The Republic, 1950 to 1972: Manchuria as a prize for Moscow, the 156 projects, the Third Front moving inland, the factions of the Cultural Revolution and the 1972 node
Also on YouTube →The Republic, 1972 to today: the sluice gate opened, the American order imported to the coast, special zones, round-tripped capital, migrant workers streaming to the coast, and the end of technology transfer
Also on YouTube →The World, c. 3500 BC to 330 BC: the greater-Europe core and its four secondary zones, Sumerian city-states, chariots, the Indo-European waves and Persia
Also on YouTube →The World, 800 BC to AD 1500: Rome and Han, the Xiongnu, Sogdian caravans and the Sasanians, the Turks and the Mongols crossing a sea of grass, and the return of the sea route
Also on YouTube →The World, 376 to 1789: a church that would not die, the many-centred Latin world, Roman law spreading from Bologna, England as a seed of Germanic feudalism, and America as England's own seed
Also on YouTube →The World, 1842 to today: the British gold standard, two world wars, the dollar cycle and the Cold War, with two bulls fighting while a frog is trampled
Also on YouTube →Ideas and quotations: Liu Zhongjing. Concept, map renderer, animation and scores by Chan Meng, built with Claude Code. Map data from Natural Earth (public domain), drawn with d3-geo and topojson (ISC); present-day borders are a stage for historical regions, not a claim about sovereignty. Scores played back from recorded instruments (VSCO 2 Community Edition, Salamander Grand Piano, VCSL, Karoryfer) with a sampler adapted from the Lemo-Opuscar library (MIT); fonts LXGW WenKai TC and Noto Serif TC (SIL OFL). No image or video generation model, no photograph and no footage is used for the picture.
