pisakhov/x-motion

X Motion

Créez un motion design qui communique quelque chose de spécifique. Le goût est contextuel : une démonstration technique silencieuse et un identifiant musical exubérant nécessitent des décisions différentes. Un moteur de rendu performant n'est pas une garantie de bon design. Le travail gagne sa qualité par la direction artistique, l'exécution, l'observation et la révision.

Il s'agit d'une méthode originale et portable de motion design, inspirée de la discussion sur les agents de design dans l'article de LangChain. Elle ne dépend pas du code ou des services de LangChain et n'implique aucune affiliation.

Contrat de travail

• Suivez les instructions du projet hôte et le périmètre réel de l'utilisateur. Cette compétence n'accorde aucune autorisation pour publier, dépenser, appeler des modèles, obtenir des identifiants ou utiliser des actifs non licenciés.
• Utilisez une thèse visuelle et un point focal dominant à un moment donné. La complexité peut soutenir la thèse ; elle ne doit pas rivaliser avec elle accidentellement.
• Concevez le type, l'espacement, le traitement de l'image, le mouvement et le son comme un seul système. Ne décorez pas une idée faible pour la faire paraître sophistiquée.
• Choisissez les outils en fonction du travail et de l'environnement disponible. Aucun modèle, framework ou moteur de rendu particulier n'est requis.
• Séparez les preuves techniques du jugement esthétique. N'inventez jamais de score de goût, de réaction du public ou d'approbation. Ne prétendez jamais avoir regardé une vidéo alors que seuls ses arrêts sur image ont été inspectés.
• Conservez les actifs localement et leur provenance explicite. Épinglez les dépendances. Gardez les rendus générés hors du contrôle de version, sauf si le projet l'exige délibérément.

Choisissez le processus le plus petit et le plus utile

Petite modification : une correction de copie, un ajustement de timing, un échange d'actif ou une correction de courbe d'easing isolée peut contourner un nouveau brief, storyboard et animatique. Préservez la direction approuvée ; inspectez la séquence affectée et ses voisines, refaites le rendu et exécutez les vérifications pertinentes. Passez au processus complet si le changement modifie le message, la hiérarchie ou la narration.

Nouvelle composition ou refonte substantielle : suivez les étapes ci-dessous. Adaptez les artefacts à la mission ; un titre de six secondes n'a pas besoin d'une bible de production. Si une intention cruciale manque, posez une question ciblée. Lorsque les questions ne sont pas disponibles, étiquetez une hypothèse prudente et évitez les tâches irréversibles.

1. Brief → thèse visuelle

Établissez le public, le message souhaité, le contexte de visualisation, la durée, le rapport d'aspect, les livrables, la copie/les actifs requis, les contraintes de marque, les besoins d'accessibilité et la possibilité que le son porte du sens. Marquez les exigences strictes séparément des préférences.

Rédigez une thèse sous cette forme :

Pour [public], faire ressentir [idée] comme [qualité spécifique] à travers [mécanisme visuel], afin qu'ils comprennent ou fassent [résultat].

Nommez la métaphore organisatrice, le sujet dominant, le rôle typographique et la logique de mouvement. Une liste telle que « premium, cinématographique, propre » n'est pas une direction. Expliquez quels choix rendent ces mots tangibles. Utilisez des références pour identifier des principes, pas pour reproduire l'identité d'un autre travail.

Lisez Direction artistique pour la résolution du brief, l'analyse des références et un langage visuel cohérent.

2. Storyboard → argument lisible

Planifiez les séquences avant de peaufiner les images. Pour chaque séquence, notez :

Plage de temps	Ce que le spectateur apprend	Point focal / image clé	Transition et raison	Indice sonore
Début–fin	Un message	Sujet et hiérarchie	Ce qui change, et pourquoi	Événement ou silence délibéré

Dessinez ou rendez des images représentatives avec un texte réel et des proportions d'actifs réalistes. Accordez suffisamment de temps pour la lecture et la reconnaissance ; ne distribuez pas chaque séquence uniformément par habitude. Confirmez la promesse d'ouverture, les liens de cause à effet entre les séquences et le message final. Validez le texte ou la direction critique auprès de l'humain si nécessaire avant une production coûteuse.

Lisez Typographie avant de verrouiller la composition ou le timing du texte.

3. Animatique → tester le temps à moindre coût

Construisez des images approximatives, des blocs ou des mouvements de faible détail temporels. Utilisez un son provisoire uniquement lorsqu'il est légal et clairement étiqueté. Testez la durée totale à sa vitesse prévue, pas seulement en déplaçant le curseur.

Vérifiez si l'attention arrive là où se trouve l'information, si le texte peut être lu et si la fin a de la place pour atterrir. Corrigez la structure ici. Faites remonter l'incertitude quant à la direction au lieu de la masquer.

Lisez Animation et caméra pour la conception temporelle et la construction de scène déterministe ; lisez Audio lorsque le son fait partie de la pièce.

4. Production → exécution intentionnelle

