Que fait Motion Craft Pro · 动效工坊 Pro ?

Motion-graphics programmatiques. Conçus pour l'esthétique et les habitudes de code de Claude Opus 5.5 : d'abord le storyboard, puis la voix off, puis les images clés, puis le rendu complet.

Ce n'est pas une vidéo générée par IA de type Kling/Jimeng. Les images sont dessinées image par image par le code sur Canvas.

Localiser le répertoire du skill (obligatoire à chaque fois)

engine.js / scenes.js / render.js / compose.py / tts.py / film.html / storyboard.json tous dans le même répertoire que ce SKILL.md (plat, pas de sous-dossiers).

<répertoire_skill> = chemin absolu du répertoire parent de ce fichier.

# Auto-vérification du chemin
python "<répertoire_skill>/compose.py" --check

Interdiction d'utiliser des chemins relatifs comme python scripts/compose.py — l'environnement de révision ne les trouvera pas.

Dépendances

Dépendance	Usage
Node 18+	render.js
puppeteer-core	Piloter Chrome local
Chrome / Chromium	Rendu
Python 3.9+	tts / compose
edge-tts	`pip install edge-tts`
FFmpeg complet	Composition (exclure la version allégée de Playwright)

Barre de qualité (suivez ceci pour être « Pro »)

Par défaut 1920×1080 (supporte aussi 1440×1080 / 1080×1920 / 1080×1080)
Un écran, une chose ; fondu obligatoire entre les scènes ; temps d'arrêt longs, entrées rapides
Léger dépassement du spring (damping≈16–18, pas de festin élastique sur tout l'écran)
Blancs : marges extérieures ≥ 8% du petit côté ; texte blanc chaud #f4f1ea, couleur d'accent sobre (bronze par défaut #c4a574)
Titres avec espacement des lettres ; différence de taille de police entre les niveaux ≥ 1.5×
Voix off d'abord + exporter de préférence les sous-titres avec WordBoundary
Exporter ≥ 4 images clés pour validation avant le rendu complet
renderFrame(t) fonction pure : interdiction de Date.now() / Math.random()

Workflow (strictement dans l'ordre)

1. Écrire le storyboard JSON (avant tout code)

Copiez storyboard.json, remplissez selon storyboard.schema.json :

meta : format, durée, texte de la narration, voix
beats[] : id, start, end, type, copy, visual
Types de scène : TitleBeat / BulletReveal / StatCounter / CompareBars / QuoteCard / EndCard

Des chiffres, pas d'adjectifs. Exemple : titre 86px, entrée 0.9s, maintien 2.2s — n'écrivez pas « rends-le plus imposant ».

2. TTS → Durée réelle → Réécrire la timeline

python "<répertoire_skill>/tts.py" \
  --text-file narration.txt \
  --out "<répertoire_travail>/voice.mp3" \
  --voice zh-CN-YunxiNeural \
  --rate=-6% \
  --captions-json "<répertoire_travail>/captions.json" \
  --captions-vtt "<répertoire_travail>/captions.vtt"

Utilisez la durée réelle de voice.mp3 pour modifier beats[].start/end et meta.duration. Ne fixez pas les temps à l'avance avant la voix off.

Sous-titres : Si Edge TTS retourne WordBoundary, agrégez par mot ; actuellement, la plupart des voix chinoises n'ont que SentenceBoundary, le script découpera en sous-titres de niveau phrase selon les virgules/points.

3. Remplir film.html (ou modifier à partir d'un modèle)

Références dans le même répertoire : engine.js, scenes.js (pas ../assets/)
Intégrez le storyboard dans la page, ou maintenez la synchronisation avec storyboard.json
Appelez MCScenes.drawScene(...) ; les décorations à droite peuvent être écrites à la main, mais le contenu doit suivre les composants de scène

4. Contrôle qualité des images clés (obligatoire)

Rendez d'abord un court échantillon ou faites glisser t dans le navigateur, ou rendez 1 image par seconde aux points clés. Vérifiez au moins : ouverture, milieu, données/comparaison, fin.

Vérifiez : superposition, débordement de texte, obscurité excessive, alignement, lisibilité des sous-titres.

5. Rendu complet

node "<répertoire_skill>/render.js" \
  "<répertoire_travail>/film.html" \
  "<répertoire_travail>/frames" \
  30 \
  18

6. Composition

python "<répertoire_skill>/compose.py" \
  --frames "<répertoire_travail>/frames" \
  --voice-file "<répertoire_travail>/voice.mp3" \
  --captions "<répertoire_travail>/captions.vtt" \
  --out "<répertoire_travail>/out.mp4" \
  --duration 18 \
  --width 1920 --height 1080

Optionnel : --bgm music.mp3 (atténuation de la voix), --burn-captions, ou --text pour que compose intègre directement le TTS.

7. Lire qa-report.json + quatre qa-stills

Si cela ne passe pas, modifiez le storyboard / la mise en page et refaites le rendu — ne soumettez pas en force.

API du moteur (engine.js)

const {
  Ease, spring, springSeg, seg, lerp, beatAlpha,
  glow, beam, drawBackdrop, createParticles, drawParticles,
  drawGrain, drawVignette, drawColorGrade,
  drawTracked, wrapCN, camera, transition, applyWipe,
  divider, card, ring, bars,
  drawCaptions, captionsFromWordBoundaries, layoutGrid, Palette
} = MC;

const { TitleBeat, BulletReveal, StatCounter, CompareBars, QuoteCard, EndCard, drawScene } = MCScenes;

Paramètres Spring recommandés (esthétique Claude)

Usage	damping	stiffness	overshootClamping
Entrée titre	16–18	140–160	false (permet un léger rebond)
Éléments de liste	18	145	true
Compteur numérique	14	120	false

Formats

Usage	Dimensions
Paysage par défaut	1920×1080
Cours / 4:3	1440×1080
Portrait	1080×1920
Carré	1080×1080

Utilisez layoutGrid(W,H) pour obtenir les marges et les deux colonnes.

Livrables

storyboard.json
film.html (ré-rendu possible)
voice.mp3 + captions.vtt / captions.json
out.mp4 (niveau 1080p)
qa-report.json + qa-stills/*.png ≥ 4

Limites

Produit des motion-graphics, pas de la prise de vue réelle, pas de vidéo générée par modèle de diffusion
Les scènes 3D complexes / performances de personnages / fluides ne sont pas dans le périmètre
Edge TTS n'est pas une voix humaine ; sa capacité émotionnelle est limitée
Un projet Remotion complet (écosystème React, cluster de rendu serveur) n'est pas inclus dans ce package ; ce package est une pile de direction légère prête à être déployée.

Motion Craft Pro · 动效工坊 Pro

Qu'est-ce que Motion Craft Pro · 动效工坊 Pro ?

Demander à votre IA préférée

Documentation