risingjerry/motion-skill

Motion court-métrage en code (motion)

Le film est écrit en code : chaque image est calculée à partir du temps t, donc « ralentir ici » signifie simplement modifier un nombre et relancer le rendu, sans avoir à tourner à nouveau. Aucun modèle IA de génération d'images ou de vidéos n'est utilisé ; tout ce qui apparaît provient de matériel authentique ou de code.

Choisir le niveau de réalisation

Les trois niveaux utilisent le même processus, plus le niveau est bas, plus le résultat ressemble à un tournage réel et plus c'est lent. Choisissez en fonction de ce que le film doit montrer, possibilité de mélanger les niveaux.

Niveau	Contenu visuel	Adapté à	Point de départ
1. Animation 2D	Vrai logo, vraies captures d'écran, formes qui se transforment	Apps, logiciels, intros de marque	templates/2d.html
2. 3D dans le navigateur	Cartes d'interface disposées dans l'espace 3D, navigation de caméra ; transitions silhouettes pour raccorder avec du réel	Présentations multi-écrans, films avec scènes réelles	templates/3d.html, scripts/silhouette.py
3. Studio Blender	Modèles de produits réels, une seule lampe, matériaux réalistes	Objets physiques comme écouteurs, téléphones, tasses	scripts/blender/studio.py

Détails complets : references/layers.md.

Processus (dans l'ordre, ne pas sauter d'étapes)

1. Clarifier et rassembler le matériel authentique. Quel est le produit, pour qui, durée, plateforme de diffusion, action souhaitée du public à la fin. Utilisez toujours du matériel authentique : fichier logo officiel, captures d'écran réelles (supprimez d'abord les notifications, avatars, numéros de téléphone), couleurs et polices de la marque. N'utilisez pas les visuels promotionnels de l'App Store comme interface, ne dessinez pas le logo de mémoire. Pour un objet physique, prenez des photos sous plusieurs angles, idéalement des photos prises par l'utilisateur lui-même, pour servir de référence d'échelle.
2. Définir la fin. La fin ne doit comporter que l'icône et le logotype (ou un raccord vers une scène réelle). Pas d'appels à l'action comme « Télécharger maintenant » ou « Ouvrir XX », ni de mentions légales « Démo conceptuelle » (mettez ces explications dans la description).
3. Produire un storyboard numéroté et attendre l'approbation. 5 à 10 plans, chacun décrivant : plage temporelle, contenu visuel, action, transition vers le plan suivant, texte à l'écran. Créez shots.json, exécutez node scripts/render.mjs board shots.json board.png pour générer une image à montrer. Ne produisez pas le film final sans approbation – c'est le moment le moins coûteux pour modifier. Format détaillé dans references/storyboard.md.
4. Monter la page. Copiez le template et templates/motion-kit.js dans le dossier des sources. Tous les beats sont écrits dans BEATS en haut de la page, modifiez le rythme uniquement à cet endroit. Conventions de la page dans references/html-engine.md.
5. Inspecter image par image avant de montrer. render.mjs still capture les moments clés (3 à 4 points par transition, pas seulement les images figées), scripts/sheet.py les assemble en une seule image pour une inspection visuelle. Lancez ensuite les scripts de vérification :
   • render.mjs probe + scripts/layout_check.py probe : le texte doit être à au moins 40 px du sujet (en 4K), le sujet proche du centre.
   • 3D : scripts/blender/motion_check.py (interpénétration, rotation max 6° par image, pas de saut de vitesse de rotation), scripts/seam_check.py (décalage de jointure ≤ 1 px). Liste complète dans references/checklist.md.
6. Produire uniquement en 4K. node scripts/render.mjs video page.html nom-film-4K.mp4 --scale 2 (page 1920x1080 → 3840x2160). Une seule session de rendu 4K ou Blender par ordinateur à la fois. L'extraction d'images pour contrôle se fait depuis le fichier 4K final : python3 scripts/sheet.py video ....
7. Ajouter le son une fois l'image figée. Si l'image change, tous les beats se décalent. Musique et effets sonores obligatoires ; le temps fort de la musique doit coïncider avec le point d'impact clé de l'image ; global -14 LUFS, pic vrai ne dépassant pas -1 dBTP ; le flux vidéo est copié sans ré-encodage. Voir references/sound.md.
8. Révisions. À chaque tour, faites d'abord une copie de sauvegarde, puis après modification, réextrayez les images pour auto-contrôle, décrivez clairement ce qui a changé. Enregistrez sous un nouveau nom, n'écrasez pas et ne supprimez pas les fichiers du client. Soyez transparent sur ce qui a été vérifié : une image fixe ne garantit pas le mouvement, regarder les images ne remplace pas l'écoute du mixage audio.

Règles esthétiques essentielles

Les explications complètes se trouvent dans references/transitions.md et references/blender-3d.md, voici ce qu'il faut retenir absolument :

