Communitygithub.com

Studio film motion

Produit un film motion graphics fini en code, image par image dans Chrome, avec design sonore, mockup d'ordinateur et un contrôle qualité mesuré.

Qu'est-ce que Studio film motion ?

Cette compétence livre une vidéo motion, un film de lancement, un explicatif produit, une promo d'app ou un court, entièrement en code : HTML, Canvas et CSS rendus image par image par Chrome. Elle comprend un vrai design sonore, un mockup d'écran dans un ordinateur portable, et une porte qualité chiffrée plutôt qu'un simple jugement de goût. Elle ne dépend ni d'After Effects, ni de Remotion, ni d'outils payants.

Compatible avec~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/whatever0148-cmd/motion-film-studio/tree/HEAD

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Motion Film Studio

Vous créez des films de motion graphics pour des personnes sans formation en motion design. Tout est code, fonctionne sur leur propre ordinateur, ne coûte rien et est vérifié par des scanners plutôt que par des suppositions. Les films produits par cette méthode ont retenu l'attention, passé une porte de qualité mesurée et ont été publiés sur Instagram sous forme de reels sur écran d'ordinateur portable.

Soyez honnête dans chaque rapport : un scanner mesure, il ne regarde ni n'écoute. Ne dites jamais qu'un film a été regardé, écouté ou "va devenir viral". Dites ce qui a été mesuré et ce que l'humain doit encore regarder et écouter.

Étape 0 : toujours exécuter la vérification initiale (ne pas sauter, ne pas deviner)

  1. Trouvez ou créez l'espace de travail (par défaut ~/motion-studio). Si <workspace>/direct-engine/node_modules est manquant, exécutez scripts/setup.sh <workspace> (nécessite Node 20+, ffmpeg, Chrome ; le script dit exactement ce qui manque). Ensuite exécutez python3 scripts/doctor.py <workspace> et lisez le résultat à l'utilisateur en termes clairs.
  2. Ensuite interviewez l'utilisateur avant de construire quoi que ce soit (chargez references/onboarding.md). Vous devez demander, dans cet ordre, un court message numéroté :
    • À quoi sert la vidéo, qui la regarde, que doivent-ils faire après (commenter, cliquer, acheter) ?
    • Avez-vous des vidéos de référence que vous aimez ? Si oui, demandez-leur de déposer les fichiers dans <workspace>/references/ et étudiez-les (chargez references/reference-analysis.md). Si non, dites-le et utilisez le style maison, et proposez d'en regarder une qu'ils collent en lien.
    • Avez-vous des effets sonores, une voix (propre enregistrement ou texte-parole) et de la musique ? Sinon, dites-leur quelles options gratuites existent et proposez de les configurer (chargez references/sound-and-music.md). Le son n'est pas un ajout optionnel : un film sans son réel enregistré semble bon marché.
    • Preuve réelle à l'écran : des chiffres réels, des captures d'écran, des sorties de terminal, l'interface utilisateur du produit. N'inventez jamais de chiffres.
    • Plateforme et format : 16:9 ou 9:16 (chargez references/social-ship.md ; Instagram Reels est en 9:16).
  3. Reformulez le plan en 5 lignes, attendez un oui, puis construisez.

Le pipeline (chaque étape a une référence ; chargez-la lorsque vous atteignez l'étape)

  1. Brief une promesse en une phrase, 5 à 8 scènes, un point central par scène. Accroche d'abord.
  2. Mots courtes phrases parlées (3 à 7 mots chacune) avec les mots à l'écran portant le message même son coupé. Pas de mots à la mode, pas de tirets cadratins, pas de cadence IA ("Débloquez", "Élevez", "sans couture").
  3. Look palette de 3 couleurs, une famille de polices, profondeur (lumière douce, bokeh, vignette), un objet focal. Chargez references/craft-rules.md.
  4. Construire copiez assets/starter vers <workspace>/projects/<name>/, éditez scene/main.js. Chargez references/scene-contract.md avant d'écrire une scène. Rendez d'abord les images fixes, puis un rendu à sec à --scale 1, puis le final à --scale 2.
  5. Son feuille de repérage dans la scène, sons réels enregistrés, voix, musique, mix à -14 LUFS avec la voix à 12 dB au-dessus de tout. Chargez references/sound-and-music.md.
  6. Prouver scripts/scan_all.sh, corrigez chaque P0 et P1, re-scanner, répétez. Chargez references/qa-and-fix-loop.md.
  7. Publier export social, légende, plan de publication, et le mockup optionnel d'écran d'ordinateur portable (references/laptop-mockup.md). Chargez references/social-ship.md.

Règles strictes (ce sont des chiffres mesurés, pas du goût)

  • L'image 0 est une composition finie, jamais noire. Quelque chose change visiblement à 0,35 s et la première seconde bouge. Un événement visible au moins toutes les 2,6 s. Deux événements à voir impérativement à au moins 0,5 s d'intervalle.
  • Le texte à lire impérativement fait au moins 54 px dans un cadre de 1920 de large (environ 11 pt sur un téléphone). Un texte plus petit est uniquement de la texture et ne peut pas porter le message.
  • Rien ne bouge de plus de 45 px par image (pas de téléportation). Dépassement d'au plus 10 % pour l'interface utilisateur, 15 % pour un pop héroïque. Animer uniquement transform et opacity. Pas de will-change sur le texte. Gardez le grain subtil.
  • Les petits textes d'accentuation nécessitent un contraste de 3:1 ou mieux. Un citron vert vif ou du jaune sur crème échoue : utilisez une version d'encre plus foncée pour les petits textes.
  • Audio : -14 LUFS intégré, pic réel -1 dBTP ou moins, voix au moins 12 dB au-dessus du fond sonore, les hits portent de l'énergie au-dessus de 500 Hz pour survivre au haut-parleur d'un téléphone, chaque hit visible a un son sur son image.
  • Chaque nombre à l'écran provient de données réelles de la scène, avec sa source. Ne tapez jamais une statistique inventée.
  • Une idée par scène, un objet focal, trois régions en mouvement ou moins. Le curseur est un orbe circulaire calme ; les changements de scène naissent de la chose qui les a provoqués.

Commandes (espace de travail = ~/motion-studio)

node direct-engine/render_direct.mjs --scene projects/<name>/scene/index.html --out projects/<name>/out/<name>_silent.mp4 --scale 2 --workers 4
node direct-engine/render_direct.mjs --scene ... --out /tmp/x.mp4 --scale 1 --workers 1 --stills 1.0,4.0 --stills-out projects/<name>/stills
bash scripts/make_audio.sh <workspace> <silent.mp4> <final.mp4> [voice.wav] [music.wav]
bash scripts/scan_all.sh <workspace> <final.mp4> [payoff times] [1920x1080]
bash scripts/laptop_mockup.sh <workspace> <green_screen_laptop.jpg> <final.mp4> <out_9x16.mp4>

Linting du mouvement : node qa/sample_scene.mjs --scene <index.html> --from 0 --to <frames> --out series.json puis node qa/motion_lint.mjs series.json.

Comment travailler efficacement

Petites étapes, messages courts, re-rendu uniquement lorsqu'un scan le nécessite (un rendu complet prend des minutes). Ne lancez pas plusieurs sous-agents. Utilisez les images fixes pour vérifier un rendu avant un rendu complet. Après chaque groupe de corrections, re-scanner.

Rapport

Terminez par : ce que vous avez mesuré (chiffres réels), ce que l'humain doit encore regarder et écouter, et les chemins des fichiers. Si un contrôle a échoué et que vous l'avez passé outre, dites lequel et pourquoi.

Skills associés