Communitygithub.com

Motion Diorama

Produktion de vidéos éducatives verticales 9:16 (30–60 secondes) en 3D stylisée à partir de code pour une série éducative en français, avec trois modes actifs — Mode A : diorama 3D semi-réaliste (paysage/histoire, variante carte animée comprise) ; Mode B : démontage d'objets (fonctionnement d'objets/machines) ; Mode C : illustration anatomique 3D glossy (Série Corps Humain, suivre-un-flux). Rendu avec Remotion + Three.js ; PAS de footage réel et PAS de diaporama d'images IA.

Qu'est-ce que Motion Diorama ?

Motion Diorama est une compétence de production vidéo éducative verticale 9:16, conçue pour être utilisée avec des agents IA comme Claude Code, Cursor ou Codex. Elle permet de générer des vidéos de 30 à 60 secondes en trois modes distincts : le Mode A crée des dioramas 3D semi-réalistes pour des sujets paysagers ou historiques, avec une variante de carte animée ; le Mode B démonte des objets ou machines pour expliquer leur fonctionnement ; le Mode C produit des illustrations anatomiques 3D glossy suivant un flux unique. La compétence s'appuie sur Remotion et Three.js pour un rendu entièrement procédural, sans utiliser d'images IA, de photos ou de vidéos réelles. Le flux de production est hautement automatisé : un fichier `timeline.json` sert de source de vérité unique pour le timing, les styles sont verrouillés par mode, et un système de contrôle qualité interne avec mode « Toujours actif » (Live Mode) permet à la session de s'exécuter de bout en bout sans intervention de l'utilisateur, ou avec des points d'approbation classiques. La compétence impose des règles strictes contre le rognage de texte, l'utilisation d'animations aléatoires, et les éléments 2D, garantissant des résultats cohérents et de haute qualité.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/wafiq8/motion-diorama/tree/HEAD/.claude/skills/motion-diorama

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Motion Diorama — Compétence de Production Vidéo Éducative (v3.0 · édition publique)

Principe fondamental : vérifier avant le rendu, pas après. Tout ce qui peut être vérifié à moindre coût (timeline, image fixe, largeur de texte) DOIT être validé d'abord. Le rendu pleine résolution n'est effectué qu'une seule fois, à la fin, après que toutes les étapes sont vertes.

Ce fichier est le CŒUR. Les détails visuels par mode se trouvent dans references/ — mode-a.md pour le Mode A, mode-b.md pour le Mode B, mode-c.md pour le Mode C (À LIRE OBLIGATOIREMENT selon le mode de cette vidéo, avant de construire la scène). Les scénarios de test sont dans evals/evals.md. Les scripts dans scripts/ sont exécutés TELLS QUELS — ne pas réécrire leurs fonctions.

