JuniverseLi/motion-studio-skill

Motion Design Studio

Quand l'utiliser

Utilisez ce skill lorsque vous produisez de courtes vidéos de lancement de produit (par exemple, une vidéo 1080x1080 de 20 secondes) en utilisant un pipeline d'ingénierie de mouvement piloté par le code avec un agent de codage IA (par exemple, Claude Opus 5.5). Utilisez-le pour composer, itérer, ajuster et générer une vidéo par programmation en React, permettant de modifier la copie, les couleurs, le timing et le format directement dans le code et de re-rendre de manière déterministe.

Chaîne d'outils par étape

Commencez par Remotion + Remotion Skills ; ne sélectionnez que les modules supplémentaires nécessaires. La composition vit dans le code ; modifiez la copie/les couleurs/le timing/le format et re-rendez. Boucle : brief -> storyboard -> assets -> mise en page -> animation -> ajout de profondeur -> prévisualisation -> affinage -> rendu.

Étape	Dépôt	URL	Utilisation	Quand l'utiliser
DESIGN+STORYBOARD	Penpot	https://github.com/penpot/penpot	maquettes, composants réutilisables	Lorsque vous avez besoin de conception de maquette et de composants UI réutilisables
DESIGN+STORYBOARD	Excalidraw	https://github.com/excalidraw/excalidraw	esquisser un storyboard	Pour esquisser des storyboards visuels
DESIGN+STORYBOARD	Fontsource	https://github.com/fontsource/fontsource	polices auto-hébergées	Pour auto-héberger la typographie et les polices
DESIGN+STORYBOARD	Lucide	https://github.com/lucide-icons/lucide	icônes SVG cohérentes	Lorsque vous avez besoin d'une iconographie SVG cohérente
ASSETS+PERSONNAGE	SVGO	https://github.com/svg/svgo	nettoyer les vecteurs	Pour optimiser et nettoyer les graphiques vectoriels
ASSETS+PERSONNAGE	sharp	https://github.com/lovell/sharp	redimensionner/recadrer les images	Pour redimensionner et recadrer les images matricielles
ASSETS+PERSONNAGE	Lottie-web	https://github.com/airbnb/lottie-web	jouer des animations vectorielles	Pour jouer des animations vectorielles dans le moteur
ASSETS+PERSONNAGE	Rive Web	https://github.com/rive-app/rive-wasm	machines d'état de personnage	Pour intégrer des machines d'état de personnage interactives
LIGNES DE TEMPS	Motion	https://github.com/motiondivision/motion	ressorts, transitions de mise en page	Pour implémenter la physique des ressorts et les transitions de mise en page
LIGNES DE TEMPS	GSAP	https://github.com/greensock/GSAP	lignes de temps complexes	Pour séquencer des lignes de temps d'animation programmatiques complexes
LIGNES DE TEMPS	Anime.js	https://github.com/juliangarnier/anime	chorégraphie SVG/objet	Pour chorégraphier des chemins SVG et des propriétés d'objets
LIGNES DE TEMPS	Theatre.js	https://github.com/theatre-js/theatre	réglage visuel du mouvement	Pour ajuster et paramétrer visuellement les paramètres de mouvement
3D+POLISH	Three.js	https://github.com/mrdoob/three.js	rendu 3D	Pour le rendu de scènes et de géométries 3D
3D+POLISH	React Three Fiber	https://github.com/pmndrs/react-three-fiber	wrapper React pour Three.js	Pour construire des scènes 3D déclaratives en React
3D+POLISH	Drei	https://github.com/pmndrs/drei	aides pour caméras, éclairage, mise en scène	Pour ajouter des caméras, de l'éclairage et des aides à la mise en scène
3D+POLISH	Postprocessing	https://github.com/pmndrs/postprocessing	bloom, étalonnage des couleurs	Pour appliquer du bloom, de l'étalonnage des couleurs et du post-traitement
PRODUCTION+EXPORT	Remotion	https://github.com/remotion-dev/remotion	composer+rendre une vidéo en React	Framework principal ; composer et rendre une vidéo en React
PRODUCTION+EXPORT	Remotion Skills	https://github.com/remotion-dev/skills	playbook pour agent, installation via npx remotion skills add	Pour équiper les agents de codage des règles et bonnes pratiques de Remotion
PRODUCTION+EXPORT	FFmpeg	https://github.com/FFmpeg/FFmpeg	encoder/empaqueter, ffprobe	Pour extraire des images, encoder/empaqueter une vidéo, inspecter des flux
PRODUCTION+EXPORT	Mediabunny	https://github.com/Vanilagy/mediabunny	pipelines médias dans le navigateur	Pour traiter des pipelines médias basés sur le navigateur

