blue mountain 1231/cinematic-web-promo

video-shotcraft : réalisation de vidéos promotionnelles à l'esthétique cinématographique

Une bibliothèque de production autonome : 152 cartes de plans (avec code source de démonstration et galerie d'échantillons animés), un modèle de bande-annonce complet et validé, des composants réutilisables et des assets audio, un processus de travail en six phases. L'objectif actuel est la réalisation de bandes-annonces pour produits web/desktop, mais les cartes de plans sont un vocabulaire d'effets animés universel – elles peuvent également être utilisées individuellement pour créer un plan spécifique dans n'importe quelle vidéo.

Déterminer le mode avant d'appeler

La bande-annonce complète propose trois modes distincts et non combinables. Avant de commencer la collecte de素材, le storyboard ou la mise en œuvre, déterminez d'abord si l'utilisateur a déjà fait un choix explicite ; si c'est le cas, exécutez directement sans poser de questions et ne changez pas de mode.

1. Utilisation directe du modèle : Conservez le processus de remplacement d'Ink Press. Lisez template/TEMPLATE.md, remplacez les captures d'écran, le texte et les informations de marque du produit cible selon la structure de plans existante.
2. Création libre et autonome : Lisez references/pipeline.md. L'agent décide lui-même de l'orientation visuelle, du mapping des plans, du storyboard, des素材 et de l'audio en fonction des exigences de l'utilisateur et du contenu du projet, et progresse en continu jusqu'au produit fini ; ne s'arrête pas aux phases de briefing produit, styleframe, mapping des plans ou storyboard pour attendre la validation de l'utilisateur.
3. Création collaborative : Lisez references/guided-free-creation.md. L'agent propose d'abord des jugements et des solutions fondés, puis l'utilisateur valide successivement le briefing produit, les décisions sur les besoins, l'orientation visuelle, le mapping des plans et le storyboard final ; une fois le storyboard approuvé, entrez dans la phase finale de collecte des素材 et de production de references/pipeline.md.

Si l'utilisateur a fourni un chemin de projet, une URL, un enregistrement d'écran ou des captures d'écran de page sans avoir encore choisi de mode, effectuez d'abord une inspection minimale, en lecture seule du produit : comprenez le positionnement du produit, ses fonctionnalités principales, le visuel des pages, l'état présentable et les risques liés aux素材 ; ne modifiez pas le projet métier, ne collectez pas de données sensibles, n'écrivez pas de code vidéo. Après cette inspection, présentez les trois modes et expliquez :

• Si Ink Press est adapté à ce produit, avec des justifications concrètes pour et contre ;
• Si la création libre et autonome ou la création collaborative convient, et quels indices visuels du produit seront conservés dans chaque cas ;
• Quel mode l'agent recommande, avec sa justification et ses compromis.

Puis demandez explicitement : « D'après l'inspection du produit ci-dessus, je recommande d'utiliser le mode ××. Voulez-vous continuer avec ce mode ? » Informez également l'utilisateur qu'il peut se rendre sur https://vincentwei1021.github.io/video-shotcraft/ pour parcourir les échantillons animés et sélectionner les plans d'effets qu'il souhaite voir dans la vidéo.

Lorsque l'utilisateur n'a pas encore fourni de projet ou de page à inspecter, présentez brièvement les trois modes puis demandez ; ne recommandez pas Ink Press par défaut simplement parce que c'est un modèle prêt à l'emploi.

• L'utilisateur choisit le modèle : lisez intégralement template/TEMPLATE.md, exécutez selon le processus du modèle original.
• L'utilisateur choisit la création libre et autonome : lisez intégralement references/pipeline.md, l'agent progresse de manière autonome sans attendre de validation par phase.
• L'utilisateur choisit la création collaborative : lisez intégralement references/guided-free-creation.md, collaborez selon les nœuds de validation de ce document.
• L'utilisateur n'a pas encore décidé : arrêtez-vous ici en attendant le choix ; ne choisissez pas par défaut à sa place et ne commencez pas la production.

Exception 1 : lorsque l'utilisateur mentionne explicitement le modèle Ink Press, considérez que le mode modèle est sélectionné. Par exemple : « Fais une bande-annonce pour mon produit avec le modèle Ink Press. » Dans ce cas, ne posez plus de questions, lisez directement template/TEMPLATE.md et exécutez selon le parcours du modèle.

Exception 2 : lorsque l'utilisateur spécifie clairement l'utilisation ou la référence à certaines cartes de plans, les contraintes de plans sont déjà définies. Par exemple : « Utilise deck-deal-flyin et row-embed pour cette vidéo » ou « Référence-toi à l'effet de spotlight-hero-card. » Dans ce cas, ne présentez pas le modèle et ne demandez pas si le modèle doit être utilisé ; vérifiez les cartes spécifiées selon les règles de résolution des noms de la galerie, lisez intégralement chaque carte, et localisez le code source de démonstration précis selon la « Référence de mise en œuvre » de la carte. Un plan unique peut être exécuté une fois que les素材 cibles sont clairs ; si la bande-annonce complète n'a pas encore précisé si elle adopte la création libre et autonome ou la création collaborative, ne demandez que ces deux modes, les cartes spécifiées servant de contrainte pour la production ultérieure, sans être automatiquement assimilées à la création collaborative.

Quatre cas d'utilisation

1. Bande-annonce complète (parcours modèle) : Vous voulez un résultat très similaire à la vidéo modèle → lisez template/TEMPLATE.md, remplacez les素材 selon le « Guide de reproduction avec remplacement de produit » et adaptez plan par plan.
2. Bande-annonce complète (création libre et autonome) : Vous voulez un nouveau style et autorisez l'agent à décider de manière autonome → lisez references/pipeline.md, progressez en continu de la compréhension du produit à la vérification finale, sans vous arrêter par phase pour attendre validation.
3. Bande-annonce complète (création collaborative) : Vous voulez participer aux décisions clés → lisez references/guided-free-creation.md, validez le briefing produit, les décisions sur les besoins, l'orientation visuelle, le mapping des plans et le storyboard final ; une fois approuvé, reprenez à partir de la collecte finale des素材 dans le pipeline.
4. Plan unique / effet unique : Sélectionnez une carte dans references/shots/ (ou laissez l'utilisateur choisir dans la galerie gallery/), lisez l'intégralité de la carte et, selon la « Référence de mise en œuvre », localisez le code source de démonstration précis, adaptez-le aux素材 cibles.

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

La création libre et autonome confie les décisions créatives et d'ingénierie à l'agent. L'agent dérive dynamiquement les points forts du produit, l'orientation visuelle, le mapping des plans, le storyboard, le traitement des素材 et le plan audio à partir du contenu du projet, enregistre les jugements clés, puis exécute directement ; sauf en cas de manque d'informations nécessaires et impossibles à déduire de manière sûre, il ne pose pas de questions, ne s'arrête pas par phase et ne demande pas à l'utilisateur de valider les livrables intermédiaires. Les exigences explicites de l'utilisateur sont toujours des contraintes et ne peuvent pas être écrasées par les choix par défaut de l'agent.

La création collaborative utilise la validation par phase. Par défaut, lisez references/guided-free-creation.md, ne posez que 1 à 3 questions par tour qui réduisent le plus les reprises, et arrêtez-vous aux nœuds de briefing produit, décisions sur les besoins, orientation visuelle, mapping des plans et storyboard final pour attendre la validation de l'utilisateur. L'utilisateur valide les orientations métier et créatives ; l'agent réalise de manière autonome les méthodes de collecte, les paramètres de mise en œuvre, le calage SFX, le projet Remotion, le rendu et le QA technique.

Dans la création collaborative, lorsque l'utilisateur dit explicitement « Décide toi-même » ou « Saute la validation, fais-le directement », passez en création libre et autonome et enregistrez ce choix ; ne prétendez pas avancer de manière autonome tout en continuant à demander une validation par phase.

Le mapping fonctionnalités → plans n'est qu'un « choix des syntaxes de mouvement à utiliser », pas un storyboard complet. Après validation du mapping en création collaborative, l'agent doit continuer à donner l'ordre des plans, leur durée, les images spécifiques, l'état de la page, la source des素材, les sous-titres, les transitions et les SFX ; la collecte finale des素材 ne commence qu'après validation du storyboard complet. Lorsque l'utilisateur copie un nom de carte depuis la galerie, il suffit de fournir le nom de la carte ou « nom de la carte · nom du style », l'agent se charge de lire la carte de recette locale et le code source de démonstration.

Principes fondamentaux

1. Toute reproduction d'une page existante doit utiliser de véritables captures d'écran ; l'UI codée à la main est réservée aux situations de non-reproduction, et la qualité ainsi que la clarté de l'expression sont des seuils stricts. Pour représenter la page réelle d'un produit, commencez par lancer un serveur de développement local, utilisez un navigateur headless pour capturer la texture complète de la page en 2x, avec découpage par élément et un fichier layout.json de coordonnées. Dans les situations de non-reproduction (ouverture abstraite / segment de marque / composant de démonstration indépendant), l'UI codée à 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, revenez à la méthode des captures d'écran. Les données de page sont traitées selon leur niveau de risque : les données de démonstration publique ne peuvent être conservées qu'après confirmation explicite dans le briefing produit ; les données client, personnelles, internes, les clés, les données en temps réel ou autres données sensibles doivent être remplacées par des données fictives ou anonymisées, et figées avant la collecte.

2. Le langage visuel de la vidéo entière doit émerger du produit lui-même, et non d'une « peau promotionnelle » étrangère. Avant de réaliser un styleframe, extrayez et écrivez un spéc de conception à partir du système de design (ou des computed styles) du produit / site web : famille et graisse de police, hiérarchie des tailles, interligne / crénage, grille, espacement, alignement, densité d'information et coins arrondis, ainsi que les couleurs d'arrière-plan / surface / corps de texte / accentuation / état, dégradés et matières. Tous les titres, sous-titres, chiffres, cartes de texte, mises en page, transitions, particules, effets lumineux et autres couleurs des animations doivent réutiliser ou étendre avec parcimonie ces tokens, tout en correspondant à la tonalité, au goût et à la qualité du produit. Lorsque vous suivez le parcours du modèle ou des cartes de plans, n'héritez que de la structure des plans, de la syntaxe des mouvements, du rythme et des paramètres déjà réglés ; la police, la typographie, les couleurs et les matières doivent être réadaptées au produit cible. Si une déviation visuelle est nécessaire pour raconter l'histoire, en création collaborative, expliquez d'abord la raison et faites-la valider par l'utilisateur ; en création libre et autonome, intégrez la raison et les compromis dans le spéc de conception avant de continuer.

3. L'esthétique cinématographique provient de la coordination entre le mouvement de caméra, la lumière, le rythme et le son, non d'animations tape-à-l'œil. Ce qui a été reconnu de manière répétée : l'arc d'action complet d'un protagoniste unique (spotlight → zoom avant → lévitation → repositionnement), l'accélération pilotée par une métaphore physique (comme le défilement de cartes), l'orbite latérale en plan serré autour d'un axe incliné, les phrases sonores riser → impact → sparkle. L'entrée d'éléments en masse repose sur le mouvement lui-même, non sur une illumination individuelle – les scintillements décoratifs / lueurs en groupe sont bon marché, un effet lumineux ponctuel de haute qualité peut être réalisé.

4. Chaque plan ne raconte qu'un seul effet ; une fois l'information clé posée, il faut laisser respirer. Une technique d'animation (fly-in / empilement / page-turn) ne doit être la vedette qu'une seule fois dans toute la vidéo ; les plans répétés et les taglines répétées sont systématiquement supprimés. La préférence de rythme est unidirectionnelle : tous les retours historiques pointent vers « ralentir / faire une pause », jamais « c'est trop lent » – le logo de la marque doit tenir ≥1s après son apparition, la fin d'un effet de masse doit laisser 0,5s de pause, le mouvement principal du début doit durer 3s. Prévoyez un budget de trames pour les pauses / repos lors de la planification de la timeline.

5. Pour les vidéos avec une musique de fond rythmée, toutes les transitions et animations doivent être calées sur le beat. La musique est déjà choisie → avant de commencer, faites une analyse rythmique (ajustement de grille avec librosa pour obtenir BPM / phase réels + détection de coups pour kick / snare / hi-hat), validez la grille avec la couverture des transitoires avant de faire le storyboard ; la timeline est écrite en mesures beatF(n), les accents rares sont calés sur les transitoires réels plutôt que sur des points d'interpolation de la grille, et après rendu, extrayez la piste audio de la vidéo finale pour vérifier les écarts de coupe, qui doivent être ≤3 trames. La méthodologie se trouve dans references/music-beat-sync.md. Pour les vidéos avec BGM, le rendu final livre systématiquement deux versions : avec BGM et sans BGM (en conservant les SFX), via la propriété d'entrée bgm à partir de la même timeline, pour faciliter l'ajout ultérieur de musique par l'utilisateur.

6. Pour utiliser les effets des cartes de plans, il faut d'abord analyser l'index de la galerie et lire le code de démonstration précis. Utilisez d'abord gallery/api/library.json pour valider le nom de la carte et le style-key, puis, selon la « Référence de mise en œuvre » de la documentation de la carte, localisez le TSX spécifique. La carte de recette fournit la sémantique et la table des paramètres ; le code source de démonstration précis est la vérité des paramètres réglés (courbes d'assouplissement, rapport de durée, timing du masque, contournement des pièges connus). Des adaptations sont autorisées, mais les paramètres marqués comme « pièges connus / points faibles » sur la carte ne doivent pas être dégradés – la qualité ne peut qu'augmenter. Écrire à nouveau un effet basé sur le nom de la carte et une compréhension générale revient à abandonner tout l'accumulation de réglages.

7. La création collaborative place les éléments de validation bon marché en amont ; la création libre et autonome garde les mêmes jugements comme traces d'exécution. L'ordre briefing produit → tableau de décisions besoins-exécution → direction textuelle → styleframe → mapping des plans → storyboard ne change pas ; en création collaborative, il est soumis par étapes à la validation de l'utilisateur ; en création libre et autonome, l'agent choisit de manière autonome et progresse en continu. Aucun des deux modes ne doit entrer dans la mise en œuvre plan par plan tant que la direction n'est pas définie.

8. Validation tout au long du processus + révision indépendante avant livraison. À partir de la phase 5, chaque plan est vérifié avec une image fixe via npx remotion still, et après chaque série de modifications, un rendu complet est effectué avec extraction de trames via ffmpeg pour révision ; avant la livraison, un sous-agent en contexte propre doit effectuer une révision finale indépendante. Les entrées de la révision incluent : la vidéo finale, les images clés, le briefing produit, le tableau de décisions besoins-exécution, l'orientation visuelle / styleframe enregistré(e) selon le mode actuel, le mapping fonctionnalités → plans, les noms / variantes de cartes de la galerie, le TSX de démonstration précis, les échantillons de référence / trames de la galerie, le storyboard final, les cartes de plans sélectionnées et les critères esthétiques ; selon references/final-review.md, vérifiez simultanément la cohérence du plan, la complétude fonctionnelle, la fidélité des plans, la qualité technique visuelle / audio et la sécurité des données, et fournissez un rapport avec preuves (numéros de trames) pour chaque point. Le réalisateur a un biais de confirmation envers sa propre production ; la première révision ne doit jamais être confiée à l'utilisateur.

9. Rendu déterministe : Interdiction de Date.now() / Math.random(), toute pseudo-aléatoire utilise une graine fixe (mulberry32 / hash, seed dérivé de l'index), chaque trame est reproductible.

Processus de travail

La création libre et autonome suit references/pipeline.md de la phase 0 à la phase 7 en continu, sans attendre la validation de l'utilisateur par phase. La création collaborative suit d'abord references/guided-free-creation.md pour terminer les phases 0 à 3 (compréhension du produit, orientation visuelle, mapping des plans et validation du storyboard), puis reprend à la phase 4 du pipeline (collecte finale des素材), sans poser de questions redondantes ni refaire la conception. Durant les phases 2–3, parcourez le frontmatter de chaque carte dans references/shots/ pour sélectionner les plans selon la courbe d'énergie ; durant les phases 5–7, vérifiez en continu par rapport à references/aesthetic-rules.md ; en phase 6, lisez references/sound-design.md ; pour les vidéos synchronisées, suivez references/music-beat-sync.md tout au long.

Quand lire quel fichier

Moment	Lire
Démarrage du projet et mode non défini	Inspection minimale en lecture seule, puis proposez les trois modes de bande-annonce complète avec recommandation
Création libre et autonome	pipeline.md (l'agent termine les phases 0 à 7 de manière autonome, sans attendre de validation par phase)
Création collaborative	guided-free-creation.md (validez les phases 0–3), puis reprenez à la phase 4 de pipeline.md
L'utilisateur a déjà choisi un BGM	music-beat-sync.md (analyse avant storyboard)
Parcours modèle	template/TEMPLATE.md intégralement
Conception du storyboard	sequences/ modèles de séquence (remplissez d'abord le squelette de la vidéo) ; shots/ tout le frontmatter ; pour les cartes sélectionnées, lisez l'intégralité
Mise en œuvre plan par plan	Carte de plan complète + code source de démonstration précis selon la « Référence de mise en œuvre » intégralement + composants correspondants dans assets/lib/
Conception sonore	sound-design.md + assets/audio/
Révision	final-review.md + aesthetic-rules.md (checklist complet, exécuté par un sous-agent indépendant)

Utilisation des assets

• Composants assets/lib/ : copiez-les dans le nouveau projet et modifiez-les librement (ne pas importer cette bibliothèque). Liste : PageCam (caméra 2.5D pour page – fondation de tous les plans de « page réelle »), DigitRoll, FlashCut, Caption, FlatPanel, VerticalTicker (mur de défilement 3D infini), helpers (rand / shake / camera / motion). FlatPanel et helpers/camera nécessitent les dépendances three + @react-three/fiber + @remotion/three ; le reste nécessite uniquement remotion.
• assets/scripts/capture-template.mjs : copiez puis modifiez la CONFIG en haut (BASE / routes / sélecteurs).
• assets/audio/ : utilisez les effets sonores directement (licence commerciale gratuite, voir audio/ATTRIBUTION.md) : audio/bgm/ : BGM rythmés 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). Pour trouver un son, commencez par le répertoire de la catégorie ; la liste complète se trouve dans sound-design.md. Le terme « sparkle » se trouve dans le répertoire light/ (pas de sparkle/) ; S1 interdit la couleur sonore mais pas l'action – si une image montre un clic ou un interrupteur, il faut l'accompagner d'un bruitage, mais la moitié des sons dans ui/ sont des retours synthétiques (tone / bleep / notification) qu'il faut écouter un par un, sans valider tout le répertoire (liste dans sound-design 3.3) ; les échantillons longs et les素材 légers ont chacun une liste nécessitant un traitement spécial (sound-design 4.1).
• demos/ : code source d'implémentation de chaque carte : la plupart sont des démos en niveaux de gris autonomes (certaines importent des composants de scène UI factices de demos/_fixtures/Fixtures.tsx, quelques-unes importent des textures de page réelle de demos/_textures/) ; copiez dans un projet Remotion pour exécution ; certaines démos utilisent @remotion/motion-blur (CameraMotionBlur), nécessitent npm i @remotion/motion-blur, liste dans demos/README.md.
• template/ : projet Remotion complet et rendu : npm install && npx remotion render src/index.ts AiflPromo out/promo.mp4.
• gallery/ : galerie statique : privilégiez la version en ligne pour l'utilisateur : https://vincentwei1021.github.io/video-shotcraft/library.html ; pour une exécution locale, lancez d'abord gallery/fetch-media.sh pour récupérer les échantillons (mp4 pas dans git), puis cd gallery && python3 -m http.server 4178. 152 cartes avec 209 échantillons animés : parcourez, recherchez, copiez les noms de cartes en multiple sélection – idéal pour que l'utilisateur choisisse ses plans en voyant les échantillons.