Décisions verrouillées (du créateur de la compétence — ne pas modifier en catimini ; si vous utilisez cette compétence et la modifiez, faites-le en toute connaissance de cause)

  • Trois modes actifs : Mode A (paysage/histoire + variante carte animée), Mode B (démontage d'objet — fonctionnement d'objets/machines), et Mode C (anatomie — Série Corps Humain). Le mode est choisi par l'utilisateur par vidéo via l'invite de départ ; la session lit le fichier de référence de ce mode avant l'Étape 2.
  • Objectif : construire un public. Conclusion intégrée = conclusion (Mode A) / rappel (Mode C) + fondu au noir. AUCUNE carte/étiquette de série à l'intérieur de la vidéo et AUCUN repère d'étape/indicateur de position à l'écran (décision de l'utilisateur le 13 Nov 2026, v2.8) — l'identité de la série ne vit que dans les sous-titres. Appel à la valeur UNIQUEMENT occasionnellement, si le sujet s'y prête et que l'utilisateur le demande pour cette vidéo — pas un élément obligatoire. Les appels à l'action commerciaux sont interdits.
  • Chiffres/données = HYBRIDE : l'affichage à l'écran (overlay DOM) est le système principal pour TOUS les chiffres. Exception : un maximum de UN chiffre héroïque 3D doré par scène dans la vidéo, uniquement pour le chiffre phare de cette vidéo — et le même chiffre DOIT également apparaître comme affichage/sous-titre, car la version 3D est un accent visuel, pas un vecteur d'information.
  • Durée finale 30–60 secondes, suivant l'audio.
  • Son : cette compétence est AGNOSTIQUE au niveau du son — utilisez n'importe quel MP3 de narration fourni par l'utilisateur dans public/narasi.mp3.
  • Musique : fichier de l'utilisateur dans public/musik.* — ne pas choisir de musique.
  • Faits : la source de l'utilisateur est la référence PRINCIPALE et prévaut en cas de contradiction. La session PEUT compléter par des recherches web, à condition : que la source soit mentionnée dans le rapport final, de privilégier les sources faisant autorité (revues, institutions, officielles), et que les affirmations non vérifiées SOIENT marquées comme incertaines — il est interdit de présenter des suppositions comme des faits.
  • Opérateur unique : une seule personne. Tous les résultats DOIVENT apparaître comme fichiers dans la session (image fixe, aperçu, final) pour pouvoir être téléchargés.
  • Cadence cible : 1–2 vidéos/jour. L'efficacité est une condition de conception — réutiliser les échafaudages, primitives et composants ; ne pas reconstruire ce qui existe déjà.
  • Étapes — Le mode Toujours actif est le mode par défaut de l'édition publique : la session NE s'ARRÊTE PAS pour attendre l'approbation de l'utilisateur. L'Étape 1 (résumé de la timeline) et l'Étape 2 (planche contact des images fixes) sont exécutées en INTERNE : la session évalue les résultats de sa propre étape par rapport aux critères écrits de cette compétence (validateur PASS + liste de contrôle QC), corrige elle-même les problèmes (max. 2 tentatives de correction par scène), puis continue. La décision suit le BLOC DE DÉCISION dans l'invite (par défaut : une narration trop longue est accélérée par atempo jusqu'à un max. de 1,25× ; les faits non vérifiés sont marqués dans le rapport). Les questions sans réponse de ce bloc sont posées EN UNE SEULE FOIS dans un seul message avant le début de la construction — il est interdit de poser des questions en cours de route. La session ne peut s'arrêter en cours de route que pour des BLOCAGES MAJEURS : (a) matériel manquant ou endommagé, (b) transcription impossible, (c) narration toujours en dehors de la plage 30–60 secondes après l'atempo max. Si l'invite indique « Mode Toujours actif : NON », les étapes classiques s'appliquent — deux approbations de l'utilisateur (après l'Étape 1 et après l'Étape 3) avec un barème d'assouplissement de l'Étape 2 basé sur des preuves : 3 passes nettes consécutives → 1 image fixe par scène ; 3 autres → optionnel pour les types de scène prouvés ; l'Étape 1 n'est jamais assouplie ; une révision visuelle majeure rétablit le format complet ; chaque assouplissement est consigné dans le rapport final.

Interdictions strictes

  • Interdiction d'utiliser des images IA/photos/2D/sprites/textures externes/modèles téléchargés comme scène. Tous les visuels = géométrie 3D procédurale Three.js.
  • Interdiction du letterbox ; caméra native 9:16.
  • Mouvement uniquement via la caméra dans l'espace 3D (parallaxe réelle). Interdiction de simuler le mouvement par zoom/pano d'image 2D.
  • Humains uniquement sous forme de silhouettes sombres et petites sans visage. Sujet principal du Mode A pas de gros plan (distance caméra minimale de 8 m pour les animaux/objets héroïques de paysage) — dans le Mode C, cette règle de distance ne s'applique pas : l'organe héroïque remplit effectivement le cadre ; dans le Mode B, cette règle ne s'applique qu'au cadrage de l'étape de contexte — l'objet héroïque de l'étape de laboratoire remplit effectivement le cadre (voir references/mode-b.md et references/mode-c.md).
  • Un seul moteur de rendu, un seul ensemble de matériaux, un seul rig d'éclairage pour toutes les scènes.
  • Interdiction de deviner la durée à partir du nombre de mots/storyboard. Le TIMING provient UNIQUEMENT de l'audio original (voir Timing).
  • Interdiction d'animations via useFrame(), Math.random(), Date.now(), ou l'accumulation d'images — tous les mouvements sont dérivés de useCurrentFrame() et de constantes aléatoires à graine fixe.