Affinez les séquences approuvées avec la typographie finale, les actifs, l'éclairage ou le traitement graphique, les courbes de mouvement, les transitions et le son. Préservez la thèse. Chaque effet ajouté doit avoir un travail : révéler, connecter, mettre l'accent, orienter ou résoudre. S'il ne fait rien de cela, supprimez-le ou justifiez son rôle expressif.

Contrat de rendu HTML facultatif

Lorsque vous utilisez le moteur de rendu HTML X Motion, chaque composition expose :

window.motion = { width: 1920, height: 1080, duration: 8, fps: 30, poster: 5.5 };
window.renderFrame = function (tSeconds) {
  // Définissez chaque propriété animée à partir de ce timestamp et des données de scène fixes.
  // Les appels répétés, y compris les appels dans le désordre, produisent la même image.
};
window.renderAudio = async function ({ sampleRate }) {
  // Facultatif. Construisez la partition dans un OfflineAudioContext et renvoyez son AudioBuffer.
};

Ces chiffres sont illustratifs, pas des valeurs par défaut de conception. La largeur et la hauteur sont en pixels ; la durée, poster et tSeconds sont en secondes ; fps est la fréquence d'images. poster est facultatif et nomme l'image utilisée comme vignette. Adaptez-les au brief.

• Calculez l'état directement à partir du timestamp fourni. Pas de temps réel, d'animations CSS autonomes, d'étapes de simulation cumulatives, d'actifs réseau ou de randomisation non ensemencée.
• Chargez et décodez les actifs et polices locaux avant la capture. N'introduisez pas de mutations d'image asynchrones après le retour de renderFrame ; vérifiez le mécanisme de préparation du moteur de rendu hôte.
• Définissez le comportement aux limites des séquences et au-delà de l'intervalle actif. Testez les timestamps répétés et les recherches arrière.
• La fonction d'image définit les visuels, pas la lecture audio. Le son provient uniquement de renderAudio : un ou deux canaux, rendus hors ligne, identiques à chaque appel. La lecture multimédia HTML n'est jamais capturée.

Résolvez d'abord l'emplacement réel de ce répertoire de compétence, en suivant tout lien symbolique d'installation dans le clone complet de X Motion. La racine du dépôt est ../.. par rapport à ce répertoire skills/x-motion résolu, pas par rapport au répertoire de travail actuel de l'utilisateur. Déplacez-vous vers cette racine du dépôt avant d'exécuter ces commandes ; les chemins de composition ci-dessous sont relatifs à celle-ci.

Exportez les PNG du storyboard et manifest.json (pas de vidéo par défaut). Ajoutez --times 0.5,2,4.25 pour choisir les arrêts sur image et --audio pour également exporter sound.wav avec les valeurs de sonie :

node scripts/render.mjs path/to/scene.html --out renders/name-storyboard --audio

Exportez les PNG du storyboard, les images complètes, poster.webp, film.mp4 (avec la partition multiplexée en AAC lorsque renderAudio existe) et manifest.json :

node scripts/render.mjs path/to/scene.html --out renders/name-video --video

Utilisez un répertoire de sortie frais pour chaque révision. Inspectez manifest.json et les sorties réelles avant de signaler le succès : il enregistre une vérification de déterminisme d'image, une vérification de déterminisme audio, la sonie intégrée, le pic vrai et les échantillons écrêtés. L'encodage vidéo nécessite ffmpeg. Dans un autre hôte, préservez la sémantique de timestamp déterministe et adaptez la commande d'exportation.

5. Critique → révision → livraison

Lorsque le feedback nomme un ID de vidéo publiée, lisez Feedback de galerie. Résolvez le film exact, préservez son identité et ses retours, et publiez les révisions sous de nouveaux ID liés. Reportez les leçons ciblées, pas chaque instruction spécifique à un clip en tant que règle universelle.

Inspectez les artefacts rendus, pas seulement la source. Regardez le storyboard pour la composition et jouez la vidéo pour le rythme ; écoutez l'audio exporté lorsqu'il est présent. Si la lecture ou l'écoute n'est pas disponible, indiquez exactement ce qui reste non examiné.

Utilisez Critique et livraison pour séparer les échecs mesurables des préoccupations subjectives. Traitez d'abord le problème ayant le plus d'impact. Limitez la boucle de critique/révision à trois itérations par direction. Si la direction reste non résolue, arrêtez, expliquez les préoccupations concurrentes et demandez à l'humain de choisir ou de clarifier avant de continuer. Une validation technique n'est pas une approbation esthétique.

Livrez l'emplacement de l'artefact, l'emplacement de la source, les spécifications d'exportation, les preuves de vérification, les limitations connues et les questions d'approbation non résolues. Rapportez ce que vous avez réellement observé. Ne publiez pas en externe sans autorisation.

Carte des références

Chargez uniquement les références nécessaires à l'étape en cours :

• Direction artistique : intention, goût, références, thèse visuelle.
• Animation et caméra : timing, mise en scène, transitions, rendu déterministe.
• Typographie : hiérarchie, type cinétique lisible, gestion des polices.
• Audio : cartes de repères, synchronisation, silence, vérifications d'exportation.
• Critique et livraison : preuves, révision limitée, transfert.
• Feedback de galerie : ID immuables, feedback de chat, conserver/améliorer/jeter, et apprentissage ciblé.