Claude Opus 5.5 et Remotion : workflow complet pour créer des vidéos produit en code

Conclusion pratique : Claude Opus 5.5 associé à Remotion convient très bien aux vidéos explicatives de produit, aux animations d’interface, aux démonstrations de code, aux graphiques, aux annonces de version et aux modèles réutilisables. Opus 5.5 comprend le brief et écrit ou corrige le projet React/TypeScript ; Remotion rend ce code image par image. Aucun des deux n’est un modèle vidéo par diffusion : un prompt ne renvoie donc pas directement un MP4 photoréaliste.

Si la valeur du film repose sur des acteurs, des décors réalistes, des mouvements de caméra cinématographiques ou des images difficiles à décrire précisément en code, produisez ces médias séparément. Remotion ou HyperFrames pourra ensuite gérer titres, sous-titres, transitions, identité de marque et assemblage répétable.

Ce guide suit la documentation officielle actuelle. Le vrai critère de réussite est un MP4 rendu et vérifié sur votre machine ou dans votre CI. Une démonstration non vérifiée, une durée de rendu fixe ou un coût universel « par vidéo » ne constituent pas une preuve.

Choisir en une minute

Besoin	Point de départ	Pourquoi
Visite produit, UI, code ou données	Remotion	Écosystème React, compositions, props et rendu éprouvé
Motion design HTML/CSS et transmission simple par un agent	HyperFrames	Auteur HTML direct, sans React obligatoire
Nombreuses variantes d’un même modèle	L’un ou l’autre	Les deux sont déterministes lorsque le contenu devient paramètre
Personnes et scènes réalistes, langage cinématographique	Étape média séparée	La vidéo en code ne remplace pas la génération ou le tournage de ces plans
Une courte vidéo non réutilisée	Prototype minimal	Une plateforme batch serait probablement prématurée

La frontière utile est simple : chaque image peut-elle être décrite par du code, des fichiers, des données et du temps ? Plus le résultat ressemble à un site, un diaporama, un dashboard, un éditeur de code, des sous-titres ou une animation de marque, plus cette approche est pertinente.

Le rôle de Claude Opus 5.5

Anthropic a lancé Claude Opus 5.5 le 22 septembre 2026. L’identifiant API exact est claude-opus-5-5. Dans ce workflow, le modèle peut :

1. Transformer le brief en scènes, composants, minutage et critères d’acceptation.
2. Modifier plusieurs fichiers d’un projet Remotion ou HyperFrames.
3. Remplacer les textes codés en dur par des props, du JSON et des manifestes.
4. Exécuter les contrôles, la prévisualisation et le rendu, puis corriger la cause des erreurs.
5. Préserver les règles visuelles entre les variantes.

La limite doit rester explicite : le modèle produit du texte, du code ou un patch, pas le MP4 final. Le rendu s’exécute sur l’ordinateur, un runner CI, un serveur ou une infrastructure dédiée. Les tokens du modèle et les coûts CPU, navigateur, FFmpeg, stockage et trafic sont deux budgets distincts.

Écrire le brief avant de lancer Claude Code

Créez un brief.md dont le résultat est vérifiable :

# Brief vidéo

- Objectif : expliquer comment créer une clé API et envoyer une première requête.
- Public : développeurs qui évaluent le produit pour la première fois.
- Format : 1920x1080, 30 fps, 8 secondes, sans audio.
- Composition ID : ProductExplainer
- Scènes :
  1. Problème et promesse, 0–2 s
  2. Parcours produit en trois étapes, 2–6 s
  3. Résultat final et CTA, 6–8 s
- Entrées : productName, headline, steps, accentColor, chemins des captures
- Contraintes : utiliser uniquement des ressources locales ; aucun accès réseau pendant le rendu.
- Critères d’acceptation :
  - Le texte reste dans les marges de sécurité.
  - La console ne contient aucune erreur.
  - La composition est rendue en MP4 depuis la CLI.
  - Une deuxième variante est rendue en modifiant seulement props.json.

Résolution, fréquence d’images, durée, Composition ID, chemins des médias, politique réseau et commande de validation doivent être des entrées, pas des suppositions de l’agent.

Créer le projet Remotion minimal par la voie officielle

Avec Node.js et Claude Code installés, exécutez :

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

Dans un second terminal :

cd my-video
claude

Commencez par une seule composition de huit secondes, sans ressource distante :

