Claude Opus 5.5 und Remotion: kompletter Workflow für Produktvideos aus Code

Praktische Antwort: Claude Opus 5.5 zusammen mit Remotion eignet sich sehr gut für Produkterklärungen, UI-Animationen, Code-Walkthroughs, Diagramme, Release-Videos und wiederverwendbare Vorlagen. Opus 5.5 versteht das Briefing und schreibt oder korrigiert das React/TypeScript-Projekt; Remotion rendert den Code Bild für Bild. Beide sind keine Diffusionsmodelle, deshalb erzeugt ein Prompt nicht direkt ein fotorealistisches MP4.

Wenn Schauspieler, reale Orte, filmische Kamerafahrten oder nicht zuverlässig programmierbare Bilder den Kern bilden, sollten diese Medien separat produziert oder generiert werden. Remotion oder HyperFrames übernimmt anschließend Titel, Untertitel, Übergänge, Branding und reproduzierbare Montage.

Dieser Leitfaden folgt der aktuellen offiziellen Dokumentation. Erfolg bedeutet ein tatsächlich gerendertes und geprüftes MP4 auf Ihrem Rechner oder im CI. Ungeprüfte Social-Media-Demos, feste Renderzeiten oder ein pauschaler Preis pro Video gelten nicht als Beleg.

Entscheidung in einer Minute

Aufgabe	Startpunkt	Warum
Produkttour, UI, Code oder Daten	Remotion	Reifes React-Ökosystem, Compositions, Props und Rendering
HTML/CSS-Motion und einfache Agent-Übergabe	HyperFrames	Direkte HTML-Autorenschaft ohne React-Pflicht
Viele Varianten einer Vorlage	Beide möglich	Deterministisch, sobald Inhalte parametrisiert sind
Realistische Personen, Orte und filmische Szenen	Separater Medien-Schritt	Codevideo ersetzt deren Produktion nicht
Ein einmaliges kurzes Video	Minimaler Prototyp	Batch-Infrastruktur wäre oft zu früh

Die entscheidende Frage lautet: Lassen sich die Frames als Code, Dateien, Daten und Zeit beschreiben? Je näher das Ergebnis an Website, Präsentation, Dashboard, Code-Editor, Untertiteln oder Markenanimation liegt, desto besser passt der Ansatz.

Aufgabe von Claude Opus 5.5

Anthropic veröffentlichte Claude Opus 5.5 am 22. September 2026. Die exakte API-Modell-ID lautet claude-opus-5-5. Im Workflow kann das Modell:

1. Ein Briefing in Szenen, Komponenten, Timing und Abnahmekriterien zerlegen.
2. Mehrere Dateien eines Remotion- oder HyperFrames-Projekts bearbeiten.
3. Hart codierten Inhalt in Props, JSON und Manifeste überführen.
4. Checks, Preview und Render ausführen und Fehler anhand der Ursache reparieren.
5. Designregeln über Varianten hinweg bewahren.

Die Grenze ist wichtig: Das Modell liefert Text, Code oder Patches, nicht die fertige MP4-Datei. Rendering läuft lokal, in CI, auf einem Server oder einer Render-Infrastruktur. Modell-Tokens und CPU, Chrome, FFmpeg, Storage sowie Traffic sind getrennte Kosten.

Briefing vor dem ersten Prompt

Legen Sie ein prüfbares brief.md an:

# Video-Briefing

- Ziel: zeigen, wie ein Nutzer einen API-Schlüssel erstellt und die erste Anfrage sendet.
- Zielgruppe: Entwickler, die das Produkt zum ersten Mal bewerten.
- Format: 1920x1080, 30 fps, 8 Sekunden, ohne Ton.
- Composition ID: ProductExplainer
- Szenen:
  1. Problem und Nutzenversprechen, 0–2 s
  2. Produktablauf in drei Schritten, 2–6 s
  3. Ergebnis und CTA, 6–8 s
- Eingaben: productName, headline, steps, accentColor, Screenshot-Pfade
- Vorgaben: nur lokale Assets verwenden; beim Rendern keine Netzwerkanfragen.
- Abnahme:
  - Text bleibt innerhalb der Sicherheitsränder.
  - Die Konsole enthält keine Fehler.
  - Die Composition lässt sich per CLI als MP4 rendern.
  - Eine zweite Variante entsteht allein durch Ändern von props.json.

Auflösung, FPS, Dauer, Composition ID, Asset-Pfade, Netzwerkregel und Validierungsbefehl sind Eingaben und dürfen nicht vom Agenten erraten werden.

Minimales Remotion-Projekt nach offizieller Anleitung

Mit Node.js und Claude Code:

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

In einem zweiten Terminal:

cd my-video
claude

Fordern Sie zunächst nur eine achtsekündige Composition ohne Remote-Abhängigkeiten an:

