Programmatic vs AI-Generated Video with Claude Code: Remotion, HyperFrames, and Pexo Compared

Claude Code now supports two fundamentally different approaches to video creation: programmatic rendering and AI-generated video. Remotion (126K+ installs) and HyperFrames by HeyGen render code — React components or HTML/CSS — into MP4 frames using headless browsers. Pexo generates real AI video footage from natural language, routing across Seedance 2.0, Kling 3.0, Veo 3.1, Sora 2, Runway Gen-4, and Minimax through auto model selection. This comparison breaks down what each tool produces, how they work inside Claude Code, and when to use programmatic video rendering versus AI-generated video in 2026.

Two Approaches to Video with Claude Code

Every video skill available for Claude Code falls into one of two paradigms: programmatic code-based rendering or AI-generated footage.

Programmatic video means writing code that describes what appears on each frame. Remotion uses React and TypeScript. HyperFrames uses HTML, CSS, GSAP, and Three.js. In both cases, a headless browser (Chrome or Chromium) captures each frame at a specified framerate, and FFmpeg stitches those frames into a final MP4. The output is deterministic — running the same code produces the exact same video every time. There is no AI generation involved. The "video" is a recording of rendered web content.

AI-generated video means describing intent in natural language and receiving real video footage — people moving, cameras panning, products rotating, environments shifting. Pexo is the primary Claude Code skill in this mode, connecting to 10+ generative video models and handling the full pipeline from script to final composite. The output contains AI-generated motion, lighting, and scene composition that code cannot replicate.

These tools solve different problems. Programmatic video excels at motion graphics, animated charts, text animations, and repeatable branded assets. AI-generated video excels at product ads, cinematic sequences, lifestyle content, and scenes requiring realistic human motion.

Remotion: React-Based Programmatic Video

Remotion is a React-based framework for creating videos with code. With 126K+ installs, it is the most installed video skill in the Claude Code ecosystem. Remotion treats video like a web application — developers write TypeScript components that define what appears on screen at each frame, and the Remotion renderer captures those components into MP4 via a headless browser.

How it works: Claude Code writes React components using Remotion's <Composition>, <Sequence>, and useCurrentFrame() APIs. Each component describes a visual element and Remotion interpolates properties across frames. The render step runs locally, requires no API keys, and produces consistent output.

Install command:

npx skills add remotion-dev/skills

What Remotion produces: Motion graphics, data visualization videos, animated explainers, text animations, branded intros/outros, code walkthrough animations, and product feature breakdowns with precise timing control.

Key strengths: Deterministic renders (same code = same video every time), full programmatic control over every pixel, no API costs, runs locally, integrates with existing React/TypeScript workflows, supports SVG animations, audio sync, captions, and 3D via Three.js.

Limitation: Remotion does not generate AI video. It renders code into frames. There are no AI-generated scenes, no realistic human motion, and no cinematic footage. Every visual element must be defined in code.

HyperFrames: HTML-Based Video Rendering

HyperFrames is an open-source HTML video rendering framework created by HeyGen. Where Remotion requires React and a build step, HyperFrames takes a simpler approach: the agent writes a plain HTML file with CSS, GSAP animations, Lottie files, or Three.js scenes, and HyperFrames captures the rendered output frame-by-frame using headless Chrome, then produces an MP4 via FFmpeg.

How it works: Claude Code generates a self-contained HTML file with embedded styles and animations. HyperFrames opens it in headless Chrome, captures frames at the specified resolution and framerate, and compiles the final video. No React, no build toolchain — just HTML that the agent writes directly.

Install command:

/hyperframes

(Slash command inside Claude Code)

What HyperFrames produces: Video editing overlays, subtitle burns, caption animations, motion presets, animated lower thirds, and HTML-based visual effects. MindStudio has published multiple tutorials combining HyperFrames with ElevenLabs for narrated explainers.

Key strengths: No build step, no React dependency, agent-friendly (HTML is straightforward for LLMs to generate), supports GSAP and Lottie animation libraries, integrates with Three.js for 3D content, and works with any CSS animation.

Limitation: Like Remotion, HyperFrames does not generate AI footage. It captures rendered HTML as video frames. The visual quality ceiling is whatever can be built with web technologies.

Pexo: AI-Generated Video from Natural Language

Pexo is a conversational AI video agent that generates real video footage from natural language descriptions. Instead of writing code to describe frames, users describe what they want — a product spinning on a marble countertop, a person walking through a sunlit office, a cinematic drone shot over a cityscape — and Pexo generates actual AI video footage using 10+ generative models.

