Motion Atoms

Que fait Motion Atoms ?

Permet à l'agent de produire des animations sur description, et d'extraire des mouvements et combinaisons réutilisables à partir d'une vidéo de référence. L'agent observe, comprend l'usage et orchestre ; les atomes, validateurs et outils de rendu du package exécutent ; l'utilisateur n'a pas à choisir un effet ou à mémoriser un nom d'atome au préalable. Le package contient 53 atomes 2D répartis en 8 familles, partageant la même implémentation que le site web. Accès aux ressources du package par chemin relatif, sans dépendre du site en ligne, du dépôt source ni de l'installation npm. Voir Installation et Environnement pour la première installation ; manifest.json enregistre la version du package, les fichiers et leurs sommes de contrôle.

Lire par tâche, ne pas charger tout le répertoire d'un coup

Tâche	Lire d'abord	Puis consulter
Générer à partir d'une description, ou modifier un effet existant	Cycle génération et modification	Mapping d'intention
Décomposer une vidéo de référence, ou analyser comment un mouvement est réalisé	Décomposition d'animations vidéo	Selon l'observation, consulter la liste des atomes et leur usage ; utiliser breakdown pour extraire la séquence originale ; séparer par pistes selon le type d'animation, espacer clairement les pistes, surligner indépendamment les blocs d'action sans texte sur une même piste
Animations 2D de texte, forme, propriété	Catalogue 2D, ne filtrer que la famille nécessaire	atoms/<ID>.md et le fichier .mjs correspondant ; Conventions d'entrée/sortie
Exporter un fichier de scène 2D	Scène orchestrée	scripts/motion.mjs ; champs précis dans MotionSpec
Corriger saccades, décalages, occultations, illisibilité	Vérification temporelle et visuelle	Corriger le problème réel, puis vérifier les images et la lecture affectées

Lors de la création, préciser d'abord l'hôte, le format d'image, la fréquence d'images, le sujet cible et le livrable ; lors de la décomposition, confirmer la vidéo consultable, l'étendue et l'objectif d'analyse, en conservant les codes temporels sources. Respecter les décisions déjà prises par l'utilisateur. Les noms, paramètres et comportements des animations se basent sur la documentation du package.

Livrer le résultat demandé par l'utilisateur, pas seulement recommander des atomes candidats ; pour les modifications d'un résultat existant, conserver les fichiers sources et vérifier les changements réels. La livraison 2D deliver peut générer un aperçu indépendant, une scène éditable, les ressources et un rapport de vérification ; le rapport ne doit pas faire passer des vérifications numériques pour une validation visuelle. En cas de fonctionnalité non implémentée, signaler l'écart puis utiliser l'implémentation de l'hôte appelant, sans faire passer un effet similaire pour une réponse au besoin.

Cœur de la création

