Motion Designer

Que fait Motion Designer ?

La vidéo générée par agent a un look, et ce look vient des valeurs par défaut : chaque élément apparaît en fondu sur ~24 px avec power3.out pendant 0,4 à 0,6 s, décalé de 0,08 s, puis plus rien ne bouge. Le guide d'animation d'HyperFrames lui-même écrit cela comme valeur par défaut (gsap.defaults({ duration: 0.6, ease: "power3.out" })). Ce skill remplace ces valeurs. En cas de conflit avec les chiffres d'animation d'un autre skill, celui-ci l'emporte ; prenez la structure de ces skills, jamais les courbes ni le timing.

Vous êtes le motion designer. Décidez ce que la pièce doit transmettre, puis choisissez. Deux pièces ne doivent pas avoir les mêmes mouvements.

Boucle de travail

1. Lisez LIBRARY.md (à côté de ce fichier) : registres, courbes, ressorts, timings, dispositifs, traitements de texte.
2. Choisissez un registre pour la pièce (technique, éditorial, premium, expressif, ludique, calme). Mélanger est possible ; un moment expressif dans une pièce technique est normal.
3. Pour chaque élément, décidez ce que son mouvement est avant de décider comment il ease (section 6 de LIBRARY) : cette ligne apparaît-elle d'un coup, en frappe, règle son tracking, ou est-elle projetée ? La plupart des textes d'appui apparaissent d'un coup (cut).
4. Intégrez motion-kit.js dans la composition (assets/motion-kit.js, chargé après GSAP) et créez les animations avec.
5. Parcourez le résultat image par image et exécutez les vérifications dans la section 8 de LIBRARY.

Règles

• Pas de préréglages nommés comme valeurs par défaut. Ni power1 à power4, ni CSS ease, ni une valeur par défaut du framework. Chaque courbe est choisie pour le mouvement : MotionKit.curve('kit.land'), une courbe système (m3.emphasizedDecelerate, carbon.expressive.entrance), ou votre propre MotionKit.bez(x1, y1, x2, y2).
• Une courbe par propriété. x et y peuvent différer (arc), de sorte que le trajet se courbe comme un objet lancé.
• Durée basée sur la distance et le poids, pas une habitude de 0,3 à 0,6 s : MotionKit.dur(px, weight).
• Les sorties sont plus rapides que les entrées (environ 0,65x) et accélèrent en sortant (kit.leave, exitTo).
• Un élément principal et ses réactions, avec des décalages irréguliers (MotionKit.react(i) : 0, 4, 9, 15, 22, 30 images), jamais un stagger linéaire.
• Les temps d'arrêt restent vivants (un lent mouvement de caméra, un wiggle sur un conteneur, un détail vivant) sauf si l'immobilité est intentionnelle.
• Texte : le texte écrit (une citation, une invite, une ligne de terminal) apparaît caractère par caractère (typeOn) ; les autres textes apparaissent d'un coup (cut) ou règlent leur tracking (trackIn). Les apparitions masquées par le bas et les flous d'entrée sont les mouvements les plus surutilisés dans la vidéo d'agent ; utilisez-les en dernier recours.
• Pas de look IA : tout en fondu, texte flou d'entrée, orbes lumineux flottants, texte scintillant. Le flou appartient aux mouvements rapides (flou de mouvement au rendu), pas à l'apparition.
• Retenue. Un dispositif (plongée, bascule, pop, ressort, frappe de texte) mérite sa place en servant l'histoire. Environ une transition signature par pièce. Façonnez chaque mouvement avec soin ; utilisez les dispositifs avec parcimonie.
• Le dépassement est un choix, pas une garniture. Les pièces éditoriales et produits utilisent généralement des courbes de décélération et des ressorts avec amortissement 1. Les rebonds semblent bon marché quand ils sont partout.

Le kit (motion-kit.js)

Seek-safe : tout est fromTo sur une timeline en pause, rien ne lit l'image précédente, donc chaque image est rendue à l'identique que vous lisiez ou parcouriez.

Appel	Ce qu'il fait
curve(name), bez(x1, y1, x2, y2)	toutes les courbes de LIBRARY par nom, ou votre propre bézier
dur(px, weight)	durée basée sur la distance et le poids (0.7 léger, 1 normal, 1.35 lourd)
react(i)	décalage de réaction irrégulier pour le i-ème suivant
arc(tl, el, from, to, at)	trajet courbe (x et y sur des courbes différentes)
anticipate(tl, el, prop, from, to, at)	petit contre-mouvement, puis le mouvement
drag(tl, child, prop, lagPx, at, parentDur)	l'enfant suit son parent avec retard et se stabilise en dernier
exitTo(tl, el, to, at)	sortie plus rapide et accélérée
spring({ response, damping })	ressort physique ; retourne { ease, duration }, transform uniquement
cut, typeOn, trackIn, scramble, wipe, revealWords, revealLines, textRange	traitements de texte
wiggle, withBounce, loop, ramp, controller + link	outils After Effects : wiggle avec seed, rebond inertiel, loopOut, time remap, null + pick-whip
grid(bpm)	temps de battement, pour les phrases qui commencent sur la musique

<script src="assets/gsap.min.js"></script>
<script src="assets/motion-kit.js"></script>
<script>
  const { C, F, curve, dur, react, arc, cut, trackIn } = MotionKit;
  const tl = gsap.timeline({ paused: true });
  cut(tl, '#sub', 0.6);                                   // le texte d'appui arrive simplement
  trackIn(tl, '#title', 0.2, { from: '0.3em' });          // le titre règle son tracking
  ['#a', '#b', '#c'].forEach((el, i) =>                   // un élément principal et ses réactions, lancés sur des arcs
    arc(tl, el, { x: 900, y: 80 }, { x: 0, y: 0 }, 1.1 + react(i)));
  window.__timelines = window.__timelines || {};
  window.__timelines['root'] = tl;
</script>

Les courbes sont de simples cubic-beziers, donc les mêmes nombres fonctionnent comme cubic-bezier() en CSS, un graphique de vitesse dans After Effects ou les poignées de courbe F de Blender (section 7 de LIBRARY).