Lies brief.md und prüfe das bestehende Remotion-Projekt, bevor du Dateien änderst.
Erstelle genau eine Composition mit der ID ProductExplainer.
Verwende 1920x1080, 30 fps und 240 frames.
Baue einen klaren Produkterklärfilm mit drei Szenen ausschließlich mit React, CSS und inline SVG.
Die Composition muss productName, headline, steps und accentColor als props annehmen
und sinnvolle default props für die Vorschau in Studio enthalten.
Halte den gesamten Text innerhalb eines Sicherheitsrands von 120px. Lade beim Rendern keine entfernten Assets.
Nutze frame-basierte Remotion-APIs, damit jeder frame deterministisch reproduzierbar ist.
Nenne nach der Änderung die bearbeiteten Dateien, den Vorschau-Befehl und den exakten Render-Befehl.
Melde keinen Erfolg, solange der Render-Befehl nicht mit exit code 0 endet.

Eine feste ID ermöglicht Automation. Frame-basierte Animation sichert Reproduzierbarkeit. Lokale Assets entfernen CORS, Netzfehler und abgelaufene URLs aus dem ersten Test.

Preview, Render und Prüfung

Prüfen Sie ProductExplainer im Remotion Studio und führen Sie aus:

npx remotion render ProductExplainer out/product-explainer.mp4

Fertig ist der Test nur, wenn der Exit-Code 0 ist, die Datei existiert und abspielbar ist, kein Text abgeschnitten wird, keine Assets fehlen, keine unbehandelten Fehler bleiben und eine zweite Variante nur durch neue Props funktioniert.

Automatisieren Sie Metadatenprüfung:

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

Vorlage parametrisieren

props.json:

{
  "productName": "Acme API",
  "headline": "Die erste Anfrage in drei Schritten",
  "steps": [
    "API-Schlüssel erstellen",
    "Modell auswählen",
    "Anfrage senden"
  ],
  "accentColor": "#6D5EF9"
}

Render:

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

Remotion weist darauf hin, dass Inline-JSON in Windows-Shells Anführungszeichen verlieren kann; eine Datei ist sicherer. Für Sprachen bleibt die Composition einmalig:

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

Komponenten steuern Gestaltung und Bewegung, Content-Dateien Texte und Assets, das Manifest Locale, Props und Ausgabename.

Renderfehler systematisch untersuchen

Detaillierte Logs:

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

Bei wiederholten Logs durch Parallelität:

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

Prüfen Sie dann in Reihenfolge: exakte Composition ID; Default-Props vor JSON; schrittweises Entfernen von Video, Fonts, Charts und Effekten; Unterschiede von Headless Chrome; Asset- und Font-Laden; asynchrone Wartebedingungen; Speicherung von Befehl, Props, Commit, erster ursächlicher Fehlermeldung und Umgebungsversionen.

Geben Sie Claude Code den exakten Befehl und die erste Ursache. Verlangen Sie Erklärung, minimalen Patch und denselben Validierungslauf.

Remotion, HyperFrames oder Diffusionsvideo

HyperFrames ist ein Open-Source-Framework von HeyGen mit HTML als Autorenformat. Es rendert HTML, CSS, Medien und seekbare Animationen deterministisch zu MP4:

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

Das aktuelle README verlangt Node.js 22+ und FFmpeg und unterstützt GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI sowie eigene Adapter.

Kriterium	Remotion	HyperFrames	Diffusionsvideo
Autorenschaft	React/TypeScript	HTML/CSS/JS	Text-, Bild- oder Video-Prompts
Reproduzierbarkeit	Hoch bei festen Eingaben	Hoch nach Design	Niedriger
Stärken	UI, Code, Daten, komplexe Templates	Web-Motion und Agent-Handoff	Realistische Menschen und Szenen
Parameter	Props, Daten, Komponenten	Data Attributes, HTML, Skripte	Modellparameter und Medien
Hauptkosten	Engineering und Rendering	Engineering und Rendering	Generierung und Postproduktion

Wählen Sie Remotion für React-Teams und langlebige Komponenten. Testen Sie HyperFrames, wenn ein gut lesbares index.html reicht. Realistische Aufnahmen werden separat erzeugt und anschließend montiert.

In der Serie ist die API nur eine Stufe

Empfohlene Architektur:

Briefings / Assets / Markenregeln
            ↓
Claude API: Code und Patches erzeugen oder überarbeiten
            ↓
Validierung: schema, allowlist, typecheck, lint, Review
            ↓
Render-Worker für Remotion oder HyperFrames
            ↓
ffprobe / Sichtprüfung / Speicherung / Veröffentlichung

Führen Sie Modellantworten nicht direkt in Produktion aus. Begrenzen Sie Verzeichnisse, halten Sie Secrets aus Prompts, pinnen Sie Abhängigkeiten, prüfen Sie Befehle und bauen Sie isoliert. Anthropic Message Batches verarbeitet Messages-Anfragen asynchron; es ist keine Video-Renderqueue.

API-Key sicher einlesen:

read -rs ANTHROPIC_API_KEY
export ANTHROPIC_API_KEY
printf '\n'

python -m pip install anthropic

briefs.json:

[
  {
    "id": "launch-en",
    "brief": "Erstelle mit content/en.json einen Patch für die englische Launch-Variante."
  },
  {
    "id": "launch-de",
    "brief": "Erstelle mit content/de.json einen Patch für die deutsche Launch-Variante."
  }
]