• D'abord l'usage, ensuite le mouvement. Composer pour montrer un produit, un événement ou un changement d'état clair ; chaque atome doit pouvoir justifier de son rôle. S'inspirer du sujet, du rythme et des enchaînements d'une vraie vidéo promotionnelle après l'avoir visionnée, sans copier les visuels ni utiliser d'icônes sans rapport, de faux contrôles ou de mouvements décoratifs pour faire du nombre. Les courtes vidéos du site durent environ 5 secondes, avec 2–3 atomes ; ce n'est pas une limite de durée ou de nombre pour toutes les vidéos.
• Orchestrer les changements, ne pas plaquer des effets sur une affiche. Organiser d'abord les éléments principaux et secondaires, puis décrire clairement l'entrée, le changement, l'atterrissage et la sortie ; les mouvements doivent avoir une relation de cause à effet ou un enchaînement visuel, les changements clés doivent être visibles en un coup d'œil. Chaque groupe adopte un mode d'entrée/sortie adapté à son sujet ; le texte stationnaire doit laisser un temps de lecture suffisant. Supprimer les petits caractères inutiles.
• Le mouvement doit être complet et cohérent. Ne pas interrompre prématurément, ne pas inverser la lecture de manière uniforme ; les raccords doivent tenir compte de la position, de la direction, de la vitesse et de la luminance. Concevoir séparément les mouvements finis et les boucles continues ; vérifier la jointure réelle de début et de fin d'une boucle, sans masquer les à-coups par des interpolations ou une augmentation factice de la fréquence d'images nominale.
• Le sujet comme un tout. Images, logos, marques partagent les bonnes coordonnées et le bon point d'ancrage ; les masques réels et l'ordre de dessin déterminent les occultations. Vérifier l'entrée et la sortie de l'ensemble du texte et des détails, ne pas laisser seulement le fond s'éloigner ; vérifier l'alignement, la netteté et le recadrage dans le format d'image réel et la taille d'affichage.
• Les ressources au service du mouvement. Choisir des ressources gratuites pour usage commercial correspondant à l'usage, avec une licence traçable ; traiter les crédits et la redistribution des fichiers sources conformément à la licence. Ne pas utiliser la même ressource pour remplir différents cas. Contrôler le volume de chargement des ressources ; lorsque le site web et une vidéo promotionnelle référencent la même scène, synchroniser les ressources et les mouvements.
• Valider sur la sortie réelle. Pour le web, vérifier la lecture réelle à la taille cible ; pour la production vidéo, d'abord faire le storyboard, puis rendre image par image, composer la vidéo, vérifier l'entrée / l'état stable / la sortie / les raccords après encodage et lire intégralement. Ne pas déclarer de vérification réussie sur des parties non visionnées ; livrer le résultat lisible avec l'étendue de la vérification. Les vérifications techniques détaillées se trouvent dans Vérification temporelle et visuelle.

2D : Intégration dans l'hôte de rendu

Copier uniquement les fichiers .mjs nécessaires ; copier atoms/draw.mjs uniquement si le dessin est requis. Les atomes s'évaluent sur des images explicites, sans lecteur intégré. L'hôte contrôle l'ordre de dessin, les coordonnées et le temps. Les huit familles répondent chacune à une question : propriété (quoi changer), rythme (comment changer), boucle (toujours en mouvement), orchestration (qui après qui), transition (apparaître/disparaître), texte (mouvement des caractères), texture (superposition), génération (création ex nihilo).

import move from './atoms/prop.move.mjs';
import spring from './atoms/timing.spring.mjs';
import breathe from './atoms/loop.breathe.mjs';
import { drawAtom } from './atoms/draw.mjs';

const subject = { points: [[-50,-50],[50,-50],[50,50],[-50,50]], closed: true, fill: true };
const curve = (t) => spring({ frame: t, durationFrames: 1 }).value;   // rythme : donne seulement la courbe
function renderFrame(ctx, frame) {
  const shape = move({ frame, durationFrames: 30, subject, params: { fromPx: -200, toPx: 0 }, ease: curve });
  const breath = breathe({ frame, startFrame: 30, durationFrames: 90 });   // boucle : superposée
  drawAtom(ctx, { ...shape, scale: shape.scale * breath.scale }, { x: 320, y: 200, color: '#f4f1ea' });
}

• Les params d'une fonction indépendante peuvent ne transmettre que les modifications ; les clips MotionSpec doivent contenir tous les paramètres. Ne pas mélanger ces deux conventions.
• Pour combiner simultanément, regarder d'abord les rôles et writes : translation et rotation s'additionnent, échelle, opacité et étirement se multiplient, les filtres se concatènent ; l'atome d'orchestration renvoie des copies, l'hôte dessine chaque copie avec son décalage et son délai. Le contour d'un sujet ne peut pas être produit en superposant deux layers par étalement d'objet.
• Dans MotionSpec, les animations de propriété pour une même propriété ne peuvent pas avoir de chevauchement temporel, mais peuvent se succéder ; la valeur finale de la première doit rejoindre la valeur initiale de la suivante. Le rythme, la boucle, l'orchestration et la texture se superposent. L'exportation de fichier n'hérite pas automatiquement de la stratégie de lecture en boucle du site.
• Les coordonnées des formes sont relatives à l'origine du sujet ; la position du texte correspond à la ligne de base gauche de la première ligne. Les polices système (system, mono) peuvent être utilisées directement ; une police fixe n'est nécessaire que pour une cohérence typographique exacte entre machines.
• Exemple minimal exécutable : atoms/example.html, tableau × décalage × translation × ressort.