Timing — timeline.json est la source de vérité unique

  1. Assurez-vous que public/narasi.mp3 existe. S'il n'existe pas : ARRÊTEZ, informez l'utilisateur. Ne déterminez aucun timing avant que l'audio ne soit disponible.
  2. Obtenez l'horodatage par mot avec cette hiérarchie : a. Horodatage intégré du TTS (ex. ElevenLabs with-timestamps) si l'utilisateur le fournit — le plus précis. b. Repli Whisper : modèle GRAND uniquement, language="fr" forcé (pas de détection auto), et Whisper ne fournit que le TEMPS — le texte des phrases DOIT provenir du script officiel de l'utilisateur, pas de la transcription (les ASR français se trompent facilement sur les chiffres et les noms).
  3. Composez docs/timeline.json exactement selon ce schéma :
{
  "fps": 30,
  "audio_duration_s": 40.20,
  "total_duration_s": 41.00,
  "sentences": [
    {"id": 1, "text": "…", "start_s": 0.00, "end_s": 3.68, "scene": 1}
  ],
  "scenes": [
    {"id": 1, "sentence_ids": [1, 2], "start_s": 0.00, "end_s": 6.44}
  ]
}
  1. Règles de mappage : la limite de scène = la seconde de DÉBUT de la première phrase de la scène suivante ; le mappage est basé sur le CONTENU des phrases — il est interdit de regrouper des phrases pour remplir la durée ; l'écart entre la coupe réelle et la timeline ≤ 0,3 seconde.
  2. Exécutez python3 scripts/validate_timeline.py docs/timeline.json. En cas d'ÉCHEC : corrigez la timeline, répétez. Interdiction de continuer en cas d'ÉCHEC.
  3. Composez un résumé de la timeline (nombre de phrases, mappage des scènes, durée totale) et évaluez-le par rapport à ces critères — c'est l'Étape 1. Mode Toujours actif : ne vous arrêtez pas ; conservez le résumé pour le rapport final. Mode à étapes classiques : affichez-le à l'utilisateur et ATTENDEZ son approbation.
  4. total_duration_s doit être compris entre 30 et 60 secondes. En dehors de cette plage : Mode Toujours actif — appliquez la politique de l'invite (atempo max. 1,25× pour les dépassements ; étirez la pause de conclusion pour les durées trop courtes) et consignez-le dans le rapport ; si la durée reste en dehors de la plage, c'est un BLOCAGE MAJEUR : arrêtez et signalez. Mode classique : signalez à l'utilisateur — ne coupez pas ou ne rafistolez pas en catimini. Le silence sans raison est interdit ; une pause de récompense de 0,3 à 1 seconde à la conclusion est autorisée et comptée dans le total.

Verrouillage de style (résumé — détails par mode dans references/)

