vidéo-shotcraft : Création de vidéos produit au cinéma

Une bibliothèque de production autonome : 152 fiches de plans (avec code source de démonstration et galerie d'échantillons dynamiques), un modèle de vidéo promotionnelle complet et validé, des composants réutilisables et des actifs audio, un flux de travail en six phases. L'accent actuel est mis sur les vidéos promotionnelles pour le web/desktop, mais les fiches de plans sont un vocabulaire d'effets universel — elles peuvent être utilisées individuellement pour créer n'importe quel plan dans n'importe quelle vidéo.

Déterminer le mode avant d'appeler

La vidéo promotionnelle complète propose trois modes non cumulables. Avant de commencer la collecte de contenu, le storyboard ou la réalisation, déterminez d'abord si l'utilisateur a déjà fait un choix explicite ; s'il a choisi, exécutez-le directement, sans demander à nouveau, et ne passez pas à un autre mode.

Utiliser le modèle : Suivre le flux de remplacement existant d'Ink Press. Lire template/TEMPLATE.md, remplacer les captures d'écran, le texte et les informations de marque du produit cible selon la structure de plans existante.
Création libre autonome : Lire references/pipeline.md. L'agent décide de manière autonome de la direction visuelle, du mappage des plans, du storyboard, du contenu et de l'audio en fonction des exigences de l'utilisateur et du projet, et avance en continu jusqu'à la vidéo finale ; ne s'arrête pas pour attendre la confirmation de l'utilisateur pendant les phases de brief produit, styleframe, mappage des plans ou storyboard.
Création collaborative : Lire references/guided-free-creation.md. L'agent propose d'abord des jugements et des solutions fondés, puis l'utilisateur confirme successivement le brief produit, les décisions sur les besoins, la direction visuelle, le mappage des plans et le storyboard final ; une fois le storyboard approuvé, passer à la phase finale de collecte de contenu et de production dans references/pipeline.md.

Si l'utilisateur a fourni un chemin de projet, une URL, un enregistrement d'écran ou une capture d'écran de page sans avoir choisi de mode, effectuer d'abord une vérification minimale et en lecture seule du produit : comprendre le positionnement du produit, ses fonctionnalités principales, son aspect visuel, son état présentable et les risques liés au contenu ; ne pas modifier le projet métier, ne pas collecter de données sensibles, ne pas écrire de code vidéo. Après la vérification, présenter les trois modes et expliquer :

Si Ink Press est adapté au produit, avec les raisons précises de l'adéquation ou non ;
Si la création libre autonome et la création collaborative sont adaptées, et quels indices visuels du produit seront conservés ;
Le mode recommandé par l'agent et les raisons/compromis associés.

Puis demander explicitement : « D'après la vérification ci-dessus, je recommande le mode ××. Continuer avec ce mode ? » Informer également l'utilisateur qu'il peut visiter https://vincentwei1021.github.io/video-shotcraft/ pour parcourir les échantillons dynamiques et choisir les effets qu'il souhaite utiliser dans la vidéo.

Si l'utilisateur n'a pas fourni de projet ou de page vérifiable, présenter brièvement les trois modes avant de demander ; ne pas recommander Ink Press par défaut simplement parce qu'il s'agit d'un modèle prêt à l'emploi.

L'utilisateur choisit le modèle : lire intégralement template/TEMPLATE.md et suivre le flux du modèle original.
L'utilisateur choisit la création libre autonome : lire intégralement references/pipeline.md, l'agent avance de manière autonome sans attendre de confirmation à chaque étape.
L'utilisateur choisit la création collaborative : lire intégralement references/guided-free-creation.md et collaborer selon les points de validation.
L'utilisateur n'a pas encore décidé : s'arrêter ici et attendre le choix ; ne pas choisir pour l'utilisateur par défaut, ne pas commencer la production.

Exception 1 : Si l'utilisateur a explicitement nommé le modèle Ink Press, le mode modèle est considéré comme choisi. Par exemple « Utiliser le modèle Ink Press pour faire une vidéo promotionnelle de mon produit ». Dans ce cas, ne pas demander à nouveau, lire intégralement template/TEMPLATE.md et suivre le parcours du modèle.

Exception 2 : Si l'utilisateur a explicitement indiqué qu'il souhaite utiliser ou se référer à certaines fiches de plans, les contraintes de plans sont déjà définies. Par exemple « Utiliser deck-deal-flyin et row-embed pour cette vidéo » ou « Se référer à l'effet spotlight-hero-card ». Dans ce cas, ne pas présenter le modèle, ne pas demander s'il faut utiliser le modèle ; confirmer les plans spécifiés selon les règles de résolution des noms de la galerie, lire intégralement chaque fiche, et localiser le code source de démonstration précis selon la « Référence de mise en œuvre » de la fiche. Un plan unique peut être exécuté une fois le contenu cible défini ; pour une vidéo promotionnelle complète, si l'utilisateur n'a pas encore précisé s'il s'agit d'une création libre autonome ou collaborative, ne demander que ces deux modes, les plans spécifiés servant de contraintes pour la production ultérieure, sans être automatiquement équivalents à une création collaborative.

Quatre utilisations

Vidéo promotionnelle complète (parcours modèle) : Souhaite un résultat très similaire à la vidéo modèle → lire template/TEMPLATE.md, suivre le « Guide de reproduction par remplacement de produit » pour adapter le contenu plan par plan.
Vidéo promotionnelle complète (création libre autonome) : Souhaite un nouveau style et autorise l'agent à décider de manière autonome → lire references/pipeline.md, avancer de la compréhension du produit à la vérification finale sans attendre de confirmation à chaque étape.
Vidéo promotionnelle complète (création collaborative) : Souhaite participer aux décisions clés → lire references/guided-free-creation.md, confirmer le brief produit, les décisions sur les besoins, la direction visuelle, le mappage des plans et le storyboard final ; après approbation, continuer avec la collecte de contenu final dans le pipeline.
Plan/effet unique : Choisir une fiche dans references/shots/ (ou laisser l'utilisateur choisir dans la galerie gallery/), lire la fiche en entier et localiser le code source de démonstration précis selon la « Référence de mise en œuvre », puis l'adapter au contenu cible.

Limite entre création libre autonome et création collaborative

La création libre autonome confie les décisions créatives et techniques à l'agent. L'agent déduit dynamiquement les priorités du produit, la direction visuelle, le mappage des plans, le storyboard, le traitement du contenu et la solution audio à partir du contenu du projet, enregistre les décisions clés et exécute directement ; sauf en cas d'absence d'informations nécessaires ne pouvant être déduites en toute sécurité, il ne pose pas de questions, ne s'arrête pas à chaque phase et ne demande pas de confirmation des livrables intermédiaires. Les exigences explicites de l'utilisateur sont toujours contraignantes et ne peuvent être remplacées par les choix par défaut de l'agent.

La création collaborative utilise la validation par étapes. Par défaut, lire references/guided-free-creation.md, ne poser que 1 à 3 questions à chaque tour, celles qui réduisent le plus les reprises, et s'arrêter pour attendre la confirmation de l'utilisateur lors du brief produit, des décisions sur les besoins, de la direction visuelle, du mappage des plans et du storyboard final. L'utilisateur confirme l'orientation métier et créative ; l'agent exécute de manière autonome la méthode de collecte, les paramètres de mise en œuvre, le calage SFX, le projet Remotion, le rendu et l'assurance qualité technique.

Dans la création collaborative, si l'utilisateur dit clairement « Vous décidez de tout » ou « Sautez la confirmation, allez-y », basculer en mode création libre autonome et enregistrer ce choix ; ne pas prétendre avancer de manière autonome tout en continuant à demander une validation par étapes.

Le mappage fonction-vers-plan n'est qu'une « sélection des syntaxes de mouvement à utiliser », pas un storyboard complet. Après avoir confirmé le mappage en création collaborative, l'agent doit fournir l'ordre des plans, leur durée, le contenu visuel spécifique, l'état de la page, la source du contenu, les sous-titres, les transitions et les SFX ; seule la confirmation du storyboard complet permet de passer à la collecte de contenu final. Lorsque l'utilisateur copie un nom de plan depuis la galerie, il suffit de fournir le nom de la fiche ou « nom de fiche · nom de style », l'agent se charge de lire la fiche locale et le code source de démonstration.

Principes fondamentaux

Reproduire une page existante nécessite de vraies captures d'écran ; l'UI faite à la main est réservée aux cas non-reproduction, et la qualité et la clarté de l'expression sont impératives. Pour représenter la page réelle du produit, démarrer d'abord un serveur dev local, utiliser un navigateur headless pour capturer une texture 2x de la page entière + un découpage élément par élément + une table de coordonnées layout.json. Pour les cas non-reproduction (ouverture abstraite, section de marque, composants d'affichage indépendants), l'UI faite à la main est autorisée, mais si elle n'atteint pas une qualité publiable ou si le spectateur ne comprend pas ce qu'elle exprime, revenir à la méthode des captures d'écran. Les données de page sont traitées selon le risque : les données de démonstration publiques ne peuvent être conservées qu'après confirmation explicite dans le brief produit ; les données clients, personnelles, internes, de clés, en temps réel ou autres données sensibles doivent être fictives ou anonymisées, et figées avant la collecte.
Le langage visuel de toute la vidéo doit découler du produit lui-même, ne pas créer une « peau de vidéo promotionnelle » sans rapport. Avant de faire un styleframe, extraire du système de design, du code source ou des styles calculés du produit/site web et rédiger une spécification de design : famille de polices et graisses, hiérarchie des tailles de police, interlignage/espacement, grille, espacement, alignement, densité d'information et coins arrondis, ainsi que couleurs d'arrière-plan/surface/corps/emphase/état, dégradés et matériaux. Tous les titres, sous-titres, chiffres, cartes de texte, typographies, transitions, particules, effets lumineux et autres couleurs d'effets doivent réutiliser ou étendre modérément ces tokens, tout en correspondant au ton, au goût et à la texture du produit. Lorsque vous suivez le modèle ou le parcours des fiches de plans, n'en héritez que la structure des plans, la syntaxe de mouvement, le rythme et les paramètres déjà réglés ; la police, la typographie, les couleurs et les matériaux doivent être réadaptés au produit cible. Si une déviation par rapport au visuel du produit est nécessaire pour la narration, en création collaborative, expliquez d'abord la raison et faites confirmer par l'utilisateur ; en création libre autonome, écrivez la raison et les compromis dans la spécification de design et continuez.
L'effet cinéma vient de la combinaison du mouvement de caméra, de la lumière, du rythme et du son, pas d'animations tape-à-l'œil. Ce qui est régulièrement apprécié : l'arc d'action complet d'un sujet unique (spotlight → zoom avant → flottement → retour), l'accélération pilotée par une métaphore physique (distribution de cartes), le plan orbite en contre-plongée autour d'un objet, la phrase sonore riser → impact → sparkle. L'entrée d'éléments en masse repose sur le mouvement lui-même, pas sur des lueurs individuelles — les glints/éclats en groupe décoratifs semblent bon marché, un effet lumineux ponctuel de haute qualité est acceptable.
Chaque plan ne raconte qu'un seul effet ; une fois l'information clé posée, il faut un temps de respiration. Une technique d'animation (entrée volante / empilement / page turning) n'est utilisée qu'une seule fois comme élément principal dans toute la vidéo ; les plans répétés et les taglines répétées sont supprimés. La préférence de rythme est unidirectionnelle : tous les retours historiques vont vers « ralentir/rester », jamais « trop lent » — le logo de la marque doit tenir ≥1s après sa pose, la fin des effets de masse laisse 0,5s d'immobilité, le mouvement d'ouverture du sujet principal dure 3s. Lors du montage de la timeline, prévoir un budget de frames pour les poses/arrêts.
Pour les vidéos avec une BGM à rythme fort, toutes les transitions et effets doivent être calés sur les temps. L'utilisateur a déjà choisi la musique → avant de commencer, effectuer une analyse rythmique (librosa grid fitting pour obtenir le vrai BPM/phase + localisation des coups de batterie en trois classes kick/snare/hihat), valider la grille par le taux de couverture des transitoires avant de faire le storyboard ; la timeline est écrite avec le numéro de temps beatF(n), les accents clairs sont calés sur les transitoires réels plutôt que sur des points d'interpolation de grille, après le rendu, extraire la piste audio de la vidéo finale et vérifier que l'erreur de coupe est ≤3f. Méthodologie voir references/music-beat-sync.md. Les vidéos avec BGM sont rendues en deux versions : version avec BGM + version sans BGM (SFX conservés), via l'inputProp bgm à partir de la même timeline, pour permettre à l'utilisateur d'ajouter sa propre musique plus tard.
Pour utiliser les effets des fiches de plans, il faut d'abord analyser l'index de la galerie et lire le code de démonstration précis. Utiliser d'abord gallery/api/library.json pour valider le nom de la fiche et le style-key, puis localiser le TSX spécifique selon la « Référence de mise en œuvre » de la fiche. Les fiches donnent la sémantique et les tableaux de paramètres ; le code source de démonstration précis est la vérité des paramètres réglés (easing, ratio de durée, moment du démasquage, contournement des pièges connus). Des adaptations sont autorisées, mais les paramètres marqués « pièges connus/points critiques » sur la fiche ne peuvent pas être dégradés — la qualité ne fait que monter. Écrire du nouveau code uniquement basé sur le nom de la fiche et la compréhension revient à abandonner tous les réglages accumulés.
La création collaborative place les validations peu coûteuses en amont, la création libre autonome garde les mêmes jugements comme enregistrement d'exécution. L'ordre brief produit → table des décisions besoin-à-exécution → direction textuelle → styleframe → mappage des plans → storyboard reste inchangé ; en création collaborative, il est soumis étape par étape à l'utilisateur pour validation ; en création libre autonome, l'agent choisit et avance en continu. Les deux modes ne doivent pas entrer dans la réalisation plan par plan tant que la direction n'est pas fixée.
Validation tout au long du processus + examen indépendant avant livraison. À partir de la phase 5, chaque plan fait l'objet d'un auto-contrôle avec npx remotion still pour générer des images fixes ; après chaque série de modifications, la vidéo entière est rendue et vérifiée par extraction d'images avec ffmpeg ; avant livraison, un sous-agent avec un contexte propre doit effectuer un examen final indépendant. L'entrée de l'examen comprend la vidéo finale, les images clés, le brief produit, la table des décisions besoin-à-exécution, la direction visuelle/styleframe confirmée ou enregistrée pour le mode actuel, le mappage fonction-vers-plan, le nom/variante de la fiche de la galerie, le TSX de démonstration précis, l'échantillon de référence/les images extraites de la galerie, le storyboard final, les fiches de plans sélectionnées et les règles esthétiques ; suivre references/final-review.md pour vérifier simultanément la cohérence du plan, l'intégrité fonctionnelle, la fidélité des plans, la qualité technique visuelle/audio et la sécurité des données, en produisant des preuves image par image. Le producteur a un biais de confirmation envers son propre travail ; la première vérification ne doit jamais être confiée à l'utilisateur.
Rendu déterministe : Interdire Date.now()/Math.random(), tout pseudo-aléatoire doit avoir une graine fixe (mulberry32/hash, seed dérivé de l'index), chaque image est reproductible.

Flux de travail

En création libre autonome, suivre references/pipeline.md de la phase 0 en continu, sans attendre la confirmation de l'utilisateur à chaque phase. En création collaborative, suivre d'abord references/guided-free-creation.md pour terminer les phases 0–3 (compréhension du produit, direction visuelle, mappage des plans et storyboard), puis continuer à partir de la phase 4 du pipeline (collecte de contenu final), sans poser de questions redondantes ni reconcevoir. Pendant les phases 2–3, parcourir les frontmatters des fiches dans references/shots/ et sélectionner les plans en fonction de la courbe d'énergie ; pendant les phases 5–7, vérifier en continu selon references/aesthetic-rules.md ; phase 6 lire references/sound-design.md ; pour les vidéos calées, suivre references/music-beat-sync.md.

Après la livraison de la vidéo finale dans tous les modes, demander une fois à l'utilisateur s'il souhaite également exporter un fichier de projet CapCut (pour modifier le texte des sous-titres, la police, la couleur, la vitesse/le réordonnancement des plans, ajuster ou remplacer l'audio dans CapCut) ; si l'utilisateur le souhaite ou le demande explicitement, lire references/jianying-export.md et exécuter.

Quand lire quel fichier

Contexte	Lire
Démarrage du projet et mode non défini	Vérification minimale en lecture seule, puis proposer trois modes de vidéo promotionnelle et recommander
Création libre autonome	pipeline.md (l'agent termine les phases 0–7 de manière autonome, sans attendre de confirmation à chaque phase)
Création collaborative	guided-free-creation.md (confirmer les phases 0–3), puis continuer à partir de la phase 4 de pipeline.md
L'utilisateur a déjà choisi une BGM	music-beat-sync.md (analyser d'abord, puis faire le storyboard)
Parcours modèle	template/TEMPLATE.md intégralement
Conception du storyboard	sequences/ modèles de séquence (remplir d'abord le squelette de la vidéo) ; shots/ tous les frontmatters ; lire la fiche entière pour la fiche sélectionnée
Réalisation plan par plan	Fiche entière du plan + code source de démonstration précis selon la « Référence de mise en œuvre » + composant correspondant dans assets/lib/
Conception sonore	sound-design.md + assets/audio/
Validation	final-review.md + aesthetic-rules.md en entier (exécuté par un sous-agent indépendant)
Après livraison (export projet CapCut)	jianying-export.md + modules de la plateforme `jianying-export/`

Utilisation des actifs

assets/lib/ Composants à copier dans le nouveau projet puis modifier librement (ne pas importer depuis cette bibliothèque). Liste : PageCam (caméra de page 2.5D — fondation de tous les plans « page réelle »), DigitRoll, FlashCut, Caption, FlatPanel, VerticalTicker (mur de défilement infini 3D), helpers(rand/shake/camera/motion). FlatPanel et helpers/camera nécessitent les dépendances three + @react-three/fiber + @remotion/three, le reste ne nécessite que remotion.
assets/scripts/capture-template.mjs Copier puis modifier le CONFIG en haut (BASE/routes/sélecteurs).
assets/audio/ Effets sonores à copier directement (licence commerciale gratuite, voir audio/ATTRIBUTION.md) : audio/bgm/ propose des BGM rythmées en option ; audio/sfx/<catégorie>/ 149 effets sonores répartis en 16 catégories (transition impact riser camera ui text paper film light data scifi mech glass fluid crowd counter), chercher d'abord par catégorie, la liste est dans sound-design.md. Le répertoire pour le vocabulaire sparkle est light/ (pas de sparkle/) ; S1 n'interdit pas les timbres mais les actions — si l'image montre un clic ou un interrupteur, il faut un bruitage, mais la moitié de ui/ sont des sons de feedback synthétiques (tone/bleep/notification) à écouter individuellement, à ne pas autoriser en bloc (liste dans sound-design 3.3) ; les échantillons longs et les éléments sonores légers ont des listes nécessitant un traitement spécial (sound-design 4.1).
demos/ Code source de mise en œuvre de chaque fiche : la plupart sont des démos en niveaux de gris autonomes (certaines importent des composants de scène UI factices depuis demos/_fixtures/Fixtures.tsx, certaines importent des textures de page réelle depuis demos/_textures/), à copier dans un projet Remotion pour exécution ; certaines démos utilisent @remotion/motion-blur (CameraMotionBlur), nécessite npm i @remotion/motion-blur, liste dans demos/README.md.
template/ Projet complet prêt à être rendu : npm install && npx remotion render src/index.ts AiflPromo out/promo.mp4.
jianying-export/ Module d'export de projet CapCut : mac_draft.py (testé sur CapCut 11.2 Mac), windows_draft.py (implémenté selon le chemin de support en amont, non testé sur machine réelle), smoke_test.py (test de fumée minimal à exécuter dans un nouvel environnement). Procédure, extraction de timeline et méthode de création de piste dans references/jianying-export.md ; nécessite venv + pip install pyJianYingDraft.
gallery/ Galerie statique : privilégier la version en ligne https://vincentwei1021.github.io/video-shotcraft/library.html pour l'utilisateur ; en local, exécuter d'abord gallery/fetch-media.sh pour télécharger les échantillons (les mp4 ne sont pas dans git), puis cd gallery && python3 -m http.server 4178. 152 fiches, 209 échantillons dynamiques à parcourir/rechercher/sélectionner/copier le nom — idéal pour laisser l'utilisateur choisir les plans en voyant les échantillons.

leecyno1/boutique-skills

Qu'est-ce que boutique-skills ?

Demander à votre IA préférée

Documentation