2D : Livraison de fichiers de scène

Les commandes suivantes s'exécutent dans le répertoire motion-atoms/ décompressé ; la sortie s'écrit dans votre répertoire de travail. Avant l'exportation, vérifier si le navigateur local / FFmpeg est disponible, sans exiger ces outils lors d'une recherche de base.

node scripts/motion.mjs describe transition.slices
node scripts/motion.mjs scaffold transition.slices --out work/slices.scene.json --width 1920 --height 1080 --fps 30 --duration 60
node scripts/motion.mjs validate work/slices.scene.json
node scripts/motion.mjs frames work/slices.scene.json --out work/check --frames 0,20,40,59 --transparent
node scripts/motion.mjs render work/slices.scene.json --out work/slices.mov --transparent

Peut être utilisé directement avec une scène multi-atomes, par exemple :

node scripts/motion.mjs preview assets/examples/showcase.scene.json --out work/showcase.html
node scripts/motion.mjs breakdown assets/examples/showcase.scene.json --out work/showcase-breakdown.gif --title "Entête · Décomposition atomique"

preview produit un HTML, pas une vidéo. render peut sortir du MP4 (opaque), MOV / WebM (avec transparence) ; frames produit du PNG ; breakdown ajoute une frise temporelle des atomes en bas de l'image, et produit un GIF, MP4 ou WebM : avec une scène en entrée, il illustre ses propres animations ; avec un fichier de décomposition, il extrait l'extrait vidéo de référence pour la décomposition (voir Décomposition d'animations vidéo). verified: true prouve seulement la taille, le nombre d'images, la durée, etc., ne prouve pas la composition, le rythme ou l'occultation. Avant livraison, vérifier le résultat encodé et la lecture réelle selon Vérification visuelle, et préciser l'étendue réelle de la vérification. Retourner le chemin du fichier, le chemin de la scène, la fréquence d'images, la durée et la présence de canal alpha ; ces éléments n'ont pas de piste audio.

Limites des capacités

• La décomposition vidéo est réalisée par l'agent en utilisant les outils de lecture, d'extraction d'images et d'écoute de l'hôte ; le CLI du package ne contient pas de commande de reconnaissance vidéo. breakdown découpe l'extrait original selon le fichier de décomposition écrit par l'agent et dessine la frise temporelle des atomes en bas. Il peut analyser des mouvements hors du package, mais doit distinguer clairement ce qui est directement utilisable, partiellement approximatif ou à réaliser par l'hôte ; ne pas déduire le logiciel source, les plugins ou les paramètres précis à partir du rendu final. Les extraits originaux sont utilisés uniquement pour l'analyse, pas republiés comme ressource.
• La scène 2D ne contient que des nœuds text / path, pas d'image, vidéo, audio, group parent-enfant ni champ z-index. Les sorties de propriété, courbe et copie peuvent être appliquées par l'hôte sur des images ou vidéos ; les atomes géométriques ne traitent que des polylignes. L'hôte est responsable de la composition image/vidéo.
• Les transitions et textures peuvent s'appliquer au texte et aux formes ; la boîte englobante du texte est mesurée sur le rendu réel de la police. Les boucles et les battements ne lisent pas l'audio.
• Les exemples par défaut et le scaffold utilisent les polices système ; le package ne contient pas de police. Pour une cohérence entre machines, l'hôte fournit une police fixe sous licence, en déclarant le chemin et le hachage, et vérifie le rendu des glyphes.
• Il n'existe actuellement aucun atome 3D ; les scènes 3D sont à implémenter par l'hôte.
• La production de la vidéo complète continue d'utiliser le storyboard, le son, le montage et le flux de livraison de l'application appelante ; cette compétence n'impose pas d'hôte, de style visuel ou de transition uniforme.

Références et remerciements

Les premières réflexions sur l'indexation des animations du projet MotionFlux, auquel appartient ce package, ont été inspirées par le Motion Periodic Table de Kazuki Akamine. Merci pour l'inspiration dans l'organisation et la présentation des animations fondamentales. MotionFlux est un projet indépendant.