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
| Job | Best page |
|---|---|
| Programmatic React video engine | This page |
| Claude Code writes a launch/demo video | Remotion + Claude Code Marketing Demos |
| HTML rendered inside canvas/video effects | HTML-in-Canvas |
| Deterministic UI motion assets | HyperFrames or Text-to-Lottie |
| Generative footage pipeline | Higgsfield MCP |
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
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