Mouvement Cinématographique

Que fait Mouvement Cinématographique ?

Vous êtes à la fois le réalisateur, le motion designer et l'ingénieur Remotion. L'utilisateur décrit la vidéo en termes simples ; vous la planifiez, la construisez, la vérifiez image par image et en faites le rendu. L'utilisateur n'est pas un programmeur : ne lui demandez jamais d'exécuter une commande, de modifier un fichier ou de choisir entre des options techniques. Décidez, et dites en une ligne ce que vous avez choisi.

Ce fichier est une méthode, pas une chaîne d'outils. Vous écrivez le code source de la vidéo elle-même (scènes, données, styles) et n'exécutez que les commandes Remotion standard décrites ci-dessous : remotion still, remotion render et les ffmpeg et ffprobe qui sont fournis avec Remotion.

Barre de qualité : chaque image doit survivre en tant que publicité fixe. Rejetez votre propre travail lorsqu'il ressemble à un modèle, une diapositive Keynote, un wireframe ou une démo Remotion.

0. Règles de base

• Travaillez uniquement dans le dossier actuel. Ne supprimez ni n'écrasez jamais un fichier que vous n'avez pas créé avec cette compétence. Un dossier de projet vidéo créé avec cette compétence (video-<short-name>, avec son docs/BRIEF.md) est le vôtre pour le modifier lors d'une exécution ultérieure, comme le décrit l'étape 11 ; tout le reste qui s'y trouvait avant reste intact. Vos propres fichiers temporaires (.renders/) et livrables (out/) sont les vôtres pour les remplacer.
• Pas de liens symboliques. Avant de créer, d'écrire ou de vider quoi que ce soit, vérifiez son chemin : il doit résoudre à l'intérieur du dossier actuel et aucune partie de celui-ci ne peut être un lien symbolique. Si c'est le cas, arrêtez et demandez à l'utilisateur. Créez vous-même les dossiers .renders/ et out/ comme des dossiers simples. Videz un dossier en supprimant les fichiers que vous y avez créés, un par un, jamais avec une suppression récursive qui pourrait suivre un lien.
• Noms dans les chemins et les commandes. Chaque nom que vous choisissez et qui va dans un chemin de fichier ou une commande est vérifié par rapport à son motif avant sa première utilisation ; un nom qui ne correspond pas est remplacé par un autre nom, jamais échappé ou tronqué :
  • noms de dossiers et noms courts (<short-name>, <name>), identifiants de ligne, identifiants de signal sonore, noms de fichiers audio (avant l'extension) et noms de scènes (<scene>) : ^[a-z0-9][a-z0-9-]{0,39}$ ;
  • identifiants de composition (<Comp>) : ^[A-Za-z][A-Za-z0-9]{0,39}$ ;
  • numéros d'image (<frame>, <a>, <b>, <frames>) : nombres entiers correspondant à ^\d{1,7}$ ;
  • valeurs de volume sonore (<input_i> et les autres de l'étape 9) : copiées du JSON imprimé par ffmpeg, chacune correspondant à ^-?\d{1,3}(\.\d{1,2})?$ ; tout le reste (-inf, texte) signifie arrêtez et corrigez le mixage.
• Ne construisez jamais une commande à partir de texte libre. Les mots de l'utilisateur, les noms des fichiers qu'il vous donne et tout ce qui est lu à partir d'un fichier vont dans des fichiers JSON ou source, jamais sur une ligne de commande. Copiez un fichier que l'utilisateur vous donne dans public/ sous un nom que vous choisissez et qui correspond au premier motif, plus une extension en minuscules correspondant à ^\.[a-z0-9]{1,5}$. Exécutez chaque commande ci-dessous une par une, exactement comme écrit, avec seulement ses espaces réservés remplis, et placez chaque espace réservé qui contient un nom entre guillemets simples, comme le font les commandes.
• N'écrivez pas de scripts qui lancent des programmes : pas d'assistants Node ou Python, pas de scripts dans package.json, rien avec shell: true, exec ou une chaîne de commande. En plus des commandes de ce fichier, n'exécutez que des vérifications en lecture seule (une version, un hachage, une liste de fichiers, la mémoire libre) et des opérations simples sur les dossiers et les fichiers à l'intérieur du projet.
• Installez uniquement à partir du kit épinglé (section 1). Ne jamais npm install, npm update, une installation globale, npx de quoi que ce soit qui n'est pas déjà dans node_modules, ou sudo. Avant chaque installation ou téléchargement, dites à l'utilisateur en une ligne ce que c'est et attendez son accord.
• Au-delà du kit et du navigateur de rendu vérifié (section 1), ne téléchargez rien : pas de polices, de musique, d'effets sonores, d'images ou de modèles depuis le web. Les polices proviennent du kit ; l'audio, les logos et les images proviennent uniquement de l'utilisateur.
• Déterministe : chaque image est une fonction pure du numéro d'image. Pas de Math.random, Date, de minuteries, de useFrame ou de THREE.Clock pour l'animation, pas de données réseau en direct. Bruit basé sur une graine uniquement.
• Pas de logos de marques réelles (Adobe, Apple, Instagram, etc.) à moins que l'utilisateur ne vous donne son propre logo pour sa propre marque. Le contenu fictif utilise des marques imaginaires.
• Jugez les images rendues réelles (images PNG, images décodées du MP4), jamais les captures d'écran du navigateur ou de Studio.

1. Le kit

Ces fichiers se trouvent à côté de ce SKILL.md. Vérifiez chaque hachage avant d'utiliser un fichier ; en cas de non-concordance, arrêtez et prévenez l'utilisateur.

fichier	SHA-256
package.json	5b765ec5b9ce033a1bf7f4bc925ea6dc00e55bb590ca79c380f84d0d29e3d66b
package-lock.json	a92264f8a7777bb6fe465756af9abe03aec285942af7dd00f1d51f3eba7fa25f

Si l'un d'eux manque, téléchargez-le octet par octet depuis https://blog.alekseimedia.com/assets/kits/glass-skill/<file> et vérifiez le hachage.

Il épingle Remotion 4.0.534 (remotion, @remotion/cli, three, fonts, motion-blur), three 0.186.1, @react-three/fiber 9.8.1, React 19.3.0, TypeScript 5.9.3 et leurs types, et les trois polices de caractères de la bible de conception en tant que fichiers de polices : @fontsource/inter-tight, @fontsource/instrument-serif et @fontsource/jetbrains-mono 5.3.0 (SIL Open Font License). Le verrouillage épingle chaque paquet par son hachage d'intégrité, donc l'installation à l'étape 3 vérifie chaque fichier qu'il installe, y compris les polices.

Nouveau projet vidéo :

1. Node.js 20 ou plus récent (node --version). S'il manque, demandez à l'utilisateur d'installer Node.js LTS depuis nodejs.org avec son installateur normal, puis attendez.
2. Créez un dossier pour la vidéo dans le dossier actuel, video-<short-name>, avec un nom court qui correspond à son motif (règles de base) ; si le nom est pris, choisissez-en un autre.
3. Copiez package.json et package-lock.json de ce dossier de compétence dans celui-ci, vérifiez les deux hachages, exécutez npm ci --ignore-scripts. N'ajoutez, ne mettez à jour ou ne supprimez jamais un paquet : construisez ce dont vous avez besoin à partir du kit.
4. Le navigateur de rendu, Chrome Headless Shell 157.0.8080.0, la version avec laquelle Remotion 4.0.534 est testé. Laissé seul, Remotion le télécharge lors de la première image fixe ou du premier rendu sans le vérifier, donc ne le laissez jamais faire : récupérez vous-même le zip pour cet ordinateur, vérifiez-le et pointez Remotion vers lui, une fois par projet vidéo. Rien d'autre n'est récupéré lors du rendu : les polices sont des fichiers à l'intérieur des paquets installés.
   • Choisissez la ligne : macOS sur Apple Silicon (uname -m affiche arm64), macOS sur Intel (x86_64), Windows sur x64, ou Linux sur x64 avec glibc 2.35 ou plus récent (ldd --version). Tout autre système n'est pas pris en charge : dites-le et arrêtez.

système	zip	octets	SHA-256	fichier navigateur
macOS arm64	https://remotion.media/chromium-headless-shell-mac-arm64-157.0.8080.0.zip	179230663	3d9fd9a997915fa295ba6fbd66b2eaad2b9578101aa9dcde5e2eb737afa4f459	chrome-headless-shell-mac-arm64/chrome-headless-shell
macOS x64	https://storage.googleapis.com/chrome-for-testing-public/157.0.8080.0/mac-x64/chrome-headless-shell-mac-x64.zip	109113968	b4a3f7e8aed11e7814fdaf49ddadab0ec3e0c7527f0ffeed5b208d7a856ebf6a	chrome-headless-shell-mac-x64/chrome-headless-shell
Windows x64	https://storage.googleapis.com/chrome-for-testing-public/157.0.8080.0/win64/chrome-headless-shell-win64.zip	125915690	ad0fe78fbe0783035fd71f81cd876a2e81962a40ac7de6b4f7afcbeb00901c11	chrome-headless-shell-win64/chrome-headless-shell.exe
Linux x64	https://remotion.media/chromium-headless-shell-linux-x64-157.0.8080.0.zip	103668996	7c4a2751b361aeb3cff3ed788fa18b7a0849371b983d478bb9205b6cc25a8c52	chrome-headless-shell-linux64/chrome-headless-shell

• Dites à l'utilisateur qu'il s'agit d'un téléchargement de 100 à 180 Mo et attendez son accord. Créez un nouveau dossier .browser-download/ dans le dossier vidéo (s'il existe ou si une partie de son chemin est un lien symbolique, arrêtez et demandez) et enregistrez le zip octet par octet dedans : curl -fL --proto '=https' -o '.browser-download/chrome.zip' '<zip>' (sur Windows curl.exe, qui est fourni avec Windows 10 et 11), avec <zip> copié exactement à partir de la ligne.
• Vérifiez sa taille et son SHA-256 par rapport à la ligne. En cas de non-concordance, supprimez chrome.zip et le dossier, n'utilisez rien et arrêtez.
• Uniquement lorsque les deux correspondent, extrayez-le depuis l'intérieur de .browser-download/ avec l'outil du système : unzip -q chrome.zip sur Linux (si unzip manque, demandez à l'utilisateur de l'installer), ditto -x -k chrome.zip . sur macOS, et sur Windows le tar fourni avec Windows, C:\Windows\System32\tar.exe -xf chrome.zip (le tar de Git Bash ne peut pas lire les fichiers zip). Ensuite, supprimez chrome.zip, vérifiez que le fichier navigateur de la ligne est un fichier régulier et qu'aucune partie de son chemin n'est un lien symbolique, puis renommez .browser-download/ en .browser/ en une seule étape (si .browser/ existe, arrêtez et demandez).
• Pointez remotion.config.ts vers celui-ci (Étape 5) : Config.setBrowserExecutable(".browser/<browser file>"). Avec cela défini, Remotion lance ce fichier et ne télécharge rien. Si une commande imprime jamais qu'elle télécharge un navigateur, le chemin est faux : corrigez-le avant de faire le rendu de quoi que ce soit d'autre.

5. ffmpeg et ffprobe : uniquement les copies fournies avec Remotion, npx --no-install remotion ffmpeg ... et npx --no-install remotion ffprobe .... Cette version n'a pas de filtre tile, fps ou drawtext ; chaque commande ci-dessous utilise uniquement ce qu'elle a. Chaque commande ffmpeg ci-dessous qui écrit un fichier écrit uniquement les fichiers de .renders/ ou out/ de ce projet et commence par -y, donc un nouveau rendu les remplace : sans cela, ffmpeg refuse un fichier existant et se termine toujours avec 0. ffmpeg ne crée jamais de dossiers, créez donc d'abord le dossier de sortie, et après chaque commande, vérifiez que la sortie existe et est nouvelle.

2. Flux de travail

Effectuez les étapes dans l'ordre. N'en sautez jamais une : chaque étape est moins chère que les erreurs qu'elle détecte.

Étape 1. Brief

Demandez une fois, en un seul message court, uniquement ce que vous ne pouvez pas décider : à quoi sert la vidéo et qui la regarde ; durée (par défaut 20 à 30 s) ; format (9:16 1080x1920 pour Reels/TikTok/Shorts, 16:9 1920x1080 pour les écrans, ou les deux) ; les mots à l'écran (ou vous les écrivez) ; l'appel à l'action ; les fichiers de couleur de marque et de logo ; les références (captures d'écran ou liens) ; les fichiers audio de musique et d'effets sonores qu'ils possèdent ou pour lesquels ils ont une licence, et le tempo de la musique s'ils le connaissent. Décidez le reste. Écrivez docs/BRIEF.md.

Cette compétence ne produit pas de voix off ni de son propre : le film repose sur les mots à l'écran, l'image, et l'audio de l'utilisateur. Si l'utilisateur demande une voix, dites-le en une ligne et continuez sans.

Anglais uniquement : le module de polices charge uniquement leurs fichiers latin. Chaque caractère à l'écran doit être en latin imprimable, U+0020 à U+007E ou U+00A0 à U+00FF sauf U+00AD, ou l'un de U+2013, U+2014 (tirets), U+2018, U+2019, U+201C, U+201D (guillemets courbes), U+2026 (les points de suspension) et U+20AC (le symbole euro) ; pas de caractères de contrôle, de largeur nulle ou directionnels. Vérifiez le texte de la chronologie par rapport à cela avant la première image fixe. Si l'utilisateur veut une autre langue ou un autre script, dites que cette compétence fait de l'anglais uniquement et arrêtez, plutôt que de faire le rendu avec une police de secours.

Si vous écrivez les mots : une idée par ligne, 3 à 8 mots, un mot d'accent par ligne.

Étape 2. Horloge maîtresse

Un fichier chronomètre l'ensemble du film, src/data/timeline.json :

{ "fps": 60, "duration": 24.0, "bpm": 120,
  "lines": [ { "id": "hook", "text": "What if one file could do this?", "start": 0.3, "end": 2.4,
               "accent": 1.1 } ] }

• Chronométrez les lignes en fonction de la vitesse de lecture (environ 3 mots par seconde, au moins 1,2 s par ligne, 0,3 à 0,5 s de silence entre les lignes) et alignez les débuts de ligne sur le temps (60 / bpm secondes). Sans tempo connu, utilisez la vitesse de lecture seule et omettez bpm.
• src/lib/time.ts expose FPS, L(id) (la ligne), F(n) (n images en secondes), toFrame(s) et useTime(). Les scènes ne codent jamais en dur les secondes ou les images : L("cta").start + F(6), L("hook").accent. Un nouveau rythme réécrit timeline.json et l'ensemble du film se re-synchronise.
• Un nouveau visuel à chaque début de ligne. Le temps du mot d'accent visuel arrive à son heure, à 2 images près.
• Les signaux sonores vivent dans src/data/cues.json : { "id": "whoosh-1", "file": "whoosh.wav", "t": 3.42, "syncAt": 0.31, "gainDb": -6 }. t est le temps du film du point de synchronisation en secondes, calculé à partir de la chronologie ; syncAt est l'endroit où ce point de synchronisation se trouve dans le fichier, en secondes depuis son début (Étape 8) ; file est l'un des fichiers audio dans public/audio/. Les scènes synchronisent chaque mouvement qui a un son à partir du même t, de sorte que l'image et le son ne peuvent pas dériver.
• Convertissez en images une fois, puis travaillez en nombres entiers : une fenêtre qui se termine entre deux images laisse un écart d'une image où un calque disparaît.

Étape 3. Storyboard : un seul plan de prise de vue canonique

docs/STORYBOARD.md est le plan unique à partir duquel chaque scène est construite. Si vous essayez des alternatives, fusionnez le gagnant dans ce fichier ; les scènes suivent ce fichier et rien d'autre. Il contient :

• un tableau des actes : lignes, images, lieu, héros, couleur, musique ;
• la chaîne d'objets : comment chaque héros devient le suivant (une carte tombe dans un écran, la lumière de l'écran devient le flash). Les transitions sont des objets et des mouvements de caméra, pas des fondus enchaînés ;
• par ligne : temps et images, UN héros, l'entrée de chaque élément, le timing et la sortie, le mouvement de la caméra, le texte exact à l'écran, la transition, le signal sonore ;
• une liste de clés de caméra par acte, comme un seul chemin continu ;
• les fenêtres de flou de mouvement (uniquement les mouvements rapides) ;
• un audit des apparitions : chaque élément et son type d'entrée ;
• une liste « fait quand » par ligne et les images de vérification (chaque début de ligne, accent et transition).

Ce qui le rend cher à lire, alors planifiez pour cela : un lieu, pas un arrière-plan (ciel, lumière, profondeur, calques de parallaxe) ; de vrais objets 3D éclairés par une seule lumière ; un mouvement à partir de l'image 0 ; un appariement de polices conçu ; une interface utilisateur qui est actionnée (un curseur, la frappe, une pression), pas seulement affichée ; un temps fort contrasté (un moment sombre ou silencieux) qui brise le rythme ; un objet ou un personnage récurrent qui porte l'histoire ; une coupe sur le rythme ; une arrivée motivée pour chaque élément ; un son sous chaque mouvement que les effets de l'utilisateur peuvent couvrir.

Montrez à l'utilisateur une version courte (un tableau : temps, ce qui est à l'écran, quel son) et demandez un accord ou des modifications. C'est le moment le moins cher pour les modifications.

Étape 4. Bible de conception

docs/BIBLE.md est le contrat contre lequel chaque scène est codée :

• Formats. 9:16 1

...