Lisez brief.md et inspectez le projet Remotion existant avant toute modification.
Créez une composition dont l’ID exact est ProductExplainer.
Utilisez 1920x1080, 30 fps et 240 frames.
Réalisez une vidéo produit claire en trois scènes avec React, CSS et SVG inline uniquement.
La composition doit accepter productName, headline, steps et accentColor comme props,
avec des valeurs par défaut adaptées à l’aperçu dans Studio.
Gardez tout le texte dans une marge de sécurité de 120px. Ne chargez aucune ressource distante pendant le rendu.
Utilisez les API Remotion basées sur les frames afin que chaque frame soit déterministe.
Après modification, indiquez les fichiers changés, la commande d’aperçu et la commande exacte de rendu.
Ne déclarez pas le succès tant que la commande de rendu ne se termine pas avec le code 0.

Un ID stable rend l’automatisation fiable. Une animation basée sur les frames préserve la reproductibilité. Des ressources locales écartent CORS, panne réseau et URL expirée du premier diagnostic.

Prévisualiser, rendre et vérifier

Validez ProductExplainer dans Remotion Studio, puis lancez :

npx remotion render ProductExplainer out/product-explainer.mp4

Le minimum n’est terminé que si la commande renvoie le code 0, si le MP4 existe et se lit, si aucun texte n’est coupé, si aucune ressource ne manque, si aucune exception n’est laissée et si une seconde variante fonctionne uniquement en changeant les props.

Ajoutez une vérification automatisable :

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

Le CI peut ainsi rejeter une durée nulle, une mauvaise résolution ou l’absence de piste vidéo.

Paramétrer le modèle

Créez props.json :

{
  "productName": "Acme API",
  "headline": "Votre première requête en trois étapes",
  "steps": [
    "Créez une clé API",
    "Choisissez un modèle",
    "Envoyez la requête"
  ],
  "accentColor": "#6D5EF9"
}

Rendez la variante :

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

Remotion signale que le JSON inline peut perdre ses guillemets dans les shells Windows ; un fichier est plus fiable. Pour plusieurs langues, conservez une seule composition :

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

Les composants contrôlent le visuel, les fichiers de contenu contrôlent textes et ressources, et le manifeste relie locale, props et fichier de sortie.

Déboguer un rendu dans le bon ordre

Activez d’abord les logs détaillés :

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

Si la concurrence duplique les messages :

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

Vérifiez ensuite l’ID exact, les props par défaut avant le JSON, la suppression progressive des composants, les différences de Chrome headless, le chargement des polices et médias, les attentes asynchrones, puis conservez commande, props, commit, première erreur causale et versions d’environnement.

Lorsque vous redonnez le problème à l’agent, transmettez la commande exacte et la première cause. Demandez une explication, le plus petit patch possible, puis la répétition de la même validation.

Remotion, HyperFrames ou vidéo par diffusion

HyperFrames est un framework open source de HeyGen centré sur HTML. Il rend HTML, CSS, médias et animations seekable en MP4 déterministe :

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

Le README actuel exige Node.js 22+ et FFmpeg et prend en charge GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI et des adaptateurs personnalisés.

Critère	Remotion	HyperFrames	Diffusion vidéo
Auteur	React/TypeScript	HTML/CSS/JS	Prompts texte, image ou vidéo
Reproductibilité	Élevée avec entrées fixes	Élevée par conception	Plus faible
Usage idéal	UI, code, données et modèles complexes	Motion web et handoff d’agent	Personnes et scènes réalistes
Paramètres	props, données, composants	data attributes, HTML, scripts	Contrôles du modèle et médias
Coût principal	Ingénierie et rendu	Ingénierie et rendu	Génération et postproduction

Choisissez Remotion pour une équipe React et des modèles durables. Essayez HyperFrames lorsqu’un index.html lisible suffit. Pour des plans réalistes, créez les médias ailleurs puis assemblez-les avec l’un des deux.

En batch, l’API n’est qu’une étape

Architecture recommandée :

briefs / ressources / règles de marque
            ↓
Claude API : générer ou réviser le code et les correctifs
            ↓
validation : schema, allowlist, typecheck, lint, revue
            ↓
workers de rendu Remotion ou HyperFrames
            ↓
ffprobe / contrôle visuel / stockage / publication

N’exécutez pas la réponse du modèle directement en production. Limitez les répertoires, excluez les secrets, verrouillez les dépendances, révisez les commandes et utilisez un environnement isolé. L’API Message Batches d’Anthropic traite des requêtes Messages de manière asynchrone ; ce n’est pas une file de rendu vidéo.

Lisez la clé sans l’afficher :