Configuration

Prérequis système : Node.js, Claude Code, FFmpeg/FFprobe.

Initialiser le projet :

npx create-video --yes --blank launch-video
cd launch-video
npx remotion skills add
npm run dev

Lancez l'agent dans un second terminal.

Structure du répertoire :

• public/ - Assets du projet et reference.mp4
• BRIEF.md - Brief de production et spécifications des images
• frames/ - Images d'analyse extraites
• out/ - Images fixes et exportations vidéo rendues

Workflow

1. Analyse de référence

Extrayez les images de la vidéo de référence à faible cadence, puis extrayez les images consécutives autour des événements d'action critiques :

ffmpeg -i reference.mp4 -vf "fps=2,scale=960:-2" frames/ref-%04d.jpg

Un plan en tant qu'événement suit ce cycle de vie : état de départ -> curseur vers l'action -> appui -> révélation du résultat -> pause lisible

Exemple de ligne de temps de référence (@30fps) :

• Image 120 : Carte en place
• Image 150 : Le curseur s'approche
• Image 180 : Curseur sur le bouton
• Image 195 : Appui sur le bouton
• Image 210 : Le résultat apparaît
• Image 234 : Étiquette lisible
• Image 420 : Transition de fermeture

Remarque : Les estimations spatiales de l'agent sont approximatives ; vérifiez toutes les coordonnées par rapport aux images extraites.

Analyse reference.mp4. Rapport les dimensions, le fps et la durée. Extrais les images dans frames/ref-%04d.jpg. Génère REFERENCE.md documentant les horodatages et les numéros d'image pour l'entrée, l'atterrissage, la pause et la coupe ; les boîtes englobantes ; la direction du mouvement, la durée, l'échelle, l'opacité et le dépassement ; l'ordre de révélation ; et la durée de la pause de lecture. Étiquète toutes les valeurs comme mesurées, estimées ou créatives. Propose un plan original utilisant nos assets. Liste les assets manquants. Retourne le plan avant de l'implémenter.

2. Brief

Structurez BRIEF.md avec des spécifications explicites de coordonnées et de timing :

