Claude Opus 5.5 + Remotion: A complete workflow for code-generated product videos

The practical answer: Claude Opus 5.5 plus Remotion is a strong fit for product explainers, UI animation, code walkthroughs, data visualizations, release videos, and reusable marketing templates. Opus 5.5 understands the brief and writes or revises the React/TypeScript project; Remotion renders that code frame by frame into a video. Neither component is a diffusion video model, and a prompt does not directly return a photorealistic MP4.

When the core of the video is an actor, cinematic camera movement, a realistic environment, or imagery that cannot be described reliably with code, create or shoot those assets separately. Remotion or HyperFrames can then handle titles, captions, transitions, brand treatment, and repeatable assembly.

This guide follows current official documentation. The success condition is an MP4 rendered and checked on your own machine or CI runner. It does not treat an unverified social-media demo, a fixed render time, or a fixed cost per finished video as evidence.

Decide in one minute

Your job	Best starting point	Why
Product tour, UI demo, code walkthrough	Remotion	Mature React composition, timeline, props, and rendering workflow
HTML/CSS motion graphics or agent-first handoff	HyperFrames	Plain HTML authoring and a short CLI loop, without requiring React
Dozens of videos from one template	Either	Both can render deterministically once content becomes structured input
Photoreal people, locations, or cinematic shots	A separate media-generation or production step	Those visuals are not the natural domain of code-generated video
One short video that will never be reused	Build the smallest prototype first	A batch platform is usually premature

The useful dividing line is not “Can AI make a video?” It is: Can the frames be described as code, assets, data, and time? The closer the result is to a website, slide deck, dashboard, subtitle track, code editor, or brand animation, the more useful this workflow becomes.

What Claude Opus 5.5 does—and does not do

Anthropic released Claude Opus 5.5 on September 22, 2026. Its exact API model ID is claude-opus-5-5. Anthropic positions it for long-running agentic coding and knowledge work, with lower token prices and better efficiency than Opus 5. For this workflow, the relevant capabilities are straightforward:

1. Turn a video brief into scenes, components, timing, and acceptance criteria.
2. Edit a multi-file Remotion or HyperFrames repository.
3. Replace hard-coded copy with props, JSON, or a render manifest.
4. run type checks, previews, and render commands, then repair failures from logs.
5. Preserve design rules across many variants.

The important boundary is that the model produces text, code, or patches—not the final video file. Rendering runs on your laptop, a CI worker, a server, Remotion Lambda, HyperFrames infrastructure, or another controlled environment. Model-token charges and rendering compute, storage, and egress charges are separate.

Freeze four kinds of input before prompting

A prompt such as “make a polished product video” often creates an attractive but fragile prototype. Start with a brief.md that defines at least the goal, format, scene plan, inputs, constraints, and acceptance criteria:

# Video brief

- Goal: Explain how a user creates an API key and sends a first request.
- Audience: Developers evaluating the product for the first time.
- Format: 1920x1080, 30 fps, 8 seconds, no audio.
- Composition ID: ProductExplainer
- Scenes:
  1. Problem and promise, 0-2s
  2. Three-step product flow, 2-6s
  3. Final result and CTA, 6-8s
- Inputs: productName, headline, steps, accentColor, screenshot paths
- Constraints: Use local assets only; no network requests during render.
- Acceptance:
  - Text stays inside safe margins.
  - No console errors.
  - The composition renders to MP4 from the CLI.
  - A second variant can be rendered only by changing props.json.

This does not remove creativity. It tells the coding agent what “done” means. Resolution, frame rate, duration, composition ID, asset paths, network policy, and the verification command should be inputs rather than guesses.

Create the minimal Remotion project using the official path

Remotion’s Coding Agents guide starts with Node.js and a coding agent such as Claude Code. The official project sequence is:

npx create-video --yes --blank my-video
cd my-video
npm install
npx remotion skills add
npm run dev

This creates a Blank project, installs dependencies, adds Remotion Agent Skills, and starts Remotion Studio. Open a second terminal and launch Claude Code inside the same repository:

cd my-video
claude

Do not begin by asking the agent to build an entire production platform. First ask for one eight-second composition with no remote asset dependency:

Read brief.md and inspect the existing Remotion project before editing.
Create one composition with the exact ID ProductExplainer.
Use 1920x1080, 30 fps, and 240 frames.
Build a clean three-scene product explainer using React, CSS, and inline SVG only.
The composition must accept productName, headline, steps, and accentColor as props,
with sensible default props for Studio preview.
Keep all text inside a 120px safe margin. Do not fetch remote assets at render time.
Use frame-based Remotion APIs for animation so every frame is deterministic.
After editing, report the files changed, the preview command, and the exact render command.
Do not claim success unless the render command exits with code 0.