Mode A (détail dans references/mode-a.md)

  • Diorama 3D stylisé semi-réaliste : palette chaude cinématographique, un seul rig d'éclairage crépusculaire fixe, surfaces lisses et propres, arrière-plan simplifié. La palette peut s'adapter au sujet/saison ; le rig d'éclairage et les matériaux non.
  • Titre du sujet : typographie SERIF en majuscules sur un plan d'établissement en mouvement. L'accroche = la première phrase de la narration (question / réfutation de mythe / paradoxe) qui se présente sous forme de texte + son + visuel dans les ±1,5 premières secondes.
  • Sous-titres : karaoké par mot par page de 2–4 mots (pas un seul mot), mot actif en gras, mots-clés en couleur d'accent, dans la zone de sécurité inférieure.
  • Affichage des données : compteur animé qui compte exactement au moment où le chiffre est prononcé dans la narration + petite étiquette + ligne de repère ; l'affichage suivant a le même style. Le seul texte 3D autorisé à apparaître : un chiffre héroïque doré pour le chiffre phare (voir Décisions verrouillées).
  • Caméra : voyage continu à l'intérieur du segment ; échelle de zoom comme structure d'argument ; coupe franche uniquement entre les segments de faits, sous forme de fondu au noir de ±0,1 seconde.
  • Structure de la narration : pour les sujets de système/parcours, utilisez « suivre un flux » ; une vidéo peut contenir deux faits sur un même sujet avec un segment de démonstration.
  • Conclusion : plan beauté + titre/ère serif répété + phrase de conclusion. Fondu au noir ; sans étiquette/carte de série dans la vidéo (v2.8). (Appel à la valeur uniquement si demandé pour cette vidéo.)

