# Design Video Render

> Transforme un export "vidéo" Claude Design (animation HTML/React) en vrai fichier MP4. Pipeline Puppeteer (rendu image par image via window.__seek + capture de l'élément [data-capture-canvas]) puis encodage ffmpeg H.264. Utiliser quand l'utilisateur dit "monte la vidéo", "rends la promo en MP4", "exporte la vidéo Claude Design", "fais-en une vraie vidéo", tape "/design-video-render", ou fournit un dossier d'export Claude Design contenant un Promo.jsx / promo.html à filmer.

- Skill: `hectelion-sa/design-video-render` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add hectelion-sa/design-video-render`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hectelion-sa/design-video-render/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Hectelion-SA (https://skillmd.com/u/hectelion-sa)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/hectelion-sa/design-video-render

---


# design-video-render — Claude Design → MP4

Les "vidéos" produites par Claude Design sont des **animations HTML/React**, pas des fichiers vidéo. Ce skill les rend hors-ligne et les encode en MP4 déterministe (frame-accurate), sans la barre de lecture ni le letterboxing.

## Quand utiliser ce skill

Déclencher quand l'utilisateur demande de :
- Transformer un export Claude Design en vrai `.mp4`
- "Monter la vidéo", "rendre la promo en MP4", "exporter la vidéo Claude Design"
- Filmer un dossier d'export contenant un `Promo.jsx` (carré) ou un `promo.html` modulaire (vertical)

## Vue d'ensemble du pipeline

1. **`build.js`** — patche la source React et génère un `render.html` autonome qui :
   - tag le canevas de capture avec `data-capture-canvas` (on screenshote exactement cet élément, taille pixel exacte) ;
   - expose `window.__seek(t)` (un `React.useEffect` injecté dans le Stage) pour piloter l'animation image par image.
2. **`render.js`** — Puppeteer/Chromium charge `render.html`, attend `window.__seek` + les polices (`document.fonts.ready`), puis pour chaque frame appelle `__seek(t)`, attend 2× `requestAnimationFrame`, et screenshote `[data-capture-canvas]`. 30 fps. Sort des PNG dans `_render/frames/`.
3. **`encode.js`** — `ffmpeg-static` assemble les PNG : `-c:v libx264 -pix_fmt yuv420p -crf 18 -movflags +faststart`.

## Procédure

1. Repérer le dossier d'export Claude Design (racine contenant le `_ds/<id>/styles.css` et la source du composant).
2. Copier le dossier `scripts/` de ce skill dans la racine de l'export, en le renommant **`_render/`**.
3. Régler le **bloc CONFIG** de chaque script selon l'export (voir ci-dessous).
4. Installer et lancer, depuis la racine de l'export :
   ```bash
   cd _render && npm install
   cd .. && node _render/build.js && node _render/render.js && node _render/encode.js
   ```
   `node_modules` peut être supprimé par le ménage de Downloads → réinstaller (`npm i`). Chromium reste en cache `~/.cache/puppeteer`, donc la réinstallation est rapide.

## Deux formats d'export rencontrés (toujours vérifier lequel)

### Nouveau (à plat, carré — juin 2026+) — c'est ce que les scripts gèrent par défaut
- Loader `*.dc.html` (système `<x-dc>` / `<x-import>` via `support.js`), mais le composant **`Promo.jsx` est AUTONOME** (moteur + scènes, expose `window.VideoRoot`).
- Format **1080×1080**. `DUR` / `width` / `height` définis dans `Promo.jsx`. Icônes/SVG inline → ni `animations.jsx` ni `support.js` nécessaires.
- CONFIG : `build.js` → `SOURCE='Promo.jsx'`, `ROOT_GLOBAL='VideoRoot'` ; `render.js` → `W=1080,H=1080`, `TOTAL` = la valeur `DUR`.

### Ancien (modulaire, vertical)
- Dossier `video/` avec `promo.html` modulaire + jsx séparés (`icons.js`, `animations.jsx`, `promo-parts.jsx`, `promo-scenes.jsx`). Format **1080×1920**. `TOTAL` dans `promo.html`.
- L'ordre des `<script type="text/babel">` casse hors-ligne (`window.HEC` undefined) → précompiler chaque `.jsx` avec `@babel/standalone`, **chaque fichier dans sa propre IIFE** (sinon collision `const Stage`), puis assembler en un seul `render.html` à scripts ordonnés. Le composant Seeker (qui expose `__seek`) est déjà présent dans cet export.
- CONFIG : `render.js` → `W=1080,H=1920`, `TOTAL` = la valeur dans `promo.html`. `build.js` doit être adapté à l'assemblage multi-fichiers (cette variante n'est pas couverte telle quelle par le `build.js` par défaut).

## Pièges connus

- **Ne pas utiliser le `*(vertical).html` autonome** : ses polices/assets pointent vers des IDs opaques résolus uniquement par claude.ai → ne rend pas hors claude.ai. Toujours partir de la source modulaire / du `Promo.jsx`.
- **Viewport = format + 120 px** (la barre de lecture fait 44 px) pour forcer `scale = 1` du Stage et un rendu 1:1.
- **Capturer l'élément `[data-capture-canvas]`**, pas la page entière.
- **Règle de marque Hectelion** : pas d'em-dash. Le texte source de la promo peut contenir un em-dash ("Europe de l'Ouest — une expertise…") → le corriger dans la source avant le rebuild si la règle s'applique.

## Référence
Voir `README.md` pour les commandes npm. Scripts : `scripts/build.js`, `scripts/render.js`, `scripts/encode.js`.