Three constraints matter here:

• Keep the composition ID stable. The CLI and automation can then address it reliably.
• Drive motion from frames, not wall-clock time. Deterministic rendering depends on reproducible state.
• Remove remote dependencies from the first test. This isolates code and render problems from CORS, expired URLs, or network failure.

Preview, render, and verify

Confirm that ProductExplainer plays from beginning to end in Remotion Studio. Then create the file from the CLI:

npx remotion render ProductExplainer out/product-explainer.mp4

Remotion documents that omitting the composition ID opens a picker and omitting the output path writes into out. Production and CI commands should pass both explicitly so they never block on an interactive selection.

A minimal result is complete only when all of these are true:

1. The render command exits with code 0.
2. out/product-explainer.mp4 exists and plays.
3. The preview and rendered file have no clipped text, blank frames, or missing assets.
4. The terminal and browser console contain no unhandled error.
5. A second content variant renders without editing the component source.

Use ffprobe to add a machine-readable output check:

ffprobe -v error \
  -show_entries stream=codec_name,width,height,r_frame_rate \
  -show_entries format=duration \
  -of json out/product-explainer.mp4

That lets CI reject a zero-length file, the wrong dimensions, or an output with no video stream instead of accepting any file with an .mp4 extension.

Turn one video into a parameterized template

Remotion merges input props with default props, giving input values priority. calculateMetadata() can later derive duration, dimensions, or enriched props, but a first production version is easier to debug when render input lives in a local JSON file.

Create props.json:

{
  "productName": "Acme API",
  "headline": "Your first request in three steps",
  "steps": [
    "Create an API key",
    "Choose a model",
    "Send the request"
  ],
  "accentColor": "#6D5EF9"
}

Render it with:

npx remotion render ProductExplainer out/acme-api.mp4 --props=props.json

Remotion specifically notes that inline JSON is unreliable in Windows shells because quote characters can be removed. A JSON file is therefore the safer cross-platform choice.

For localized variants, avoid duplicating the React composition. Separate presentation from content:

src/
  components/
  ProductExplainer.tsx
  Root.tsx
content/
  en.json
  ru.json
  de.json
public/
  screenshots/
render-manifest.json

Components own visual behavior. Locale files own copy and asset paths. The manifest maps composition, locale, props, and output filename. That makes translation review, retries, and version comparison much easier.

Debug render failures in the right order

Remotion’s troubleshooting guide recommends enabling verbose logs first:

npx remotion render ProductExplainer out/debug.mp4 --log=verbose

If concurrent rendering repeats the same log many times, temporarily reduce concurrency:

npx remotion render ProductExplainer out/debug.mp4 \
  --log=verbose \
  --concurrency=1

Then narrow the failure systematically:

1. Check the composition ID. Its case must match the registered <Composition> exactly.
2. Check props separately. Render default props first, then add the JSON file to distinguish code failure from data failure.
3. Remove components one by one. Strip video, fonts, charts, and complex effects until an empty composition renders.
4. Inspect browser and asset assumptions. Remote URLs, CORS, certificates, fonts, GPU/WebGL, and headless Chrome can differ from an interactive preview.
5. Audit asynchronous waits. Resources must resolve through the supported Remotion waiting mechanism rather than hanging indefinitely.
6. Keep reproducible evidence. Save the exact command, props, commit, full root-cause log, and environment versions.

When sending the failure back to Claude Code, provide the exact command and the first causal error, not hundreds of repeated lines. Ask it to explain the cause, propose the smallest patch, and rerun the same verification command.

Remotion, HyperFrames, or diffusion video?

HyperFrames is HeyGen’s open-source, HTML-native video framework. It turns HTML, CSS, media, and seekable animation into deterministic MP4 output. Its current quick-start path is:

npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render

The current README requires Node.js 22+ and FFmpeg. It supports GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI, and custom frame adapters, with “agents write HTML” as a central design choice.