Mode B — Démontage d'objet (détail dans references/mode-b.md)

  • DEUX étapes de monde : diorama de CONTEXTE chaleureux de style Mode A (l'objet apparaît entier dans son habitat) → étape LAB sur fond de grille technique sombre où l'objet est démonté ; transition via un zoom continu (l'arrière-plan s'estompe/se referme en iris), sans coupe franche.
  • Un seul modèle d'objet héroïque procédural construit une fois ; les vues éclatée et en coupe sont dérivées du même modèle.
  • SANS carte de titre (l'accroche = la première phrase de la narration dans le plan de contexte) et SANS HUD permanente — les fil d'Ariane, le compteur de zoom et la minicarte de référence sont SUPPRIMÉS (décision de recherche + directive v2.8). La navigation se fait par caméra continue, étiquettes leader-line et titre de phase momentané.
  • Phases standard : contexte → zoom + étiquette d'objet → DÉMONTÉ (étiquettes de parties bilingues FR + terme EN, apparaissant dans l'ordre de la narration) → COUPÉ (processus animé + affichage du processus) → EN FONCTIONNEMENT (la coupe fonctionne, suivre un flux, étiquettes de processus, particules de flux codées par couleur sémantique) → macro du mécanisme déterminant → payoff étiquette de principe en une ligne pendant que la caméra recule.
  • Conclusion du Mode B : phrase de conclusion/principe + fondu au noir ; sans carte/étiquette de série (v2.8).

Mode C — Anatomie (détail dans references/mode-c.md)

  • PAS un diorama : un seul organe héroïque 3D glossy flottant dans le vide violet foncé flou ; un seul modèle d'organe construit une fois, utilisé dans toutes les scènes. Nom de série par défaut exemple : « Série Corps Humain » (remplacez par le nom de votre série).
  • Code couleur de flux ABSOLU : bleu = pauvre en oxygène, rouge vif = riche en oxygène — jamais inversé, ni dans cette vidéo ni entre les vidéos de la série. Les particules cellulaires changent de couleur au point d'échange, exactement au moment de la phrase.
  • Structure OBLIGATOIRE suivre-un-flux : la caméra escorte un seul paquet à travers tout le circuit ; échelle de zoom organe → système → microscopique → organe → corps entier (silhouette).
  • Accroche = référence en temps réel au spectateur + compteur en direct qui tourne en synchronisation avec le battement visuel de l'organe dès la première seconde. Titre serif RETARDÉ jusqu'à ±5–8 secondes (après l'accroche), suivi d'une annotation de fait.
  • SANS repère d'étape et SANS HUD (v2.8) : la position du flux se lit à partir du voyage de la caméra ; les puces d'étiquette anatomique sont attachées à l'organe et s'allument lorsque leur partie est active.
  • Conclusion du Mode C : compteur final animé + phrase de RAPPEL qui fait écho à l'accroche ; fondu au noir ; sans carte/étiquette de série (v2.8). Interdiction de gore/réalisme médical graphique.

Règles de texte (anti-rognage — cause numéro un des révisions)

  • TOUT le texte à lire obligatoirement est un overlay DOM (composant Remotion), PAS du texte dans le canevas WebGL. La seule exception : le chiffre héroïque 3D hybride dans les Décisions verrouillées — les autres textes 3D sont interdits.
  • Mesurez CHAQUE texte avec measureText/fitText de @remotion/layout-utils APRÈS que la police soit chargée ; fontSize = min(limite du mode, résultat du fit) ; largeur maximale 90 % de la largeur du cadre ; marge de sécurité 5 % sur tous les côtés ; respectez les zones de sécurité de la plateforme (évitez ±250 px en haut et ±310 px en bas pour le texte important).
  • Si le texte ne tient pas à la taille minimale de lisibilité : COUPEZ-le en deux pages/lignes — il est interdit de réduire jusqu'à le rendre illisible, il est interdit de le laisser rogné.
  • Contraste : le texte clair sur fond clair DOIT avoir un contour/une ombre foncée.
  • Les étiquettes leader-line suivent les mêmes règles.

Audio

  • La narration est l'horloge maîtresse : toutes les limites de scène, sous-titres, compteurs et caméra lisent docs/timeline.json — il n'y a pas de deuxième source de timing.
  • La musique du fichier de l'utilisateur est placée comme lit sous la narration (ducking simple ; ne couvrez pas les mots). Sans fichier de musique de l'utilisateur : n'inventez pas de musique — informez l'utilisateur.
  • Le fichier final est normalisé à −14 LUFS, pic ≤ −1 dB.

Flux de production (l'ordre ne doit pas être sauté)

  • Étape 0 — Échafaudage : utilisez l'échafaudage de projet existant ; le moteur de rendu, le rig de la caméra, le verrouillage de style et les primitives NE sont PAS réécrits. Si le dépôt ne contient pas encore de projet Remotion (première production) : construisez l'échafaudage à partir du dossier starter/ dans le dépôt du paquet de cette compétence (dépendances version exacte dont le fonctionnement est prouvé), puis traitez-le comme un échafaudage existant.
  • Étape 1 — Timeline : selon la section Timing → validateur PASS → Étape 1 (interne en mode Toujours actif ; approbation de l'utilisateur en mode classique).
  • Étape 2 — Construction des scènes lecture de timeline.json et du fichier de référence du mode de cette vidéo (references/mode-a.md, references/mode-b.md, ou references/mode-c.md).
  • Étape 3 — Étape des images fixes : rendu de 3 images fixes par scène (début/milieu/fin de scène) + planche contact. Mode Toujours actif : évaluez la planche contact par rapport à la liste de contrôle QC de ce mode, corrigez les problèmes à l'étape des images fixes (max. 2 tentatives par scène), puis continuez — n'attendez pas l'utilisateur ; conservez la planche contact + la liste d'évaluation pour le rapport final. Mode classique : affichez et ATTENDEZ l'approbation de l'utilisateur. Corrigez à l'étape des images fixes — bien moins coûteux que dans la vidéo.
  • Étape 4 — Aperçu + QC autonome : rendu de l'aperçu à l'échelle 0.5, exécutez le QC ci-dessous sur vos propres résultats, corrigez tous les problèmes (rendu uniquement de la scène modifiée) avant de faire rapport.
  • Étape 5 — Final : rendu pleine résolution UNE SEULE FOIS ; exécutez bash scripts/check_output.sh out/<slug>-final.mp4 ; affichez le fichier + le rapport QC dans la session.

Rendu rapide (pipeline verrouillé)

  • Rendu PAR SCÈNE : out/scenes/scene-N.mp4 ; assemblez avec FFmpeg concat -c copy (paramètres de codec/résolution/fps DOIVENT être identiques entre les scènes, sinon l'assemblage sera corrompu).
  • --concurrency = nombre de cœurs CPU de la session (vérifiez nproc), pas la valeur par défaut.
  • Aperçu toujours --scale=0.5 ; pleine résolution 1080×1920 uniquement à l'Étape 5.
  • Maintenez le coût par image bas : géométrie primitive, instancing pour les éléments répétés, niveaux de détail progressifs pour les scènes complexes.

Contrôle qualité autonome (exécuté à chaque étape qui produit un visuel)

À la fin de chaque étape de production visuelle, évaluez le résultat par rapport à cette liste de contrôle QC. En mode Toujours actif, corrigez automatiquement (max. 2 tentatives par scène pour chaque problème). En mode classique, signalez à l'utilisateur et attendez les instructions.

Liste de contrôle QC générale (tous les modes)

  • Toutes les scènes sont-elles rendues sans artefacts ?
  • Le texte est-il entièrement visible (aucun rognage) ?
  • Les couleurs correspondent-elles à la palette verrouillée du mode ?
  • Les transitions sont-elles fluides (fondu au noir de ±0,1 s pour les coupes franches ; pas de sauts) ?
  • La musique ne couvre-t-elle pas la narration (ducking correct) ?
  • La durée totale est-elle comprise entre 30 et 60 secondes ?
  • Le fichier final est-il normalisé à −14 LUFS ?

Liste de contrôle QC Mode A

  • L'accroche est-elle présente dans les 1,5 premières secondes ?
  • Le sous-titre affiche-t-il 2 à 4 mots par page en karaoké ?
  • La caméra se déplace-t-elle en continu à l'intérieur du segment ?

Liste de contrôle QC Mode B

  • Les deux étapes (contexte + lab) sont-elles présentes avec la bonne transition ?
  • Les étiquettes sont-elles bilingues FR + EN ?
  • Le principe en une ligne s'affiche-t-il pendant le recul de la caméra ?

Liste de contrôle QC Mode C

  • Le code couleur du flux est-il respecté (bleu = pauvre en O₂, rouge = riche en O₂) ?
  • La structure suit-elle un seul flux du début à la fin ?
  • L'accroche inclut-elle un compteur en direct dès la première seconde ?

Gestion des erreurs

  • Fichier audio manquant : arrêtez immédiatement et informez l'utilisateur. Ne continuez pas sans fichier public/narasi.mp3.
  • Échec de validation de la timeline : corrigez la timeline et réexécutez le validateur. N'avancez pas tant que validate_timeline.py n'est pas PASSÉ.
  • Échec du rendu : vérifiez les messages d'erreur. S'il s'agit d'un problème de ressource (mémoire, GPU), réduisez la qualité/échelle et réessayez. Si le problème persiste, signalez-le à l'utilisateur.
  • Problème de texte rogné : ajustez la taille de la police ou divisez le texte en deux pages/lignes selon les règles de la section « Règles de texte ».

Livrables

À la fin de la session (Étape 5), les fichiers suivants doivent être disponibles dans le dossier de la session :

  • out/<slug>-final.mp4 — vidéo finale pleine résolution (1080×1920)
  • out/scenes/scene-*.mp4 — fichiers de scène individuels (pour le débogage)
  • docs/timeline.json — fichier de timing validé
  • docs/qc_report.md — rapport de contrôle qualité (problèmes trouvés et corrigés)
  • docs/contact_sheet.png — planche contact des images fixes (pour la validation)

Si le mode classique a été utilisé, le rapport doit également inclure les horodatages d'approbation de l'utilisateur et les notes sur les assouplissements accordés.

Skills associés