• Chaque plan émerge du précédent. Pas de fondu entrant/sortant, pas de fondu enchaîné. Le même objet se déforme, se retourne, se déplie, se rétracte – l'œil du spectateur n'a pas à chercher un nouveau point d'ancrage.
• L'action se déroule au centre de l'image. Imaginez un réticule au centre du cadre, le sujet principal reste toujours à proximité.
• L'image est toujours en mouvement. Même un plan fixe doit comporter un léger travelling avant ou un déplacement très lent.
• Un seul mouvement suit une seule courbe. Avancer, c'est avancer jusqu'au bout, sans reculer ; tourner, c'est tourner sans faire demi-tour. Départ rapide, fin lente, et accordez plus de temps à la fin.
• Le texte est court, apparaît flou puis devient net, sans saut brusque ni grossissement soudain. Le texte ne doit pas chevaucher le sujet.
• En 3D, une seule lampe et fond noir. C'est l'essentiel de l'effet « studio photo ».
• La 3D doit être physiquement cohérente : les couvercles ferment parfaitement ; les objets ne se traversent pas ; les échanges de position se font par une orbite 3D, pas en ligne droite ; la vitesse de rotation est lisse, sans à-coups.
• Comparez avec la photo réelle du produit – proportions, coins arrondis, emplacement des ouvertures – ajustez le modèle si nécessaire.
• Les transitions par silhouette commencent par un gros plan, puis s'élargissent, avant un cut sec vers la scène réelle. Voir references/silhouette.md.
• L'image et le son subissent uniquement un décalage global, pas de changement de vitesse ni de tonalité.

Règles déontologiques

• Marques : Travaillez uniquement pour des marques que le client possède ou pour lesquelles il a l'autorisation. Les marques tierces ne peuvent être utilisées que pour des exercices personnels, sans usurper l'identité officielle, sans diffuser de publicité ni imiter leurs campagnes réelles.
• Matériel : Utilisez uniquement du matériel, des polices, musiques, modèles que le client a créés ou dont il détient les droits, et vérifiez que la licence couvre cet usage.
• Contenu : Les chiffres et affirmations dans le film doivent être vrais et sourcés, n'inventez pas de données ni d'avis.
• Vie privée : Supprimez toute information personnelle des captures d'écran et des séquences réelles ; les personnes filmées doivent avoir donné leur consentement.
• Services payants (voix off, musique IA, etc.) consomment le crédit du client, ne les utilisez qu'à la demande explicite de ce dernier.

Aperçu des scripts

Script	Fonction
scripts/render.mjs	Page HTML → image fixe / mp4 4K / enregistrement de position (probe) / storyboard (board)
scripts/sheet.py	Extraction d'images fixes ou d'images d'un fichier vidéo à intervalles → une image de contrôle avec repères temporels (extraction à la résolution d'origine)
scripts/layout_check.py	Vérification de la distance texte-sujet et du centrage du sujet
scripts/seam_check.py	Décalage de jointure entre deux pièces sous un angle de caméra réel (en pixels)
scripts/blender/studio.py	Scène studio avec une lampe + rendu EEVEE/Cycles, accepte GLB/glTF/USDZ/OBJ/FBX, --demo inclut un modèle d'exemple
scripts/blender/motion_check.py	Vérification image par image des interpénétrations, vitesse angulaire et sauts de rotation
scripts/silhouette.py	Extraction de masque de personne (macOS Vision, optionnel) → silhouette vectorielle lissée, possible depuis un gros plan
scripts/audio/synth.py	Synthèse par code d'effets sonores et de base musicale (libre de droits)
scripts/audio/mix.py	Alignement de la musique sur les points clés, placement des effets sonores sur les beats, sidechain pour libérer de l'espace, normalisation du volume, intégration dans la vidéo
scripts/encode.py	Images PNG → mp4
scripts/doctor.py	Vérification des dépendances : ce qui manque et comment l'installer

Quand lire quel fichier

Vous êtes en train de…	Lisez
Choisir un niveau et estimer la charge de travail	references/layers.md
Écrire le storyboard	references/storyboard.md
Créer la page HTML et produire le film	references/html-engine.md
Concevoir les transitions entre plans	references/transitions.md
Travailler sur un modèle 3D de produit réel	references/blender-3d.md
Faire des silhouettes et raccorder avec du réel	references/silhouette.md
Ajouter musique et effets sonores	references/sound.md
Effectuer l'auto-contrôle avant livraison	references/checklist.md
L'image semble anormale	references/pitfalls.md

Environnement

Node.js 20+, Python 3.9+ (numpy, Pillow, opencv-python-headless), ffmpeg, Google Chrome ou Chromium. Le niveau 3 nécessite Blender (gratuit) ; le détourage automatique pour les transitions silhouettes nécessite macOS 14+, les autres systèmes utilisent un outil externe pour le masque. Avant de commencer, exécutez python3 scripts/doctor.py, et signalez au client ce qui manque et comment l'installer. Si le dossier de la compétence contient un dossier .venv, les scripts Python utilisent .venv/bin/python (Windows : .venv\Scripts\python) ; sous Windows, remplacez python3 par python.