• Composition : Composition de lancement 1080x1080, 30fps, 600 images au total (numéros d'image inclusifs globaux).
• Mise en page : Coordonnées pixels explicites, palette (#101318 fond, #F5F7FA texte, #8AD8B0 accent), marge de 64px, boîte de titre maximum 2 lignes, rectangle de carte produit, ordre de calque explicite.
• Ouverture (images 0–119) : Le titre entre images 0–18, la carte entre images 18–42 (cubic ease-out serré), pause.
• Produit (images 120–419) : Chemin du curseur dégagé du texte, échelle d'appui 1 -> 0.92 -> 1 aux images 192/195/201, révélation images 210–234, pause.
• Fermeture (images 420–599).
• Règles d'implémentation : Pilotez les valeurs depuis useCurrentFrame, exposez les constantes, seeds fixes, alignez le clic audio à l'image 195 et le hit à l'image 210.
• Révision par étapes : Construisez d'abord l'ouverture, rendez les images fixes aux images 0, 18, 42, 60, 119 plus une prévisualisation ; rapportez l'état et attendez les retours. Inspectez les images 120, 195, 234, 419, 420, 540, 599 plus tard.

Lis BRIEF.md et les directives Remotion. Inspecte public/. Résume les coordonnées de mise en page, les numéros d'image des événements et les courbes d'assouplissement. Signale tout conflit de spécifications ou entrées manquantes. Implémente seulement la première étape de révision (images 0-119). Rends les images fixes aux images 0, 18, 42, 60, 119 et un clip de prévisualisation. Rapport les fichiers modifiés, les vérifications visuelles, et attends les retours avant de continuer.

3. Construction par étapes

Implémentez scène par scène selon le brief :

• Pilotez toutes les valeurs dynamiques depuis useCurrentFrame en utilisant interpolate ou spring.
• N'utilisez jamais de transitions CSS (elles provoquent des scintillements de rendu).
• Utilisez des valeurs aléatoires déterministes et seedées.
• Convertissez tout le timing de secondes en images explicitement (par exemple, 0.6s = 18 images @ 30fps).
• Gardez les paramètres d'entrée co-localisés dans le code.
• Exposez les paramètres de mise en page, de timing et de mouvement en tant que constantes.

4. Révision des images fixes

Rendez les images clés pour vérifier la composition visuelle :

npx remotion still Launch out/opening.png --frame=60
npx remotion still Launch out/product.png --frame=240
npx remotion still Launch out/closing.png --frame=540

Vérifications de révision :

• Texte lisible ?
• Résultat visible ?
• Recadrages ou éléments qui se chevauchent ?
• Espace de fermeture adéquat ?

Rendez les transitions partielles à travers les images limites :

npx remotion render Launch out/transition.mp4 --frames=90-149 --codec=h264

5. Corrections

Formatez tous les rapports de bugs et demandes d'ajustement en utilisant quatre champs explicites :

1. Emplacement (numéros d'image et composant)
2. Problème observé
3. Changement requis
4. Ce qui reste fixe

Ordre de priorité : Informations manquantes et texte illisible -> ajustements de timing -> polissage des détails. Effectuez des critiques indépendantes dans une session séparée, en limitant les lots à un maximum de 5 corrections spécifiques à des images. Boucle d'exécution des corrections : défaut -> une modification ciblée -> images affectées -> limite de scène -> lecture à vitesse normale. Distinguez les numéros d'image locaux à la scène et globaux (par exemple, l'image locale 30 dans une séquence commençant à 120 est l'image globale 150).

Corrige le défaut : Le curseur chevauche l'étiquette à l'image globale 210.
Emplacement : Scène Produit, images 204-210.
Problème observé : Le chemin du curseur croise le texte de l'étiquette à l'image 210.
Changement : Ajuste le chemin du curseur après l'appui entre les images 204-210 pour maintenir une distance de 24px de l'étiquette.
Ce qui reste fixe : Préserve les images clés d'appui (192/195/201), le timing de révélation (210-234), la géométrie de la carte, la copie et l'alignement audio.
Rends les images fixes aux images 195, 210, 222 et 240, plus une prévisualisation animée des images 180-249. Rapport les coordonnées mises à jour.

6. Son

• Synchronisez le clic audio directement avec l'appui visible sur le bouton (par exemple, image 195).
• Synchronisez le hit de la révélation visuelle avec l'apparition visuelle (par exemple, image 210).
• Localisez le hit via la forme d'onde audio et appliquez le décalage nécessaire.
• Maintenez une liste de repères audio placée à côté des événements de la ligne de temps visuelle.
• Gardez les éléments audio sur des pistes séparées.
• Vérifiez l'équilibre audio final à la fois sur écouteurs et sur haut-parleur de téléphone.

7. Export

Rendez la vidéo finale :

npx remotion render Launch out/launch.mp4 --codec=h264

Inspectez les propriétés vidéo avec ffprobe :

ffprobe -v error -select_streams v:0 -show_entries stream=width,height,avg_frame_rate,duration -of json out/launch.mp4

Résultat attendu : Résolution 1080x1080, fréquence d'images 30/1, durée ~20s. Regardez le fichier rendu à vitesse de lecture normale. Conservez le rendu final avec BRIEF.md, les données de timing et la liste de repères audio.

8. Films plus longs

• Définissez les états d'entrée et de sortie par scène.
• Maintenez les paramètres partagés entre les scènes pour les polices, la palette et l'espacement.
• Construisez une scène à la fois.
• Tenez compte du chevauchement de transition entre les scènes adjacentes.
• Vérifiez les deux limites de scène à chaque modification locale.
• Extrayez et enregistrez les composants réutilisables.

Checklist de qualité

• Copie & Typographie : Testez le titre le plus long ; s'il atteint 3 lignes, arrêtez-vous et raccourcissez la copie, élargissez le conteneur, ou repositionnez. Vérifiez le rendu réel de la police dans les images exportées.
• Reproductibilité : Toutes les valeurs pilotées depuis useCurrentFrame avec interpolate ou spring. Pas de transitions CSS (empêche le scintillement). Aléatoires déterministes seedés. Conversion explicite secondes-à-images (0.6s = 18f @ 30fps). Paramètres d'entrée maintenus co-localisés.
• Objectif du mouvement : Classez le mouvement en entrée, pause, curseur ou transition. Ajustez l'amortissement et la rigidité du ressort un paramètre à la fois avec une destination fixe.
• Chorégraphie : Décalez l'entrée du titre et de l'étiquette d'environ 0.1s. Ajoutez une échelle de poussée subtile 1.00 -> 1.03 sur 3s. Assurez un mouvement de fond discret pendant les pauses.
• Propriété de l'attention : Dirigez l'attention vers le bouton jusqu'à la réponse à l'action, puis passez au résultat. Le chemin du curseur doit éviter de croiser le texte du titre.
• Fenêtre de lecture : Vérifiez la lisibilité ; 8 images (0.27s) est trop court. Lisez le texte à voix haute à vitesse normale. Inspectez les étiquettes à la taille d'affichage d'un téléphone. Appliquez un flou de mouvement uniquement à l'entrée ; assurez-vous que l'image est claire au moment de la pause de lecture.
• Images fixes & Limites : Vérifiez les images fixes aux images 60, 240, 540 pour un texte lisible, des résultats visibles, des défauts de recadrage/chevauchenent et un espace de fermeture. Vérifiez les limites de transition via des rendus partiels.
• Audio & Export : Alignez l'audio du clic sur l'appui visible et l'audio du hit sur la révélation visuelle. Réexaminez sur écouteurs et haut-parleur de téléphone. Confirmez 1080x1080, 30fps, durée ~20s avec ffprobe, et regardez à vitesse de lecture normale.

Package optionnel de clip de lancement payant (Prix indicatif)

Proposez un package pilote "Launch Clip" à un prix indicatif de 150 $ :

• Périmètre : Une fonctionnalité, script approuvé, une vidéo MP4 1080x1080 de 20 secondes, une image de couverture, un cycle de révision.
• Préparation : Construisez d'abord un échantillon en utilisant des assets possédés ou autorisés ; chronométrez le travail de production.
• Engagement : Partenaire avec un développeur ayant un lancement à venir ; convenez à l'avance du script, des assets, de la date limite, des conditions de paiement, du périmètre des révisions et des droits d'utilisation/portfolio.
• Cadence de livraison : Envoyez d'abord 3 images fixes de révision, puis un clip de prévisualisation, puis le résultat final.
• Révisions : Exigez que les retours du client soient strictement liés aux numéros d'image.
• Conformité : Vérifiez les exigences de licence Remotion pour une utilisation commerciale.

Sources

• Liste des dépôts : @beamnxw, https://x.com/beamnxw/status/2110408774737432738 (tous les 20 dépôts vérifiés comme existant sur GitHub, 2026-10-15 ; les objectifs en une ligne sont ceux de l'auteur du fil, non testés indépendamment)
• Workflow, prompts et offre : @beamnxw article X "Motion Engineering with Opus 5.5: Build Launch Videos You Can Sell", https://x.com/beamnxw/status/2108616740846420354 (paraphrasé ; les numéros d'image, couleurs et coordonnées sont l'exemple travaillé de l'article, pas des exigences)
• Documentation Remotion : https://www.remotion.dev/docs/ai/coding-agents