Vollständiges Erstellen, Polling und Speichern nach custom_id:

#!/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=(
                    "Du pflegst ein Projekt für codegenerierte Videos. "
                    "Gib einen knappen Implementierungsplan und einen unified diff zurück. "
                    "Füge weder Geheimnisse noch Befehle ein, die unbekannten Code herunterladen und ausführen."
                ),
                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"erstellt: {batch.id}")

while True:
    current = client.messages.batches.retrieve(batch.id)
    if current.processing_status == "ended":
        break
    print(f"in Bearbeitung: {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"gespeichert: {result.custom_id}")
    else:
        print(f"nicht gespeichert: {result.custom_id} -> {outcome.type}")

Nach Review der Patches rendert CI die validierten Verzeichnisse:

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

Ein Batch erlaubt derzeit höchstens 100.000 Requests oder 256 MB. Die meisten sind in unter einer Stunde fertig, Verarbeitung kann aber bis 24 Stunden laufen; Ergebnisse bleiben 29 Tage verfügbar. Verknüpfen Sie über custom_id und behandeln Sie errored, canceled und expired als Fehlschlag.

Kosten nach Token-Klasse berechnen

Preise geprüft am 28. September 2026, USD pro Million Tokens, exakte Modell-ID claude-opus-5-5:

Posten	Anthropic Standard	BetterToken effektiver Standardpreis	Definition
Regulärer Input	$4.00	$2.72	Nicht aus Cache gelesener Input
Output	$20.00	$13.60	Generierte Tokens
5-Min.-Cache-Write	$5.00	$3.40	Erstes Schreiben des Präfixes
1-Std.-Cache-Write	$8.00	$5.44	Erstes Schreiben für eine Stunde
Cache Read/Refresh	$0.20	$0.136	Wiederverwendung des Präfixes

Die öffentliche BetterToken-Konfiguration nutzt gestaffelte Basispreise und den aktuellen Claude-Gruppenfaktor 0.68. model_ratio=0 bedeutet nicht kostenlos. Prüfen Sie BetterToken Pricing und Anthropic Pricing vor dem Einsatz erneut.

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

Für 20 Briefings mit jeweils 30.000 Input- und 8.000 Output-Tokens ohne Cache:

• Anthropic Standard synchron: $5.60
• Anthropic Batch mit 50 % Rabatt auf Input und Output: etwa $2.80
• BetterToken synchron zum effektiven Standardpreis: $3.808

Nicht enthalten sind Retries, CPU/GPU, Chrome, Storage, Traffic, Medienproduktion und menschliche Prüfung.

BetterToken-Grenze in diesem Workflow

BetterToken kann als Anthropic-kompatible Route für Claude Code geprüft werden. Der aktuelle Base URL lautet https://bettertoken.ai; jeder Nutzer erstellt ein eigenes Konto und einen eigenen API-Key. Das ist kein Claude.ai- oder Claude-Max-Abonnement.

/v1/messages beweist nicht, dass BetterToken mit Message Batches kompatibel ist. Das Batch-Beispiel oben basiert daher ausschließlich auf der offiziellen Anthropic-API. Ändern Sie nicht nur den Base URL, bevor BetterToken Vertrag, Endpoint, Limits und Abrechnung ausdrücklich veröffentlicht.

Für Nutzer in Russland gibt es russische Dokumentation und Rubel-Zahlung; Methoden, Minimum, Kurs, Gebühren und Buchungsdauer entsprechen der Anzeige beim Bezahlen.

Checkliste vor dem Skalieren

• Briefing mit Ziel, Zielgruppe, Format, Szenen und Abnahme.
• Lokale lizenzierte Assets; feste Fonts und Screenshots.
• Eine parametrisierte Composition, Inhalte pro Sprache getrennt.
• Lockfile im Repository und npm ci im CI.
• CLI-Render, ffprobe und Sichtprüfung bestanden.
• Fehler mit Befehl, Props, Log, Commit und Umgebung dokumentiert.
• Exakte Modell-ID claude-opus-5-5.
• Input, Output und Cache getrennt gemessen.
• Ein bis zwei synchrone Tests vor dem Batch.
• Ergebnisse über custom_id verbunden.
• Modell- und Renderkosten getrennt ausgewiesen.

Nächster sinnvoller Schritt

Bauen Sie dasselbe achtsekündige Briefing einmal in Remotion und einmal in HyperFrames. Vergleichen Sie Zeit bis zum ersten gültigen MP4, Aufwand für Version zwei und Fehler in zehn aufeinanderfolgenden Renders. Wählen und automatisieren Sie erst danach.

Beweisen Sie zuerst ein reproduzierbares, prüfbares und parametriertes Video. Dann basiert die Skalierung auf Messwerten statt Annahmen.

Offizielle Quellen

• Claude Opus 5.5
• Anthropic Preise
• Anthropic Messages API
• Anthropic Message Batches
• Remotion mit Coding Agents
• Remotion CLI render
• Parametrisiertes Remotion-Rendering
• Remotion-Fehlersuche
• Offizielles HyperFrames-Repository
• BetterToken Preise