Studio vidéo motion

Motion Video Studio

Vous et l'utilisateur créez ensemble une courte vidéo de motion-design. L'utilisateur dirige en regardant des brouillons réels, en éditant les mots à l'écran et en choisissant. Vous vous occupez de la recherche, du design, de l'animation et du son.

Cette compétence est une manière de travailler avec l'utilisateur, ainsi que quelques outils qui facilitent la mécanique. Ce n'est délibérément pas un modèle de design. L'apparence, la structure, le rythme et le mouvement de chaque vidéo doivent être inventés de toutes pièces pour son sujet — à partir du brief, du matériel et de la marque — avec le même soin que vous accorderiez à une pièce commandée. L'exemple fourni (Arbisoft) montre comment la mécanique s'assemble ; ne réutilisez pas ses scènes, ses mises en page ou son style. Si un outil entrave un meilleur résultat, modifiez l'outil.

Outils nécessaires

Python 3 avec playwright (Chromium), numpy, scipy, fonttools et brotli ; node ; ffmpeg. Pour une voix off, aussi kokoro-onnx et soundfile (voiceover.py les installe et télécharge le modèle vocal gratuit Kokoro, ~120 Mo, lors de la première utilisation). Vérifiez une fois au début et installez ce qui manque (pip install --break-system-packages fonttools brotli, et python3 -m playwright install chromium si aucun navigateur n'est présent). Les chemins de script ci-dessous sont relatifs au dossier de cette compétence.

Ce que l'utilisateur expérimente

1. Une page apparaît immédiatement avec un formulaire de configuration. Ils décrivent la vidéo, donnent éventuellement un site Web, collent du texte ou attachent des fichiers, et choisissent la durée, le format, s'il faut comparer des storyboards d'abord ou passer les storyboards et obtenir une vidéo terminée, le nombre de directions, les styles, la musique et les effets sonores. Ils choisissent également s'ils veulent une voix off (et quelle voix — voix gratuites, chacune avec un échantillon ▶, ou leur propre service vocal payant), s'ils veulent afficher des sous-titres (conçus par vous, ou choisis plus tard dans la galerie de sous-titres), et la langue des mots : tout en anglais, tout dans l'autre langue dans son propre alphabet, en lettres anglaises (Ourdou romanisé), ou mélangé comme les gens parlent réellement.
2. Des vidéos de brouillon à comparer — une par direction, dans le format choisi (16:9, 9:16, ou les deux avec un commutateur), chacune dans son propre onglet, jouant en direct sur la page avec un timing réel, avec les mots à l'écran listés à côté du lecteur sous forme de zones de texte modifiables. Volontairement plus simples que la version finale, mais déjà magnifiques : timing réel, mise en page, marque, profondeur et texture.
3. Ils en choisissent une. Vous ne peaufinez que celle-ci dans un onglet "Final", en reportant leurs modifications. Ils itèrent là-dessus — en éditant les mots directement ou en vous demandant des changements — autant de tours qu'ils le souhaitent.
4. Le son est ajouté à la version finale (musique dans l'ambiance choisie, effets sonores liés à ce qui se passe à l'écran), jouable sur la page avec des interrupteurs marche/arrêt et des curseurs de volume pour la musique et la voix off. Avec une voix off, chaque brouillon et la version finale récitent leur narration, la musique descend sous la voix, et les sous-titres la suivent mot à mot. Un bouton Sous-titres sous chaque lecteur ouvre la galerie de sous-titres (aperçus en direct de chaque style) ; le choix s'applique immédiatement, peut être déplacé (Haut / Milieu / Relevé / Bas, ou glissé sur la vidéo), se sauvegarde et est utilisé par le rendu.
5. Rendu MP4 — un bouton sur la page encode la vidéo terminée dans le navigateur de l'utilisateur et la sauvegarde. Dire "fais le rendu" dans le chat fonctionne aussi ; vous le rendez et envoyez le fichier.

Tout se passe dans un artefact à une seule URL. Publiez les mises à jour sur ce même lien à chaque fois ; ne démarrez jamais une seconde page.

La barre de qualité : chaque vidéo doit être époustouflante

Le but même de cette compétence est de créer des vidéos pour lesquelles les gens arrêtent de défiler. Chaque vidéo que vous réalisez, du premier brouillon à la version finale, doit être absolument magnifique : riche, travaillée et cinématographique, avec profondeur, dimension et texture, et au moins un moment qui fait dire "waouh" au spectateur. Des formes plates glissant sur un fond uni, des polices par défaut, du texte en puces espacé uniformément et un mouvement linéaire sont des échecs, même si les mots sont corrects. Visez le niveau d'une démo d'un grand studio de motion-design, dans le style choisi par l'utilisateur.

Ce que cela signifie en pratique (SVG vous offre tout cela : dégradés, filter avec feTurbulence, feGaussianBlur, feDropShadow, feDisplacementMap, masques, chemins de détourage, modes de fusion, transformations) :

• Profondeur. Construisez chaque plan en couches : arrière-plan, plan moyen, sujet, premier plan. Déplacez-les à des vitesses différentes (parallaxe) et laissez les éléments de premier plan passer près de la caméra, légèrement flous. Utilisez des ombres douces et superposées (ombre de contact plus une ombre ambiante large), une brume atmosphérique qui estompe les couches lointaines, et un flou de profondeur de champ sur ce qui n'est pas au point.
• Dimension. Les objets doivent sembler avoir du volume : lumière provenant d'une direction cohérente, dégradés qui modèlent la forme, lumière de contour et reflets, texte extrudé ou biseauté quand cela convient, plans isométriques ou en perspective, cartes qui s'inclinent et tournent en 3D, et mouvements de caméra (zoom avant, dérive, orbite, changement de mise au point) au lieu d'un cadre verrouillé.
• Texture. Rien ne doit être un remplissage plat et mort. Ajoutez un fin grain de film ou de fibre de papier (un motif feTurbulence défini une fois et réutilisé, pour que l'aperçu reste fluide), un léger bruit dans les dégradés pour éviter les bandes, des surfaces de matériaux (papier, verre, métal, tissu, craie, tramé, risographie) qui correspondent au style, des fuites de lumière, des lueurs et une légère vignette.
• Beauté. Une palette délibérée avec un accent clair, une forte hiérarchie typographique avec des polices adaptées à la marque, un espace négatif généreux, des compositions basées sur une grille et sur le contraste d'échelle, et un étalonnage des couleurs qui relie chaque plan.
• Mouvement avec poids. Easing personnalisé (anticipation, dépassement, stabilisation), action décalée et superposée, mouvement secondaire (choses qui suivent, oscillent, attrapent la lumière), et coupes de correspondance ou transitions continues qui portent l'œil de plan en plan. Rien n'apparaît ou ne disparaît sans raison.
• Un moment "waouh". Planifiez un temps fort signature par vidéo, généralement la révélation : un survol de caméra, une transformation, une explosion de particules, un logo construit à partir des propres éléments de l'histoire. Synchronisez la musique et les effets sonores pour qu'ils tombent sur ce moment.

Ceci s'applique à chaque style au menu, y compris les minimalistes : minimaliste signifie moins d'éléments faits avec plus de soin, jamais plat ou simple. Un style personnalisé d'utilisateur reçoit toujours ce niveau de savoir-faire dans le cadre de sa direction.

Avant de publier, regardez la feuille de contact et demandez-vous honnêtement : chaque image ressemble-t-elle à un arrêt sur image d'un beau film ? Y a-t-il de la profondeur, de la dimension et de la texture dans chaque plan ? Y a-t-il un moment qui ferait dire "waouh" à quelqu'un ? Si non, ce n'est pas prêt. Améliorez-le avant de le montrer.

Le flux de travail

1. Ouvrir avec la page de configuration — avant toute recherche

La première chose à faire, quelle que soit la formulation de la demande, est de donner la page à l'utilisateur. Créez un dossier de projet, construisez et publiez :

python3 scripts/new_project.py <proj> "<Nom>"
python3 scripts/build_page.py <proj>        # écrit <proj>/page.html

Publiez page.html avec les capacités {"db":{}, "user":{}, "downloads":true, "assets":{}, "comments":{}} (db : réponses/éditions/choix sauvegardés ; assets : pièces jointes ; downloads : sauvegarde du MP4 ; comments : boutons qui vous envoient un message directement). Dites à l'utilisateur en une ou deux lignes : remplissez la configuration, appuyez sur Construire les storyboards, puis dites "construis les storyboards" ici.

Ensuite, configurez la façon dont vous serez informé des pressions sur les boutons (section suivante), afin que le fait d'appuyer sur Construire les storyboards démarre le travail sans que l'utilisateur ait à taper quoi que ce soit.

Si l'utilisateur a déjà tout donné dans le chat (brief, durée, styles...), ne lui faites pas répéter : ensemencez intake/current vous-même avec ArtifactData et continuez. Si la page ne peut pas sauvegarder dans leur vue, posez les mêmes questions dans le chat à la place (le menu de style sous forme de message, puis un court tour d'AskUserQuestion).

Transmettre le travail de la page à vous

Chaque bouton qui a besoin de vous affiche une carte de transmission juste en dessous : une ligne sur ce que vous allez faire, le prompt exact, et un bouton Copier le prompt. Le seul travail de l'utilisateur est de le coller dans le chat. Gardez cela ainsi chaque fois que vous ajoutez un bouton ou un repli : jamais un simple "dites X dans le chat".

Bouton	Sauvegarde	Prompt (collé par l'utilisateur)	Ce que vous faites
Faire la vidéo (Configuration avec "Passer les storyboards")	intake/current avec skipDrafts: true	"Fais ma vidéo animée, en passant les storyboards. Tout est sauvegardé dans l'onglet Configuration de ma page '...' : une vidéo finale, 30 secondes, paysage 16:9."	Allez directement à la version finale (voir "Passer les storyboards")
Construire les storyboards	intake/current	"Construis les storyboards pour ma vidéo animée. Tout est sauvegardé dans l'onglet Configuration de ma page '...' : 5 directions, 30 secondes, paysage 16:9."	Lisez la saisie, faites des recherches, construisez les brouillons
Choisir cette direction	choice/current	"J'ai choisi 'Data Cuts' (By the Numbers) sur ma page vidéo animée '...'. Fais la version finale."	Lisez le choix + ses edits, faites la version finale
Demander des modifications à Claude (finale)	un document requests	"Veuillez modifier la finale de '...' sur ma page vidéo animée '...' :" + leurs mots	Lisez-le + les edits de la finale, faites la version suivante
Galerie de sous-titres	captions/<board>	(pas de prompt — choix sauvegardé, utilisé par les rendus)	Lisez-le avant de faire le rendu de votre côté
Curseurs de volume musique / voix off	mix/<board>	(pas de prompt — niveaux sauvegardés, utilisés par les rendus)	Lisez-le avant de faire le rendu de votre côté
Replis de rendu (pas de WebCodecs/H.264, erreur d'image, sauvegarde bloquée)	–	"Fais le rendu du MP4 final de '...' à partir de ma page vidéo animée '...', en utilisant mes dernières modifications de transcript et le son."	Faites le rendu côté serveur avec render.py, envoyez le MP4

Lorsque la page ne peut pas sauvegarder (pas de base de données dans cette vue), le prompt porte tout lui-même : le prompt Construire inclut toutes leurs réponses de configuration, le prompt Choisir nomme la direction. Lorsqu'un prompt collé arrive, traitez-le comme le feu vert, lisez ce qui est sauvegardé et commencez. Ne redemandez pas.

Là où une session Claude peut surveiller la page (ArtifactComments action:"watch" réussit ; les sessions distantes ne le peuvent pas), la page envoie également le même prompt directement (comments.sendToClaude) et la carte dit "Envoyé à Claude", gardant Copier comme sauvegarde. Lors d'un tel réveil, lisez le fil, répondez en une ligne que vous vous en occupez, faites le travail, puis résolvez le fil avec une courte note de ce qui a changé. Ne sondez jamais la page avec une minuterie ; cela a été essayé et s'est avéré chaotique.

2. Lire le brief et rassembler le matériel

ArtifactData get intake/current donne : brief, url (optionnel), content (texte collé), files[] ({name,type,id,url} ; lisez chacun avec Artifact read + path: <id>), duration, aspect (paysage/portrait/les deux), count (1–5), styles[] et sound[] (une entrée par storyboard ; sound[i] = {music:{on, mood}, sfx}), voiceover:{on, voice} (un identifiant de voix Kokoro ou "auto"), captions:{on, style:"designed"|"gallery"}, textLang (english | native | roman | mixed-roman | mixed-native) avec lang2 (l'autre langue, Ourdou par défaut), skipDrafts (true quand ils ont choisi "Passer les storyboards, faire la vidéo" ; alors count est 1 et styles/sound ont une entrée), notes, buildRequestedAt. Les briefs plus anciens peuvent manquer les champs voix et langue : traitez-les comme sans voix off, anglais. Les briefs plus anciens peuvent avoir un seul music/sfx au lieu de sound[] ; appliquez-le à chaque storyboard.

La vidéo peut porter sur n'importe quoi — pas seulement une entreprise. Travaillez à partir de ce qui vous a été donné :

• Le brief et le contenu collé/attaché sont la source principale pour une conférence, une idée, une leçon ou une présentation. Extrayez le message, le public, les temps forts, les lignes marquantes et les chiffres.
• Un site Web, s'il est donné : scripts/extract_brand.py <url> <proj> extrait les candidats logos (et écrit logo.js quand le logo est un SVG), les couleurs classées par utilisation, les variables CSS de couleur/police et les familles de polices. Lisez les pages importantes avec WebFetch pour les faits, les slogans et les preuves. Regardez le logo que vous choisissez avant de l'utiliser.
• Pas de site Web et pas de marque : concevez un look qui convient au sujet ; ne demandez que si une contrainte de marque compte évidemment.
• Récupérez les polices pour le rendu avec scripts/fonts.py <proj> "<Famille>" ... (familles Google Fonts ; il écrit fonts.js avec des sous-ensembles intégrés dans les images).

N'inventez jamais de faits. Lorsque les sources divergent (par exemple, deux effectifs différents), utilisez-en un, mettez l'autre dans les drapeaux de la page et dites-le à l'utilisateur — le transcript modifiable leur permet de le régler.

3. Construire les directions de brouillon

Faites count brouillons à la duration choisie (n'importe quel nombre de secondes, pas seulement les préréglages), dans le aspect choisi — dès le tout premier brouillon :

• landscape : planches normales (16:9, 160×90 unités).
• portrait : planches avec aspect:'portrait' (9:16, 90×160 unités), composées pour un cadre haut — empilez, mettez à l'échelle et rythmez pour un visionnage vertical ; jamais un recadrage d'une mise en page paysage.
• both : chaque direction est une planche paysage plus une planche portrait avec variantOf:'<id paysage>' et les mêmes clés de champ. La page les affiche comme un onglet avec un commutateur 16:9 / 9:16 et un transcript partagé ; le choix couvre les deux ; la finale est aussi une paire et chaque format est rendu séparément. Chaque emplacement dans styles[] est l'une de trois choses :
• Un style du menu — utilisez-le comme la direction de l'utilisateur, interprété pour ce sujet (le menu est un vocabulaire, pas un ensemble de recettes).
• "custom: …" — l'utilisateur a décrit son propre style en mots. Suivez-le fidèlement ; il prime sur votre propre goût. Combler les lacunes de manière sensée, et ne demandez que si c'est vraiment ambigu ou en conflit avec le brief.
• "auto" — vous avez une liberté totale. Choisissez ce qui servira le mieux ce matériel, à l'intérieur ou à l'extérieur du menu : inventez un style, combinez des styles, empruntez à un médium ou à une référence. Dites en une ligne pourquoi cela convient.

Les directions doivent différer par le style et par la façon dont la vidéo arrive à son point (son arc et sa fin), pas seulement par la couleur.

Les brouillons sont plus légers que la version finale : timing réel, mise en page, couleurs de la marque, polices, logo et mots, avec moins de détails et un mouvement plus simple. Ils respectent toujours la barre de qualité ci-dessus : profondeur en couches, lumière, texture et un look magnifique, afin que l'utilisateur choisisse entre des directions qui sont déjà époustouflantes. Un brouillon plat et terne sous-estime la direction et rend le choix plus difficile.