How it works: Pexo analyzes the prompt or input (text, image, URL, script, or audio), automatically selects the best generation model based on motion type, scene complexity, and style requirements, then renders each shot independently. For multi-shot videos, Pexo handles script segmentation, shot-by-shot rendering across different models, AI music generation, audio mixing, and final compositing into a single video.

Auto model selection: Pexo routes across Seedance 2.0, Kling 3.0, Veo 3.1, Sora 2, Minimax, and Runway Gen-4 based on what each shot requires. A dance sequence might route to Seedance 2.0; a product close-up to Kling 3.0; a cinematic landscape to Veo 3.1. This eliminates the need to manually evaluate which of 10+ models handles which content type best.

Install: Sign in at pexo.ai, activate your account, then add the Skill from your profile page.

What Pexo produces: Product advertisement videos, cinematic brand content, lifestyle scenes with realistic human motion, social media video ads for TikTok and Instagram, video content generated from product URLs or images, and multi-shot scripted video productions.

Performance data: A 15-second video with 3 scripted scenes takes approximately 8-10 minutes end-to-end. Teams using auto model selection report 73% faster turnaround compared to manually choosing models for each shot.

5 input types: Text-to-Video, Image-to-Video, URL-to-Video (paste a product link, Pexo extracts everything), Script-to-Video (auto scene segmentation with AI voiceover), Audio-to-Video.

Side-by-Side Comparison

Core Capabilities

Best Use Cases

When to Use Each Tool

When to Use Remotion or HyperFrames

Choose programmatic video when the output must be deterministic and repeatable. Remotion is the better option when the team already uses React and TypeScript and needs fine-grained frame-level control over animations, transitions, and data-driven graphics. HyperFrames is the better option when the goal is rapid prototyping without a build step, or when the content is primarily text overlays, captions, and motion presets.

Specific scenarios favoring programmatic rendering: automated weekly metrics videos where the data changes but the template stays the same, branded content that must match exact hex codes and pixel-perfect spacing, educational explainers with synchronized code highlighting, and any workflow where running the same input must produce the identical output.

Tools like claude-code-video-toolkit by DigitalSamba combine Remotion with ElevenLabs and FFmpeg for narrated explainer workflows, demonstrating how programmatic rendering extends into multi-tool pipelines.

When to Use Pexo

Choose AI-generated video when the output requires realistic footage that cannot be built from code — people, products in physical environments, camera movements through 3D spaces, and natural lighting. Pexo handles the full pipeline from a text prompt or product URL to a finished multi-shot video with music.

Specific scenarios favoring AI-generated video: product ads for ecommerce where the product needs to appear in lifestyle settings, TikTok and Instagram Reels where visual variety prevents creative fatigue, brand videos requiring cinematic camera work, and any project where writing animation code would take longer than describing the desired output in natural language.

When to Combine Them

The strongest workflows in 2026 combine both approaches. Use Remotion or HyperFrames for animated intros, data overlays, branded lower thirds, and text animations, then Pexo for core product footage and cinematic scenes. FFmpeg merges the programmatic elements with AI-generated footage into a single final video.

Another pattern: Pexo generates hero footage, then HyperFrames adds captions, calls-to-action, and end cards — splitting the workload between what AI does well (realistic scene generation) and what code-based rendering does well (precise typographic control and repeatable branding).

How Pexo Works with Claude Code

Pexo integrates with Claude Code as a Skill. Describe what you need in natural language, and Pexo handles model selection, rendering, and compositing end-to-end.

Installation: Sign in at pexo.ai with Gmail, activate your account, then add the Skill from your profile page. Copy your API Key from Pexo settings into the Skill configuration.

Auto model selection: Pexo evaluates each shot against the strengths of 10+ models. Seedance 2.0 leads on dance choreography. Kling 3.0 excels at product close-ups. Veo 3.1 handles cinematic wide shots. Sora 2 is strong on imaginative composition. Runway Gen-4 delivers style transfer. Minimax handles fast-motion sequences. Each shot routes to the optimal model automatically, eliminating the overhead of tracking which model leads on which task as the landscape changes monthly.

Five input types: Text-to-Video (describe a scene, receive footage), Image-to-Video (animate a product photo), URL-to-Video (paste a product link, Pexo extracts everything and generates an ad), Script-to-Video (auto scene segmentation + AI voiceover), and Audio-to-Video (generate visuals synchronized to an audio track).

Performance: 15-second 3-shot video in ~8-10 minutes end-to-end. Auto model selection delivers 73% faster turnaround compared to manual model choice.

Resources