Remotion

Remotion is the React-based programmatic video framework for product demos, launch videos, data videos, and agent-authored motion workflows. Source: Remotion official site, https://www.remotion.dev/, 2026-06-17

Remotion lets developers express video as React components and render those compositions into media. In Kevin's stack, it belongs in the deterministic video lane: use it when the output needs exact product UI, real components, repeatable timing, or code review. Use Higgsfield MCP or other generative media tools when the task is stylized footage, UGC, or creative variation.

The wiki already has a workflow page, Remotion + Claude Code Marketing Demos, for Claude Code-driven marketing videos. This tool page is the canonical entity entry: bookmark hubs and design pages should link here when they mention Remotion itself, then link to the workflow page when describing the end-to-end agent process.

Stack Fit

HTML-in-canvas

Remotion's May 2026 launch makes HTML-in-Canvas a first-class motion primitive: <HtmlInCanvas> renders live DOM into a canvas so the composition can apply Canvas 2D, WebGL, or WebGPU post-processing. The reviewed launch video shows magnifying-glass text, progressive blur over article copy, a John Whitney motion-graphics reference, and glitch examples generated from a Claude prompt. Source: X/@Remotion, 2026-05-04; Source: local artifact wiki/assets/x-bookmarks/2051235642424631514/image-01.jpg, reviewed 2026-07-01

Use this for agent-authored product videos that need real HTML layout plus optical effects. Do not use it as a production web UI dependency yet: Studio preview still requires Chrome 149+ with chrome://flags/#canvas-draw-element, and the underlying browser API remains experimental. Rendering is better supported because Remotion ships a compiled Chrome with the flag enabled. Source: Remotion HTML-in-canvas docs, 2026-06-26

Source snapshot

Version check on 2026-07-03: npm remotion latest 4.0.484, dist-tag alpha 4.1.0-alpha12, canary 4.0.0-alpha.217; @remotion/web-renderer latest 4.0.484. Remotion's docs first mark HTML-in-canvas rendering support from v4.0.455. Source: npm registry and Remotion docs, 2026-07-03

Launch films as code

Agustín Segui made the Paper Mono launch film with no video editor. Motion is React in Remotion, the magazine is three.js, the soundtrack is Strudel loops remixed through Suno, and the interface is Paper Mono's own box-drawing characters. Claude did the coding from a Paper canvas, where the brand work already lived. Source: X/@agusegui thread, 2026-10-08

Two parts of the method carry over to any agent-built video:

• Each section owns its beats and is addressed by id, so five agents can rebuild five sections at once and hand off by id.
• Versions are forks. Old cuts are never edited, and the agent renders and inspects its own frames before the human looks.

This is the same rule as HyperFrames: a film is a program, and review happens on rendered frames, not on the source.

Generated footage, code on top

Emmanuel de Maistre made a kinetic music video from one prompt in Claude Code through the Scenario MCP, for about $40 of tokens plus Scenario credits. The recipe splits the work: every shot of the subject is generated footage, untouched, and every word, shape and counter is drawn by code. A per-frame person matte (a black-and-white mask of which pixels are the subject) lets graphics pass behind the subject. Source: X/@emmanuel_2m thread, 2026-10-05; Source: Scenario, "Every Scenario" recipe

The rule: generate what code cannot draw, and draw everything that must be exact (type, numbers, layout) in code, where it stays editable.

Studios replacing motion work with prompts

A design studio founder made a launch video in three prompts with Opus 5.5, then announced the studio would stop hiring motion designers and sell launch videos instead. The method in the replies: Opus plus many reference frames from Figma, and the result is code, not a generated clip. The reference frames are the direction; the model does the motion. Source: X/@uxmiles thread, 2026-09-28; Source: X/@uxmiles, 2026-09-29

Frame-by-frame in JavaScript

Claude Opus 5 drew every frame of a fruit-fly life-cycle animation in JavaScript. The author's method was a chain of references: earlier projects, which themselves referenced a model launch video. Feeding the model your own past work as reference is how the style holds. Source: X/@kevin_t_ngo thread, 2026-09-15

One-shot output is the floor

The counterpoint: a one-shot Opus motion graphic looks like every other one-shot. The quality in the good examples comes from a few more prompts and brand guidelines, or, as in the kinetic-type piece above, a distinct style direction and several rounds of tweaks. A good first prompt for a draft is on Ask for a Showreel. Source: X/@SwamiMalode thread, 2026-09-26; Source: X/@justalexoki, 2026-09-26, local video frame reviewed

A model-made comparison animation of two models, made by one of them; entertaining, and a fair example of one-shot motion. Source: X/@aollivier82, 2026-09-26

A free AI video stack

One creator's stack: Opus 5.5, Tessaract editing skills, local Whisper transcription, HyperFrames for motion, and a written style guide for captions, titles, transitions and graphics. Everything but Claude is free. The style guide is what keeps the output consistent. Source: X/@landforce, 2026-10-29

A generated ad made in about a week with Midjourney v8.2 and GPT Image 2 for stills, Seedance 2.5 for motion and Topaz for upscaling. Generated footage, then finishing. Source: X/@beechinour, 2026-08-19

A motion studio's view: with demand for launch videos everywhere and more of the work made with AI, taste and restraint matter more. Source: X/@DeanDijour, 2026-08-25

A brand designer now ships a launch video with every brand, because first impressions land harder in motion. Source: X/@socoloffalex, 2026-07-30

World-class motion design starts from a high-quality storyboard; frames from one show how much is decided before animating. Source: X/@kail_designs, 2026-07-24

---

Timeline

• 2026-07-01 | Deep-reviewed Remotion's HTML-in-canvas launch bookmark and added current source/version snapshot. Source: X/@Remotion, 2026-05-04; Source: Remotion docs, 2026-06-26
• 2026-07-03 | Refreshed npm snapshot while deep-reviewing the Claude Code + Remotion marketing workflow. Source: npm registry, 2026-07-03
• 2026-06-17 | Added canonical tool page after the X bookmark hubs repeatedly referenced Remotion without a target page. Source: whole-wiki section audit, 2026-06-17