kinqsradio/motion-match

Motion match

Utilisez ceci lorsque l'utilisateur pointe du doigt quelque chose qui bouge et souhaite que le nôtre bouge de la même manière, ou veut une preuve que c'est le cas. Le résultat est du code, des chiffres et des feuilles de calcul, jamais "ça a l'air à peu près correct".

Les droits avant tout

Décidez qui possède la référence avant de capturer quoi que ce soit, et indiquez-le dans votre premier message.

Référence	Ce que vous pouvez faire
Notre propre travail, ou un travail que l'utilisateur possède ou a sous licence	Toute fidélité, y compris au niveau pixel
Le site ou la vidéo de quelqu'un d'autre	Mesurer uniquement le timing, l'easing, l'ordre et la distance, sous forme de spécification écrite, et construire avec notre propre design

Pour le travail d'autrui :

• Ne copiez jamais leur code, shaders, assets, polices, marque, mise en page ou contenu. Ne recréez jamais un produit réel comme s'il était le nôtre.
• Une correspondance parfaite au pixel près est exclue, quelle que soit la formulation de la demande. Proposez plutôt un niveau de mouvement et expliquez pourquoi : "Je peux faire correspondre la façon dont ça bouge avec votre design. Copier leur look reprendrait leur travail de conception, donc je ne le ferai pas."
• Les murs de connexion, paywalls, vérifications de bots et DRM restent fermés. Respectez les conditions du site et capturez uniquement ce qu'un visiteur normal voit. Lorsqu'une page est inaccessible, demandez un enregistrement d'écran. Ne téléchargez jamais la vidéo de quelqu'un d'autre.
• Les captures brutes restent dans un dossier local ignoré. Elles ne sont jamais commitées, publiées ou utilisées dans un livrable, et elles sont supprimées lorsque l'utilisateur le choisit. Seuls les chiffres écrits sont conservés. Indiquez à l'utilisateur où elles se trouvent.

Si l'utilisateur déclare posséder une référence et que rien ne le contredit, croyez-le sur parole et enregistrez-le dans le cahier des charges. "Rendez-le identique au site de cette entreprise" n'est pas une licence. Utilisez --rights third-party chaque fois que la propriété n'est pas claire.

Fidélité

Indiquez le niveau dans votre premier message ; il détermine ce que vous vérifiez.

Niveau	Doit correspondre	Peut différer
Mouvement (par défaut)	Déclenchement, ordre, décalage, timing de chaque étape à 80 ms près, easing, direction et distance	Copie, couleurs, polices, images, mise en page, marque
Pixel, propre ou sous licence uniquement	Tout ce qui précède, plus les polices, tailles, couleurs, espacement et assets ; écart moyen au maximum 2%	Rien que l'utilisateur n'a pas demandé de modifier
Mixte	La partie assortie, à l'un des niveaux ci-dessus	Les ajouts, qui ne doivent pas casser le mouvement assorti

Ne faites correspondre que ce que l'utilisateur a nommé : une section, un widget ou une plage temporelle.

Méthode

Travaillez dans output/motion-match/<name>/, ou un autre dossier ignoré par Git. Gardez chaque itération. Passez --playwright et --chrome, ou définissez PLAYWRIGHT_CORE et CHROME_PATH. Node 22, un pilote de navigateur existant et un navigateur existant sont requis ; ffmpeg est nécessaire pour la vidéo. Rien n'est installé.

1. Périmètre. Rédigez la cible, la destination dans le projet, les droits et la fidélité.

2. Capturez la référence avec scripts/capture.mjs, ou scripts/frames.mjs pour une vidéo fournie. Donnez-lui les droits que vous avez décidés :

   node <skill>/scripts/capture.mjs --url <page> --out <dir>/ref --rights third-party \
     --selector .hero --track ".title, .cta" --duration 2000
   

3. Lisez chaque feuille. Exécutez scripts/sheet.mjs filmstrip, puis ouvrez chaque feuille. L'easing se trouve dans les images du milieu.

4. Rédigez le cahier des charges. Exécutez scripts/spec.mjs draft : une ligne par élément par propriété. Un ? signifie que vous n'avez pas fini de lire les images, et la vérification refusera de s'exécuter tant que chacun n'est pas remplacé.

5. Construisez dans la stack propre du projet, avec son propre design pour une référence tierce.

6. Filmez le nôtre de la même manière. Réutilisez la commande de référence, en changeant uniquement --url, --out et --rights. Des réglages différents mesurent votre configuration, et compare.mjs les fera échouer.

7. Comparez. Exécutez scripts/spec.mjs check, scripts/compare.mjs et scripts/sheet.mjs compare. Lisez chaque feuille.

8. Changez la plus petite chose que les chiffres pointent du doigt, une cause par itération, puis revenez à l'étape 6.

9. Arrêtez après 5 itérations si une ligne échoue encore, et rapportez-la avec ses chiffres et la raison. Laissez les seuils tels quels.

10. Rapportez de manière à ce que le message se suffise à lui-même : les droits et la fidélité ; ce qui a été assorti et ajouté ; les fichiers et comment déclencher le mouvement ; un tableau de la dernière itération ; les chemins des feuilles ; chaque écart résiduel avec un chiffre et une raison ; et où se trouve toute capture brute tierce.

Échec traité

L'itération 1 de trois cartes échoue :

.card-1 opacity  start +300 ms  end +300 ms  easing RMSE 0.0003  FAIL
.card-2 opacity  start +300 ms  end +300 ms  easing RMSE 0.0055  FAIL
gaps             116.7 against 116.7         pass

Chaque ligne a le même retard, et la courbe et les écarts sont corrects, donc la seule cause est le délai de base. Changez ce seul nombre et refilmez. Aligner les images ferait passer cette ligne mais expédierait une animation en retard de 300 ms, c'est pourquoi compare.mjs refuse --auto-align entre deux captures.

Pièges

• Viewport ou recadrage différent entre les deux côtés : corrigez la capture avant de toucher au code.
• Juger à partir de la première et de la dernière image : lisez celles du milieu.
• Polices : une police de secours change chaque pixel des images. En fidélité mouvement, lisez les lignes de timing et ignorez les pixels de texte.
• Page déjà occupée contre un démarrage à froid : utilisez le même --wait-before des deux côtés.
• Mouvement piloté par le défilement suit la position de défilement, pas le temps. Utilisez les mêmes --scroll-steps et --scroll-ms, et comparez par scrollY.
• Ressorts : easing.mjs rapporte le dépassement et la raideur et l'amortissement ajustés. Réglez par dépassement et temps de stabilisation.
• Les enregistrements d'écran portent un curseur, des éléments de navigateur et du bruit de compression. Recadrez-les et augmentez légèrement --activity-threshold.
• Contenu Canvas : utilisez l'horloge virtuelle et la même --seed des deux côtés. Un contenu aléatoire sur l'horloge réelle mesure la machine.
• Les animations CSS rapportent linear dans timing.easing. Le véritable easing se trouve sur chaque image clé.

Limites

Utilisez orbyn-ui-design pour décider quel mouvement un produit devrait avoir, technical-illustration pour les films et product-illustration pour les fausses UI. Une vidéo suit la règle du code uniquement : étudiez une référence pour la technique, et ne copiez jamais ses images.

À lire si nécessaire

• Pour les recettes de capture, déclencheurs et fichiers de sortie, lisez capture.
• Pour le format du cahier des charges et comment lire les images, lisez analysis.
• Pour l'easing, les ressorts et les modèles de construction, lisez implementation.
• Pour les critères de réussite et ce que signifie chaque échec, lisez verify.