Motion Forge : Guide principal du Skill Code-to-Video (Code2Video) de qualité industrielle
Ce projet est un Skill Code-to-Video de qualité industrielle entièrement autonome et distribuable. Le système est basé sur un noyau unifié multi-technologies Remotion 4.x + React 19 + TypeScript + Three.js (@remotion/three) + Canvas 2D + SVG, intégrant 265 cartes d'effets atomiques découplées (divisées en 9 domaines spécialisés), une base visuelle sous-jacente (_shared/), un atelier de débogage local visuel et un processus strict de double validation qualité G1/G2.
Sommaire
- Architecture centrale et cinq règles techniques absolues
- Procédure opérationnelle standard des deux portes de validation qualité (G1 & G2 Gates SOP)
- Système de pipelines indépendants par scénario
- Vue d'ensemble des 265 cartes d'effets et principes de décision du réalisateur
- Principe de sélection ouvert : imagination artistique sans limites
- Vue d'ensemble des actifs d'effets par domaine (265 cartes)
- Exemples de combinaisons classiques pour six genres de films (pour inspiration uniquement, libre créativité)
- Spécifications d'assemblage à quatre emplacements et lignes rouges de qualité objective
- Protocole de storyboard Film IR et spécifications de rendu multi-technologies
- Cycle de vie complet de la CLI et interaction avec l'atelier local
- Livraison finale et liste de vérification des incidents
1. Architecture centrale et cinq règles techniques absolues
Avant d'écrire tout storyboard vidéo ou code de rendu, l'Agent doit respecter les cinq règles de conception non négociables suivantes :
-
Principe de découplage absolu et d'horloge locale (Local Frame Only) :
- Chaque scène utilise uniquement des numéros d'image locaux (
frame 0àdurationInFrames). Il est strictement interdit de coder en dur des horodatages absolus (absoluteFrameoufrom) à l'intérieur d'une scène. L'horloge absolue du film complet est compilée par la couche Core via l'accumulation de la timeline. - Il est strictement interdit aux scènes d'importer mutuellement des composants internes (
import). Tout état partagé entre les scènes doit être transmis via lespropsdeFilm IR. - Les cartes d'effets ne portent que la logique mathématique de mouvement et la logique visuelle. Il est strictement interdit de coder en dur le texte ou les chemins d'images métier spécifiques au projet à l'intérieur des cartes.
- Chaque scène utilise uniquement des numéros d'image locaux (
-
Déterminisme temporel par fonction pure (Frame-Deterministic Execution) :
- Toutes les transformations d'animation, les déplacements d'objets et les transformations de transparence doivent être des fonctions de calcul mathématique pures de l'image locale courante
frame: $Value = f(frame)$. - Il est strictement interdit d'utiliser
requestAnimationFrame,setInterval,setTimeoutdu navigateur ou toute timeline externe auto-exécutée. - Il est strictement interdit d'utiliser
Math.random()sans paramètre non ensemencé (vous devez utiliser lerandom(seed)intégré de Remotion avec une graine) pour garantir que chaque image, quelle que soit la position de recherche, soit 100% idempotente pixel par pixel.
- Toutes les transformations d'animation, les déplacements d'objets et les transformations de transparence doivent être des fonctions de calcul mathématique pures de l'image locale courante
-
Principe de boucle locale des actifs réels (Local Assets Only) :
- Le moteur de rendu interdit de connecter directement des URL distantes non vérifiées dans la composition vidéo (pour prévenir les coupures réseau, les blocages de hotlinking et les délais de requête).
- Les images externes, les clips vidéo et les bandes sonores doivent être téléchargés au préalable par les fournisseurs dans le répertoire local du projet et enregistrés de manière centralisée dans
assets.json. Les actifs manquants doivent être explicitement marqués et signalés à l'utilisateur. Il est strictement interdit d'utiliser des espaces réservés silencieux ou de fausses données.
-
Philosophie de rendu unifié multi-technologies (Multi-Tech Rendering) :
- Pour la mise en page et l'interface utilisateur interactive : HTML/CSS + animations élastiques Spring.
- Pour les contours géométriques, les lignes de connexion, les graphiques et les masques : interpolation de chemins SVG.
- Pour les particules, les fluides et les myriades de points à haute fréquence de mouvement : Canvas 2D.
- Pour les modèles 3D, les ombres spatiales et les mouvements de caméra 3D : Three.js (@remotion/three).
- Toutes les technologies obéissent à l'horloge de synchronisation d'image de
useCurrentFrame()de Remotion.
-
Principe d'indépendance du projet (Standalone Project) :
- Ce répertoire de Skill contient uniquement les normes de flux de travail, les références de cartes d'effets, les modèles d'exécution génériques et le générateur de projet
forge create. La totalité du contenu du projet utilisateur (core/,cards/,scenes/, les actifspublic/,film.json,package.json, l'atelier et la sortie de rendu) doit se trouver dans son propre répertoire, avec unnpm ciindépendant, une validation et un rendu indépendants, et pouvoir fonctionner indépendamment du répertoire du Skill. - Il est strictement interdit d'écrire du code ou des actifs spécifiques au projet dans le répertoire du Skill, ni d'utiliser des liens symboliques pour rattacher le contenu du projet au répertoire du Skill.
forge createcopie l'exécution, les cartes d'effets et le Film par défaut sous forme de fichiers réels dans le projet ; les composants de scène spécifiques au projet sont écrits directement sousscenes/du projet. - Les
output/projects/et le processus de validation dans le répertoire du Skill ne s'appliquent qu'aux exemples fournis avec le Skill. Les enregistrements de validation G1/G2 des projets réels sont conservés dans le répertoire du projet.
Initialisation d'un nouveau projet (entrée : chemin absolu du projet et actifs d'entrée ; sortie : squelette de projet pouvant installer indépendamment les dépendances) :
- Depuis le répertoire du modèle, exécutez
npm run forge -- create --dir /absolute/project --input <entrée> [--audio-kind song|instrumental] [--name <id>]. La cible doit être un répertoire vide en dehors du modèle. La commande génère une copie complète de l'exécution, copie les actifs locaux danspublic/assets/<id>/et crée un brouillon de projet. - Une fois l'initialisation terminée, allez dans
PROJECT_ROOT, exécuteznpm ci,npm run validate -- --project <id>. Le code du projet réel, les actifs, le Film IR, l'état d'approbation et la sortie sont contenus dansPROJECT_ROOT/output/projects/<id>/etPROJECT_ROOT/public/. - Utilisez uniquement des chemins relatifs sous
public/pour les actifs locaux. Les sources distantes ne sont enregistrées qu'en tant que métadonnées de source et n'entrent pas dans les références de rendu. Arrêtez-vous immédiatement si des actifs sont manquants ; le projet ne doit pas utiliser de chemins absolus ou de liens symboliques externes pour se faire passer pour un projet indépendant. - Toutes les commandes suivantes doivent d'abord exécuter
cd <PROJECT_ROOT>, puis exécuter les scripts du projet. Les produits de rendu et les enregistrements de validation ne doivent pas être réécrits dans le répertoire du modèle. - Le répertoire du modèle n'est utilisé que comme source en lecture seule lors de
create. Après la génération, les importations, les dépendances npm, les scripts et les références d'actifs du projet ne doivent plus pointer vers ce répertoire.
- Ce répertoire de Skill contient uniquement les normes de flux de travail, les références de cartes d'effets, les modèles d'exécution génériques et le générateur de projet
Branches d'échec et chemins de récupération
| Condition de déclenchement | Traitement de première ligne | En cas d'échec persistant ou de besoin de changement |
|---|---|---|
| Le répertoire racine du projet n'est pas clair, ou le projet va être écrit dans le répertoire du Skill | Arrêtez l'écriture, confirmez le chemin absolu du projet avec l'utilisateur ; toutes les commandes suivantes utilisent ce répertoire de projet comme répertoire de travail | Sans chemin clair, ne discutez que du plan, ne créez pas de fichier |
| Les actifs nécessaires sont manquants, illisibles ou d'autorisation incertaine | Signalez le chemin spécifique et la raison, mettez en pause la scène concernée ; n'utilisez pas d'espace réservé silencieux ou ne fabriquez pas d'actifs | L'utilisateur fournit les actifs manquants ou approuve explicitement une alternative, et révisez G1 en conséquence |
| G1 n'est pas confirmé ou une modification est demandée | Restez en phase de conception, révisez film.json et design-review.md | Ne créez pas d'échantillon, n'exécutez pas la commande d'approbation G1 |
| L'échantillon montre un écran noir, un décalage audio-vidéo, du texte débordant ou une qualité insuffisante | Maintenez le verrouillage G2, identifiez la scène spécifique et corrigez-la, ne re-rendez que l'échantillon | Soumettez à nouveau G2 ; n'utilisez pas le rendu complet pour remplacer la validation de l'échantillon |
| Le récit, la disposition, la durée, les actifs ou l'audio approuvés changent | La conclusion G1/G2 originale devient invalide ; revenez à G1 pour reconfirmer la portée affectée | Après le nouveau passage de G1, recréez et confirmez l'échantillon sonorisé |
| La commande de construction, de validation ou de rendu échoue | Conservez le journal complet, corrigez la cause première et relancez la même commande ; ne commentez pas l'erreur ou ne sautez pas la validation | Si l'échec persiste, arrêtez la livraison, signalez clairement les blocages et les validations déjà effectuées |
L'analyse d'indépendance trouve des chemins absolus externes, des dépendances file: ou des liens symboliques pointant vers le répertoire du Skill | Copiez le code ou les actifs nécessaires dans le projet, remplacez les références par des références internes au projet | Réinstallez et effectuez le rendu dans une copie isolée ; ne déclarez pas l'indépendance tant que cela n'est pas réussi |
2. Procédure opérationnelle standard des deux portes de validation qualité (G1 & G2 Gates SOP)
Pour éviter que l'Agent "imagine sans fondement, accumule du code aveuglément, provoquant un gaspillage de calcul et un écart par rapport aux attentes", le système impose deux portes de validation (Two-Gate Review). Il est strictement interdit de sauter les portes et de rendre directement le film complet !
[Entrée utilisateur]
↓
[Analyse des besoins & Préparation des actifs]
↓
[Rédaction du brouillon Film IR]
↓
【🔴 CHECKPOINT G1 : Confirmation du storyboard et du design】 → Présentez à l'utilisateur un script et un tableau visuel bien formatés, STOP et attendez l'approbation
↓ (Après confirmation de l'utilisateur, exécutez `npm run forge -- approve-design`)
[Création d'un échantillon sonorisé réel]
↓
【🔴 CHECKPOINT G2 : Confirmation de l'échantillon sonorisé】 → Rendez une vidéo représentative, l'utilisateur vérifie la qualité audiovisuelle réelle et la synchronisation, STOP et attendez l'approbation
↓ (Après confirmation de l'utilisateur, exécutez `npm run forge -- approve-sample`)
[Assemblage du code complet et rendu par lots]
↓
[Livraison finale (MP4 + projet éditable + atelier)]
2.1 Porte G1 : Validation du storyboard et du design visuel (Design Review)
Avant d'écrire du code de rendu complexe, l'Agent doit d'abord créer le « Plan de conception du storyboard et du design visuel G1 » et présenter à l'utilisateur un document de validation Markdown bien formaté, contenant au moins :
- Propriétés de base : type de film, public cible, format d'image (paysage 16:9 / portrait 9:16), durée totale cible et fréquence d'images (par exemple 30 ips).
- Thème visuel : couleur principale, couleur de fond, couleur principale du texte, couleur d'accentuation (Accent), famille de polices de la mise en page.
- Sélection de l'horloge principale : alignement sur la narration / alignement sur les paroles de la chanson / grille de temps musicale pure / durée de lecture du texte.
- Tableau détaillé du scénario du storyboard (doit être présenté à l'utilisateur strictement selon le format du tableau ci-dessous) :
| Numéro de scène | Nom de la scène | Objectif narratif et sémantique | Narration | Texte à l'écran réel | Description visuelle | Carte d'effet principale (Primary) | Carte de caméra (Camera) | Carte de transition (Transition) | Durée locale (Images/Sec) |
|---|---|---|---|---|---|---|---|---|---|
| S01 | Début percutant | Accroche : créer du suspense | Pourquoi 90 % des transformations IA des entreprises s'arrêtent-elles à la démo ? | "Pourquoi 90 % des transformations IA des entreprises échouent-elles ?" | Titre immense et très contrasté au centre + fond lumineux d'alerte rouge | typography/halation-bloom | camera/slow-push | transition/cube-rotate | 90i (3.0s) |
| S02 | Présentation des données | Preuve : donner des statistiques frappantes | Regardez deux chiffres : 78% restent au stade de jouet, 12% génèrent un retour négatif. | "78% restent au stade de jouet12% génèrent un ROI négatif" | Panneau de comparaison à deux colonnes gauche-droite + graphiques dynamiques de nombres et de sable | data/particle-sand-fill | Aucun | transition/whip-pan | 150i (5.0s) |
- 🔴 CHECKPOINT · STOP : Après avoir présenté à l'utilisateur, vous devez terminer ce tour et demander s'il approuve la planification du storyboard ; n'exécutez pas l'approbation, la création d'échantillon ou le rendu complet dans le même tour.
- Signal d'approbation : Ce n'est qu'après que l'utilisateur a explicitement confirmé G1 dans une réponse ultérieure que l'Agent exécute dans
PROJECT_ROOT:npm run forge -- approve-design --project <project-id>
2.2 Porte G2 : Validation de l'échantillon sonorisé (Sample Review)
Après la confirmation de G1, ne rendez pas immédiatement le film complet. Vous devez sélectionner la scène la plus représentative, visuellement la plus complexe, contenant des éléments audio-visuels réels (généralement la scène d'accroche ou la scène culminante), la créer et la rendre en tant que vidéo d'échantillon :
- Commande de rendu :
npm run forge -- render --project <project-id> --scope sample - Points de contrôle qualité :
- La synchronisation audio-vidéo est-elle parfaite ? Les sous-titres apparaissent-ils 1 à 2 images avant le début de l'énonciation ?
- Le texte à l'écran est-il masqué, coupé ou dépasse-t-il la zone de sécurité ?
- La vitesse de l'effet correspond-elle à l'émotion musicale ? Laisse-t-il une sensation de respiration ?
- 🔴 CHECKPOINT · STOP : Après avoir fourni la vidéo d'échantillon réelle et les résultats du contrôle qualité, vous devez terminer ce tour et attendre l'examen de l'utilisateur ; n'approuvez pas G2 à la place de l'utilisateur.
- Signal d'approbation : Ce n'est qu'après que l'utilisateur a explicitement confirmé l'échantillon que vous exécutez dans
PROJECT_ROOT:npm run forge -- approve-sample --project <project-id> - Ce n'est qu'après avoir terminé l'approbation G2 que la machine à états du projet déverrouille l'autorisation de rendu final complet du film !
3. Système de pipelines indépendants par scénario
La logique de traitement de bout en bout pour chaque type d'entrée est divisée en fichiers de guide indépendants, situés dans le répertoire pipelines/. L'Agent doit consulter le guide correspondant en fonction du type réel d'entrée de l'utilisateur :
| Type de scénario | Entrée applicable et types de films | Fichier de guide Pipeline correspondant |
|---|---|---|
| Scénario 1 : Vidéo à partir d'une URL | Blog, article de compte public, page d'atterrissage SaaS, documentation technique, communiqué de presse | pipelines/url-to-video.md |
| Scénario 2 : Vidéo à partir d'un fichier audio instrumental | Instrumental pur, musique électronique, partition épique ; film philosophique, clip rapide, essai d'ambiance | pipelines/instrumental-to-video.md |
| Scénario 3 : Vidéo à partir d'une chanson avec voix | Chanson complète (chant + accompagnement) ; clip MV dynamique avec paroles, court-métrage musical narratif | pipelines/song-to-video.md |
| Scénario 4 : Vidéo à partir d'un thème uniquement | Un thème/sujet en une phrase ; vulgarisation scientifique approfondie, philosophie humaine, analyse commerciale, court métrage de culture générale | pipelines/theme-to-video.md |
| Scénario 5 : Montage d'actifs multimodaux utilisateur | Images personnelles de l'utilisateur, captures d'écran, clips vidéo courts, enregistrements de narration ; démonstration de produit, Vlog | pipelines/assets-to-video.md |
| Spécifications générales de planification de contenu | Planification structurée d'un thème/d'une URL, arc narratif, traçabilité des faits et conversion en Film IR | pipelines/content-planning.md |
| Guide d'extension de scénario | Comment étendre de nouvelles entrées (par exemple, tableau, PPT, podcast à deux, etc.) | pipelines/extending-pipeline.md |
4. Vue d'ensemble des 265 cartes d'effets et principes de décision du réalisateur (Creative & Open Motion Design)
Les 265 cartes d'effets atomiques intégrées au système sont les pinceaux visuels de l'Agent pour créer des vidéos.
4.1 Principe de sélection ouvert : imagination artistique sans limites
- Ne pas imposer de restrictions rigides et dogmatiques : Ce système ne limite jamais « tel type de film doit utiliser telles cartes ». Au contraire, nous encourageons l'Agent à choisir et à innover librement en fonction de la tension émotionnelle du texte, du suspense narratif et du rythme auditif.
- L'Agent est le véritable réalisateur visuel : Les cartes d'effets sont un ensemble de briques modulaires. Vous pouvez utiliser le
interaction/command-palette-summon, initialement conçu pour les produits technologiques, pour exprimer la « recherche de connaissances » d'un penseur antique ; ou utiliser letypography/split-flap-flipd'un panneau d'affichage mécanique d'aéroport pour montrer un voyage dans le temps ou un compte à rebours de la vie. - Réglez librement les paramètres sans graduation : Chaque carte expose des paramètres riches (comme la rigidité du ressort, l'intensité de la gravité, le rayon du flou, le nombre de particules, etc.). L'Agent peut librement personnaliser la sensation de mouvement individuelle dans les
paramsdefilm.json.
4.2 Vue d'ensemble des actifs d'effets par domaine (265 cartes)
Les 265 cartes sont toutes encapsulées de manière standardisée, prennent en charge l'adaptation automatique aux modes paysage et portrait, et sont complètement découplées et cohérentes par domaine :
| Catégorie (Kind) | Répertoire et nombre total de cartes | Fonction visuelle principale | Actifs de cartes représentatifs (référençables directement dans le code) |
|---|---|---|---|
camera | cards/camera/ (21 cartes) | Mouvements de caméra spatiaux (zoom, travelling), focale, distorsion de perspective, pour créer de la profondeur spatiale dans une image plate | dolly-zoom (zoom travelling hitchcockien), slow-push (push lent profond), slow-pull (pull arrière progressif), shot-crash-zoom-punch (zoom percutant), space-camera-moves (roulis spatial 3D), tension-camera-moves (tension par inclinaison d'horizon), overhead-camera-moves (travelling panoramique vu du dessus), whip-pan (panoramique fouetté), orbit-drift (dérive orbitale) |
typography (Typographie) | cards/typography/ (52 cartes) | Entrée de titre, rythme des sous-titres, renforcement des phrases clés, terminal de code, décodage de caractères | split-flap-flip (panneau mécanique rétro d'aéroport), scramble-decode (décodage matriciel de caractères), halation-bloom (halo de surexposition de film), type-rhythm-sync (alignement rythmique des sous-titres), tracking-expand-reveal (dévoilement par expansion de l'espacement), terminal-typewriter (machine à écrire de terminal hacker), keyword-reveal (apparition progressive de mots-clés), quote-card (carte de citation élégante), highlighter-sweep (surlignage par balayage), cel-flash-stomp (flash à l'arrêt sur image) |
interaction (Composants et interactions) | cards/interaction/ (58 cartes) | Objets skeuomorphes, composants interactifs, cartes flottantes, pop-ups et collaboration avec le curseur | command-palette-summon (invocation flottante Cmd+K), stack-reveal (révélation par pliage/dépliage de cartes), popup-book-rise (livre pop-up en papier se dressant), masking-tape-slap (tape de ruban de masquage), autolayout-gap-dial (cadran de disposition automatique), carousel-3d (carrousel 3D), theme-switch-moves (ondulation de changement de thème), collab-cursor-moves (concerto multi-curseurs), type-and-filter (saisie et filtrage), glassmorphism-card (panneau en verre dépoli) |
data (Données et graphiques) | cards/data/ (20 cartes) | Sédimentation physique de particules, courbes et barres dynamiques, tableaux de bord, sprint numérique | particle-sand-fill (sédimentation par gravité), counter-confetti (sprint numérique + confettis), number-counter (compteur à rouleaux), chart-grow (croissance de barres/courbes), chart-live-moves (flux de données en temps réel), gauge-readout-moves (sauts d'aiguille de jauge), before-after-slider-scrub (curseur de comparaison avant/après), scroll-brake-moves (arrêt sur image par frein de défilement) |
effects (Effets et lumières) | cards/effects/ (22 cartes) | Halos lumineux, curseur de balayage HUD, cristal 3D en rotation, champ de particules d'ambiance | three-crystal (cristal 3D en rotation Three.js), light-play-moves (diffusion de lumière balayante), spotlight-sweep-moves (ombre de projecteur balayant), glow-flyline-moves (trajectoire lumineuse volante), fui-hud-moves (déploiement de wireframe technologique), impact-feedback (onde de choc d'impact anime), canvas-particles (myriades de particules fluides), flying-words (nuage de mots en mouvement) |
rhythm (Montage et rythme) | cards/rhythm/ (8 cartes) | Images clés rythmiques, coupure rapide, duel en écran partagé, cut de montage | beat-cut-moves (coupe rapide avec flash lumineux sur le temps), speed-ramp-freeze (ralenti avec arrêt sur image et annotation), quad-split-parallel-scenes (quatre écrans pour vues parallèles), panel-grid-moves (réorganisation de cases de manga), rhythm-interrupt-moves (avancée percutante par coupe sautée), trailer-grammar-moves (noir percutant de bande-annonce) |
commercial (Plans commerciaux) | cards/commercial/ (43 cartes) | Plans de présentation de produit, génériques de marque, introduction du sujet, plan final | hook (plan d'accroche sur le point douloureux), price-card (carte de tarification et d'offre), features (flux de liste de fonctionnalités), store-card (carte de localisation de magasin), fact-sheet (liste d'informations factuelles), brand-ink-open (générique d'ouverture avec encre se diffusant), logo-shrink-wordmark-lockup (rétrécissement du logo en plan final), ui-to-brand-morph (métamorphose de l'interface en logo de marque) |
transition (Transitions) | cards/transition/ (26 cartes) | Changement spatio-temporel et transition du regard aux limites des scènes, élimination des cuts brusques | cube-rotate (rotation multidimensionnelle d'un cube 3D), clock-wipe (effacement par aiguille d'horloge), bubble-swarm-takeover (masque d'essaim de bulles), color-block-step-wipe (effacement par blocs de couleur progressifs), paper-plane-messenger (avion en papier traversant), push-through (poussée à travers), whip-pan (flou de panoramique à grande vitesse), dark-tunnel (tunnel sombre traversant) |
media (Affichage multimédia) | cards/media/ (15 cartes) | Composition d'entrée d'images externes, de clips vidéo et comparaison en incrustation | media-pop-in (apparition légère et rapide), split-compare (comparaison par curseur en écran partagé gauche-droite), svg-path (extension de chemin vectoriel), video-pip-float (incrustation flottante), photo-polaroid-scatter (dispersion de photos Polaroid) |
Base sous-jacente (
cards/_shared/) : Fournit des primitives de rendu communes à toute la bibliothèque (commeSpeedBlurpour le flou de mouvement,softShadowpour les ombres douces physiques à double couche,Stagepour le réflecteur de lumière de scène) et des calculs adaptatifs de taille de police pour la mise en page commerciale. N'est pas exposée en tant que carte indépendante.
4.3 Exemples de combinaisons classiques pour six genres de films (pour inspiration uniquement, libre créativité)
Voici uniquement des références d'inspiration pour des styles courants, pas des règles rigides. L'Agent peut tout à fait mélanger et assortir selon sa créativité réelle :
- Vulgarisation scientifique et connaissances générales (Science Explainer) :
typography/scramble-decode(décodage de caractères pour une ouverture percutante) +data/particle-sand-fill(sédimentation physique pour démontrer une échelle) +media/svg-path(lignes de connexion conceptuelles) +transition/color-block-step-wipe. - Essai philosophique et prose profonde (Philosophical Essay) :
typography/halation-bloom(halo de lumière sur film) +camera/dolly-zoom(distorsion de profondeur spatiale) +typography/quote-card(citation élégante) +effects/canvas-particles(poussière faible et flottante). - Produit technologique et lancement de fonctionnalités (Product Promo) :
effects/three-crystal(apparition d'un composant 3D) +interaction/command-palette-summon(invocation de productivité) +data/counter-confetti(record de performance battu) +transition/cube-rotate. - Stratégie commerciale et tableau de bord de données (Business & Strategy) :
data/gauge-readout-moves(aiguille de jauge) +data/chart-live-moves(croissance de courbe) +typography/highlighter-sweep(marquage de données) +transition/clock-wipe. - Émotion musicale et clip MV dynamique (Music Story & Lyrics) :
typography/type-rhythm-sync(ligne rythmique du couplet) +typography/cel-flash-stomp(accentuation sur l'arrêt sur image du refrain) +camera/shot-crash-zoom-punch(impact percutant) +transition/whip-pan. - Fait main vintage et album (Scrapbook & Handcrafted) :
interaction/masking-tape-slap(tape de ruban adhésif) +interaction/popup-book-rise(livre pop-up se levant) +typography/split-flap-flip(panneau mécanique) +transition/paper-plane-messenger.
4.4 Spécifications d'assemblage à quatre emplacements et lignes rouges de qualité objective
Chaque scène dans la propriété motion de film.json prend en charge quatre emplacements découplés :
{
"motion": {
"camera": { "cardId": "camera/slow-push", "params": { "scale": 1.15 } },
"primary": { "cardId": "data/particle-sand-fill", "params": { "gravity": 1.2 } },
"text": { "cardId": "typography/halation-bloom", "params": { "bloomIntensity": 0.8 } },
"transitionOut": { "cardId": "transition/cube-rotate", "params": { "direction": "left" } }
}
}
- Lignes rouges de qualité objective (à respecter impérativement) :
- Point focal visuel clair : Dans une même scène, il doit y avoir un sujet visuel clair. Si un effet
primaryintense est utilisé, la caméracameradoit être stable pour laisser respirer ; si la caméra utilise unshot-crash-zoom-punchpuissant, le contenu du composant doit rester relativement statique pour éviter un chaos visuel qui donnerait le vertige. - Temps de maintien cognitif suffisant (Cognitive Hold Time) : Une fois l'animation d'entrée et de déploiement terminée, le texte à l'écran et la structure centrale doivent rester stables pendant au moins 45 à 90 images (1,5 s à 3,0 s) pour permettre au spectateur de lire et de comprendre confortablement. Il est strictement interdit de couper immédiatement après l'animation.
- Correspondance entre la longueur du texte et le format de l'image : Pour le mode paysage, une ligne de texte ne doit pas dépasser 22 caractères chinois ; pour le mode portrait, une ligne ne doit pas dépasser 14 caractères chinois, afin d'éviter les chevauchements de lignes ou les dépassements de la zone de sécurité vidéo.
- Point focal visuel clair : Dans une même scène, il doit y avoir un sujet visuel clair. Si un effet
5. Protocole de storyboard Film IR et spécifications de rendu multi-technologies
film.json est la source unique de vérité sémantique de tout le projet.
5.1 Structure standard du Film IR
{
"id": "slug-du-projet",
"title": "Titre de la vidéo du projet",
"genre": "explicateur",
"brief": {
"goal": "Objectif narratif principal",
"audience": "Public cible",
"tone": "Ton et ambiance"
},
"output": { "width": 1920, "height": 1080, "fps": 30 },
"theme": {
"background": "#0a0f1d",
"foreground": "#f8fafc",
"accent": "#38bdf8",
"fontFamily": "Inter, PingFang SC, sans-serif"
},
"scenes": [
{
"id": "scene-01",
"title": "Nom de la scène",
"intent": "Intention narrative",
"semantic": "accroche",
"durationInFrames": 90,
"onScreenText": ["Titre principal réel à l'écran", "Texte explicatif du sous-titre"],
"layout": { "kind": "titre-central" },
"renderer": "html",
"sceneComponent": "scene/stack-explainer",
"motion": {
"camera": { "cardId": "camera/slow-push" },
"primary": { "cardId": "interaction/stack-reveal" },
"text": { "cardId": "typography/scramble-decode" },
"transitionOut": { "cardId": "transition/cube-rotate" }
},
"props": {},
"qa": { "keyFrames": [20, 45, 80] }
}
]
}
5.2 Mécanisme d'adaptation à deux modes (16:9 ↔ 9:16)
Toutes les scènes et cartes prennent en charge une mise à l'échelle réactive de manière uniforme. Dans le code de la scène, utilisez un conteneur de ratio de base :
import React from 'react';
import { useVideoConfig } from 'remotion';
export const AdaptiveStage: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const { width, height } = useVideoConfig();
const isPortrait = height > width;
const baseWidth = isPortrait ? 1080 : 1920;
const baseHeight = isPortrait ? 1920 : 1080;
const scale = Math.min(width / baseWidth, height / baseHeight);
return (
<div style={{
width: baseWidth,
height: baseHeight,
transform: `scale(${scale})`,
transformOrigin: 'top left',
overflow: 'hidden',
}}>
{children}
</div>
);
};
6. Cycle de vie complet de la CLI et interaction avec l'atelier local
(Le contenu original de cette section a été tronqué pour la traduction. Veuillez vous référer aux fichiers source pour des détails complets.)
7. Livraison finale et liste de vérification des incidents
(Le contenu original de cette section a été tronqué pour la traduction. Veuillez vous référer aux fichiers source pour des détails complets.)