HyperFrames: Turning HTML & Canvas into 60fps Video for AI Agents
Course Architecture Overview
Learn how HeyGen's open-source HyperFrames compiler turns self-contained HTML, CSS, and Canvas compositions into deterministic 1080p60 videos built by AI agents.
Primary Open-Source Repository: github.com/heygen-com/hyperframes
course lessons.
Core Architecture & Deterministic Implementation
- 1.1Lesson 1: Why AI Agents Excel at Single-File HTML/Canvas Video Scenes
Welcome to Lesson 1 of HyperFrames: Turning HTML & Canvas into 60fps Video for AI Agents on CodingCat.dev. Today we break down Why AI Agents Excel at Single-File HTML/Canvas Video Scenes and see how it powers our deterministic 3D AJ and code-rendered video pipeline.
HTMLAI & AgentsVideo📖 Written LessonStart Lesson → - 1.2Lesson 2: Implementing the HyperFrames Frame Capture Lifecycle & `window.seek(t)`
Welcome to Lesson 2 of HyperFrames: Turning HTML & Canvas into 60fps Video for AI Agents on CodingCat.dev. Today we break down Implementing the HyperFrames Frame Capture Lifecycle & `window.seek(t)` and see how it powers our deterministic 3D AJ and code-rendered video pipeline.
HTMLAI & AgentsVideo📖 Written LessonStart Lesson → - 1.3Lesson 3: Embedding Base64 WOFF2 Fonts (`Virgil`, `Nunito`, `JetBrains Mono`) for Zero FOUT
Welcome to Lesson 3 of HyperFrames: Turning HTML & Canvas into 60fps Video for AI Agents on CodingCat.dev. Today we break down Embedding Base64 WOFF2 Fonts (`Virgil`, `Nunito`, `JetBrains Mono`) for Zero FOUT and see how it powers our deterministic 3D AJ and code-rendered video pipeline.
HTMLAI & AgentsVideo📖 Written LessonStart Lesson → - 1.4Lesson 4: Synthesizing Procedural Canvas Particles with `seededNoise1D(seed, t)`
Welcome to Lesson 4 of HyperFrames: Turning HTML & Canvas into 60fps Video for AI Agents on CodingCat.dev. Today we break down Synthesizing Procedural Canvas Particles with `seededNoise1D(seed, t)` and see how it powers our deterministic 3D AJ and code-rendered video pipeline.
HTMLAI & AgentsVideo📖 Written LessonStart Lesson → - 1.5Lesson 5: Benchmarking HyperFrames vs. Raw Playwright vs. Remotion Render Speeds
Welcome to Lesson 5 of HyperFrames: Turning HTML & Canvas into 60fps Video for AI Agents on CodingCat.dev. Today we break down Benchmarking HyperFrames vs. Raw Playwright vs. Remotion Render Speeds and see how it powers our deterministic 3D AJ and code-rendered video pipeline.
RemotionHTMLAI & Agents+2📖 Written LessonStart Lesson →
how this course connects together.
Follow AJ from first principles to production-ready architecture.