read -rs ANTHROPIC_API_KEY
export ANTHROPIC_API_KEY
printf '\n'

python -m pip install anthropic

briefs.json :

[
  {
    "id": "launch-en",
    "brief": "Créez un correctif pour la variante anglaise avec content/en.json."
  },
  {
    "id": "launch-de",
    "brief": "Créez un correctif pour la variante allemande avec content/de.json."
  }
]

Script complet de création, polling et sauvegarde par 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=(
                    "Vous maintenez un projet vidéo généré par du code. "
                    "Renvoyez un plan d’implémentation concis et un unified diff. "
                    "N’incluez ni secret ni commande téléchargeant et exécutant du code inconnu."
                ),
                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"créé: {batch.id}")

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

Après examen des patchs, rendez les variantes validées :

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

Un Batch accepte actuellement 100 000 requêtes ou 256 MB au maximum. La plupart finissent en moins d’une heure, mais le traitement peut durer 24 heures ; les résultats restent disponibles 29 jours. Associez toujours les réponses par custom_id et traitez errored, canceled et expired comme des échecs.

Estimer le coût par type de token

Prix vérifiés le 28 septembre 2026, en USD par million de tokens, modèle exact claude-opus-5-5 :

Poste	Anthropic standard	BetterToken standard effectif	Définition
Entrée normale	$4.00	$2.72	Entrée non lue depuis le cache
Sortie	$20.00	$13.60	Tokens générés
Écriture cache 5 min	$5.00	$3.40	Première écriture du préfixe
Écriture cache 1 h	$8.00	$5.44	Première écriture d’une heure
Lecture/refresh cache	$0.20	$0.136	Réutilisation du préfixe

La configuration publique de BetterToken applique des prix de base par palier puis le multiplicateur actuel du groupe Claude 0.68. model_ratio=0 ne signifie pas gratuit. Revérifiez BetterToken Pricing et Anthropic Pricing avant utilisation.

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

Pour 20 briefs utilisant chacun 30 000 tokens d’entrée et 8 000 de sortie, sans cache :

• Anthropic synchrone standard : $5.60
• Anthropic Batch, remise de 50 % sur entrée et sortie : environ $2.80
• BetterToken synchrone au prix effectif standard : $3.808

Ce calcul ne couvre pas les retries, CPU/GPU, Chrome, stockage, trafic, médias ni revue humaine.

Limite de BetterToken dans ce workflow

BetterToken peut être évalué comme route Anthropic-compatible pour Claude Code. Le Base URL actuel est https://bettertoken.ai et chaque utilisateur crée son propre compte et sa propre API Key. Ce n’est pas un abonnement Claude.ai ou Claude Max.

La présence de /v1/messages ne prouve pas que BetterToken est compatible avec Message Batches. L’exemple Batch ci-dessus repose donc uniquement sur l’API officielle Anthropic. Ne changez pas seulement le Base URL tant que BetterToken n’a pas publié contrat, endpoint, limites et facturation dédiés.

Pour les utilisateurs en Russie, BetterToken propose une documentation russe et le paiement en roubles ; méthodes, minimum, taux, frais et délai sont ceux affichés au moment du paiement.

Checklist avant le passage à l’échelle

• Brief complet : objectif, audience, format, scènes et acceptation.
• Médias locaux et licenciés ; polices et captures figées.
• Une composition paramétrée, contenu séparé par langue.
• Lock file versionné et npm ci dans le CI.
• Rendu CLI, ffprobe et contrôle visuel validés.
• Échec documenté avec commande, props, log, commit et environnement.
• Modèle exact claude-opus-5-5.
• Entrée, sortie et cache mesurés séparément.
• Un ou deux appels synchrones avant le Batch.
• Résultats reliés par custom_id.
• Coût du modèle séparé du coût de rendu.

Prochaine étape

Réalisez le même brief de huit secondes une fois avec Remotion et une fois avec HyperFrames. Comparez le temps jusqu’au premier MP4 valide, l’effort pour la deuxième version et les échecs sur dix rendus consécutifs. Ensuite seulement, choisissez, paramétrez et automatisez.

Prouvez d’abord un rendu reproductible, vérifiable et paramétré. Passer à cent variantes deviendra alors une décision fondée sur des mesures.

Sources officielles

• Claude Opus 5.5
• Tarifs Anthropic
• Anthropic Messages API
• Anthropic Message Batches
• Remotion avec coding agents
• Remotion CLI render
• Rendu paramétré Remotion
• Débogage Remotion
• Dépôt officiel HyperFrames
• Tarifs BetterToken