Dimension	Remotion	HyperFrames	Diffusion video
Authoring model	React/TypeScript components	HTML/CSS/JS and seekable animation	Text, image, or video prompts
Reproducibility	High when code and inputs are fixed	High by design	Lower; repeated prompts can differ
Best fit	UI, code, charts, reusable explainers	Web-style motion, brand clips, agent-first handoff	Realistic scenes, people, cinematic imagery
Parameterization	Props, data files, React components	Data attributes, HTML, scripts	Model controls and source media
Ecosystem	Mature React and rendering options	Newer, lightweight HTML handoff	Vendor- and model-dependent
Main cost centers	Engineering plus local/cloud rendering	Engineering plus local/cloud rendering	Generation credits plus post-production

Choose based on the team and the artifact:

• Choose Remotion when you already use React or need a long-lived component system and complex templates.
• Try HyperFrames when the design is web-like, an agent should hand over a readable index.html, or React is unnecessary overhead.
• Use a separate media-generation or production step when realistic footage is the main value, then assemble it with either code framework.

Do not assume HyperFrames is cheaper merely because its CLI is shorter, and do not introduce a heavy React architecture for a six-second title card merely because Remotion is more established. Build the same eight-second brief in both and compare time to first render, effort to make version two, and ten consecutive render attempts.

At scale, the API is one stage of a code factory

A robust batch system separates five layers:

briefs / assets / brand rules
            ↓
Claude API: generate or revise code/patches
            ↓
validation: schema, allowlist, typecheck, lint, review
            ↓
Remotion or HyperFrames render workers
            ↓
ffprobe / visual review / storage / publishing

Do not execute model output directly on a production host. Restrict writable directories, keep credentials out of prompts, pin dependencies, review new commands, and run builds in an isolated environment. For many independent jobs that do not require an immediate answer, Anthropic’s Message Batches API can process multiple Messages requests asynchronously. It is not a video-render queue.

Read the API key without exposing it

Do not place a key in an article, repository, or shell history. In interactive Bash:

read -rs ANTHROPIC_API_KEY
export ANTHROPIC_API_KEY
printf '\n'

Install the official SDK:

python -m pip install anthropic

Prepare briefs.json:

[
  {
    "id": "launch-en",
    "brief": "Create a patch for the English launch variant using content/en.json."
  },
  {
    "id": "launch-de",
    "brief": "Create a patch for the German launch variant using content/de.json."
  }
]

The following script covers creation, polling until ended, result streaming, and saving by custom_id. Batch result order is not guaranteed, so array position must never be used as the join key.

#!/usr/bin/env python3
import json
import time
from pathlib import Path

import anthropic
from anthropic.types.message_create_params import MessageCreateParamsNonStreaming
from anthropic.types.messages.batch_create_params import Request

MODEL = "claude-opus-5-5"
briefs = json.loads(Path("briefs.json").read_text(encoding="utf-8"))
client = anthropic.Anthropic()

requests = []
for item in briefs:
    requests.append(
        Request(
            custom_id=item["id"],
            params=MessageCreateParamsNonStreaming(
                model=MODEL,
                max_tokens=8000,
                system=(
                    "You maintain a code-generated video project. "
                    "Return a concise implementation plan and a unified diff. "
                    "Do not include secrets or commands that download and execute unknown code."
                ),
                messages=[{"role": "user", "content": item["brief"]}],
            ),
        )
    )

batch = client.messages.batches.create(requests=requests)
Path("batch-id.txt").write_text(batch.id, encoding="utf-8")
print(f"created: {batch.id}")

while True:
    current = client.messages.batches.retrieve(batch.id)
    if current.processing_status == "ended":
        break
    print(f"processing: {current.request_counts}")
    time.sleep(60)

out_dir = Path("batch-results")
out_dir.mkdir(exist_ok=True)

for result in client.messages.batches.results(batch.id):
    outcome = result.result
    if outcome.type == "succeeded":
        text = "".join(
            block.text for block in outcome.message.content if block.type == "text"
        )
        (out_dir / f"{result.custom_id}.txt").write_text(text, encoding="utf-8")
        print(f"saved: {result.custom_id}")
    else:
        print(f"not saved: {result.custom_id} -> {outcome.type}")

Review and apply each patch before a render worker runs it. A CI stage can then render validated variant directories:

for dir in variants/*; do
  [ -d "$dir" ] || continue
  (
    cd "$dir"
    npm ci
    npx remotion render ProductExplainer \
      "out/$(basename "$dir").mp4" \
      --props=props.json
  )
done

Anthropic currently limits a batch to 100,000 requests or 256 MB, whichever comes first. Most batches finish in under an hour, but processing can continue for up to 24 hours before unfinished requests expire. Results remain available for 29 days from creation. Treat errored, canceled, and expired as non-success states and reconcile them by custom_id.

Estimate cost by separating every token class

The following prices were verified on September 28, 2026. All figures are USD per million tokens and use the exact model ID claude-opus-5-5.

Billing item	Anthropic standard API	BetterToken effective standard price	Definition
Regular input	$4.00	$2.72	Input tokens not read from cache
Output	$20.00	$13.60	Tokens generated by the model
5-minute cache write	$5.00	$3.40	First write to a five-minute prompt cache
1-hour cache write	$8.00	$5.44	First write to a one-hour prompt cache
Cache hit/refresh	$0.20	$0.136	Reusing an already cached prefix

BetterToken’s public configuration uses tiered pricing: the base prices match the table and the current Claude group multiplier is 0.68. The model_ratio=0 field must not be interpreted as free usage. Prices are dynamic, so verify the BetterToken pricing page and Anthropic pricing page before implementation.

For a standard synchronous request:

model_cost =
  input_tokens / 1,000,000 × input_price
+ output_tokens / 1,000,000 × output_price
+ cache_write_5m_tokens / 1,000,000 × cache_write_5m_price
+ cache_write_1h_tokens / 1,000,000 × cache_write_1h_price
+ cache_read_tokens / 1,000,000 × cache_read_price

Suppose 20 independent briefs each consume 30,000 regular input tokens and 8,000 output tokens, with no cache usage:

• Anthropic standard synchronous API: 20 × (0.03 × $4 + 0.008 × $20) = $5.60
• Anthropic Batch: input and output receive a 50% discount, so approximately $2.80
• BetterToken effective standard synchronous price: 20 × (0.03 × $2.72 + 0.008 × $13.60) = $3.808

This is a model-cost comparison at identical token usage, not a fixed quote per finished video. The real total also includes retries, render CPU or GPU, browser concurrency, storage, bandwidth, asset production, and human review.

The BetterToken boundary in this workflow

BetterToken can be evaluated as an Anthropic-compatible route for Claude Code. The current Claude Code Base URL is https://bettertoken.ai; users create their own BetterToken account and API key and select the appropriate key group and model according to current documentation. It is not a Claude.ai or Claude Max subscription.

Public support for /v1/messages does not prove that BetterToken is compatible with Anthropic’s Message Batches API. Therefore:

• The minimal Remotion + Claude Code path can be evaluated using BetterToken’s current Claude Code documentation.
• The Batch example above is based only on Anthropic’s official API.
• Do not change the Batch example’s Base URL and assume BetterToken support until BetterToken publishes an explicit Batch contract, endpoint, limits, and billing rules.

For readers in Russia, BetterToken also provides Russian documentation and ruble payments. Available payment methods, minimums, exchange rate, fees, and settlement time remain whatever the console shows at checkout.

Production checklist

Content and design

• The brief defines audience, goal, duration, dimensions, frame rate, and every scene.
• Fonts, colors, logo, safe area, and screenshot version are pinned.
• Long localized strings have been previewed; copy length cannot silently overflow.
• External media is licensed, downloaded, and no longer dependent on a temporary URL.

Code and rendering

• Composition ID, props schema, and output naming are stable.
• The lock file is committed and CI uses npm ci.
• A successful preview does not substitute for a successful CLI render.
• Failed jobs preserve command, props, log, commit hash, and environment versions.
• ffprobe validation and a visual spot check both pass.

Model and cost

• The exact model ID is claude-opus-5-5.
• Regular input, output, cache writes, and cache reads are metered separately.
• One or two synchronous requests validate the request shape before a batch submission.
• Batch results are matched by custom_id, never by return order.
• Model cost and render infrastructure cost have separate dashboards.

The most useful next step

Build the same eight-second brief twice: once in a Remotion Blank project and once as a HyperFrames HTML composition. Compare only three measures—time to first valid render, effort to create version two, and failure rate across ten consecutive renders. If Remotion wins, add props and CI. If HyperFrames is faster and your team can maintain the HTML, do not add React merely for convention.

First produce one reproducible, validated, parameterized MP4. Scaling to one hundred videos becomes much easier after that evidence exists.

Official references

• Claude Opus 5.5 announcement
• Anthropic model and feature pricing
• Anthropic Messages API
• Anthropic Message Batches
• Remotion: Prompting videos with coding agents
• Remotion CLI render
• Remotion parameterized rendering
• Remotion render troubleshooting
• HyperFrames official repository
• BetterToken current pricing