starrandy123/reanimate-video

Que fait reanimate-video ?

reanimate filme une page en direct, la reconstruit dans votre code, filme la copie et la compare, tour après tour, jusqu'à ce que les chiffres correspondent. Son propre chemin pour une référence VIDÉO fonctionne, mais un premier vrai essai (6 novembre 2026, un compte à rebours libre de droits) a rencontré sept pièges, chacun silencieux ou lent. Ce kit les élimine et ajoute les mesures dont une vidéo a besoin, car une vidéo n'a pas de page à inspecter.

Nécessite reanimate : npx skills add NiazMorshed2007/reanimate -g, puis une fois bash <reanimate>/scripts/setup.sh. Ensuite rv setup une fois (les outils de mesure numpy et opencv, dans un Python dédié au kit : le python3 de la plupart des Mac refuse une installation globale pip). Vérifiez avec rv doctor. (rv est le fichier rv de cette compétence.)

Les pièges, et ce que le kit fait

	Piège (reanimate tel quel, à partir d'une vidéo)	Le kit
1	une vidéo 10 bits (ProRes, la plupart des plans libres de droits) devient des PNG 16 bits, 10 Mo par image	rv ref écrit des images 8 bits
2	les feuilles intègrent chaque image en ligne dans une page et expirent avec des images 1080p	les feuilles viennent de copies en 480 px
3	une copie ouverte en file:// ne peut pas charger ses modules ES : reanimate enregistre une page blanche sans un mot	rv serve + rv round refuse file://, et chaque enregistrement est vérifié : BLANK ou FROZEN arrête le tour
4	la première image de la copie est enregistrée avant sa première image d'animation	le modèle dessine au chargement
5	comparer 300 images en 1080p prend des minutes par tour	les tours comparent à demi-taille, de la même façon à chaque tour, nets et flous 4 px
6	une vidéo n'a pas de pistes d'éléments ou d'images clés à lire	measure/ : centre, flottant, rotation, arcs, fondu, taille, segments, police, à partir des pixels
7	l'horloge virtuelle somme ses ticks en virgule flottante et peut sauter le dernier tick d'une image : cette image montre la page un tick trop tôt (17 ms à 60 Hz par défaut)	une copie sur le modèle est enregistrée en appelant son draw exactement à t = k / fps ; les autres pages à un tick de 240 Hz
8	(les propres outils du kit) numpy et opencv ne peuvent pas être installés par pip dans le python3 que la plupart des Mac ont (Homebrew, PEP 668)	rv setup crée le propre Python du kit (.venv) ; rv measure <outil> exécute chaque outil avec celui-ci

tests/run.sh reproduit chaque piège sur reanimate tel quel (ROUGE), puis exécute la méthode du kit (VERT) ; tests/e2e.sh exécute tout le chemin sur un petit cas (une copie qui EST la référence lit 0 % ; une couleur erronée plantée lit moins bien). Exécutez les deux après toute modification du kit.

Avant tout : cette vidéo peut-elle être copiée ?

Copiez uniquement le LOOK d'une vidéo que l'utilisateur peut copier : la sienne, ou une licence libre qui autorise les modifications (Licence Standard Videezy : gratuite pour usage personnel et commercial avec le crédit "Videezy.com" ; licence gratuite Mixkit ; licences Pexels et Pixabay). Écrivez la licence, son lien source et la date dans <work>/LICENSE.md, et placez le crédit à l'écran partout où la vidéo est montrée (<work>/film.json "credit"). Une séquence de jeu est copiée uniquement pour son MOUVEMENT (par défaut de reanimate) : le look – les mots, la police, les couleurs, l'art – reste propre à l'utilisateur.

Les étapes

1. rv doctor
2. rv ref <vidéo> <work> (ajoutez --start/--end pour une partie, --crop x,y,w,h pour un élément). LISEZ CHAQUE FEUILLE dans <work>/ref/sheets et celles en plein débit dans <work>/ref/sheets_full_rate. Écrivez ce qui bouge, et quand, avant de mesurer.
3. Mesurez chaque élément mobile avec l'outil adapté à son type de mouvement (measure/README.md ; exécutez chacun comme rv measure <outil> ...), sur <work>/ref/frames. Prouvez chaque outil sur l'élément avant de lui faire confiance (sa --sheet, ou une deuxième image qui doit être d'accord).
4. <work>/spec.md : une ligne par élément et par propriété : début, durée, de -> vers, easing ou tableau mesuré, et le fichier d'où vient le nombre. Une ligne avec un "?" n'est pas terminée.
5. Construction : copiez template/ dans le projet. animation.js exporte draw(ctx, t) (une fonction pure du temps) et DURATION ; mettez chaque nombre mesuré dans un module avec le fichier d'origine. Le canvas a la taille de la référence (<work>/run.json).
6. rv serve <rép copy> puis rv round 1 <work> --url http://127.0.0.1:8765/index.html. Lisez <work>/compare-1/report.md et ses feuilles (compare-1/sheets) : les chiffres disent l'écart, les feuilles disent quoi. Corrigez uniquement la PLUS GRANDE différence, puis rv round 2 .... Arrêtez à 5 tours ; ce qui échoue encore est rapporté avec son chiffre et sa raison.
7. rv rounds <work> (le tableau) et rv film <work> (les clips du processus, 1080x1920 : la vidéo, ses images, chaque tour avec ce qui diffère en rouge et son chiffre, les chiffres qui baissent, le final synchronisé).
8. Rapport : ce qui a été copié et à quelle fidélité, les fichiers, le tableau des tours, ce qui est resté différent et pourquoi.

Ce qui se copie à partir d'une vidéo, et ce qui ne se copie pas

Se copie bien, par mesure : formes, texte, anneaux et arcs qui tournent, graduations et segments qui s'allument, fondus et flashs, croissance et glissements, l'ordre et le minutage de tout cela. Mesurez-les avec measure/ et reconstruisez-les en tant que formes.

Ne se copie PAS par mesure : une scène rendue en 3D, des séquences filmées, des particules placées aléatoirement, un fond dont les morceaux clignotent et changent. measure/spin.py le dit avec son ACCORD (en dessous d'environ 0.3 la bande fait plus que tourner). Le 6 novembre 2026, le tunnel du compte à rebours lisait 0.16-0.6 : trois tours de la copie l'ont laissé en trainée (76 % -> 48 % de pixels décalés) alors que son HUD correspondait. Ensuite : copiez l'élément au premier plan, donnez au fond la propre scène de l'utilisateur (d'un jeu, d'une page), et comparez seulement là où l'élément est, ou choisissez une référence avec un fond uni. N'appelez jamais une telle copie parfaite au pixel près.

Barres de réussite (propres à reanimate, lues pour une vidéo)

• Timing : chaque événement (montée et descente à 10/50/90 % d'un élément, measure/curve.py) à moins de 0,08 s de la référence.
• Easing : la courbe mesurée de la copie à moins de 5 % du trajet (différence absolue moyenne) de la référence.
• Pixels : écart moyen d'au plus 2 % pour une copie fidèle au pixel (uniquement sur une référence dont l'utilisateur peut copier le look, et seulement là où le fond fait partie de ce qui a été copié) ; rapportez le chiffre net à côté du chiffre flou.
• L'enregistrement de chaque tour a passé la garde (pas d'images blanches ou figées).

Pièges appris

• Un flottant pour tout un design est une hypothèse : ajustez le centre de CHAQUE anneau sur les images originales (polar.py fit) avant de stabiliser quoi que ce soit (stabilize.py). Le 6 novembre 2026 (Videezy 40314), le premier ajustement s'est verrouillé sur l'anneau le plus brillant, le blanc, qui dérive de 8,5 px ; l'anneau à 319 bouge de 0,1 px. Trois tours ont fait flotter tout le HUD et mesuré sur des images stabilisées par la mauvaise couche ; tour 4, avec seulement l'anneau blanc flottant et tout mesuré à nouveau autour du centre fixe, est passé de 12,6 % à 9,3 %.

• Essayez un changement sur quelques images avant d'investir un tour : rv still <work> --url ... --frames 0,60,150 et comparez ces images avec compare.ts par rapport au code du dernier tour. Le 6 novembre, deux des trois changements candidats ont aidé (10,0 -> 9,5 -> 8,9 %) et un a empiré (13,3 %) : il n'est jamais devenu un tour.

• measure/radial_diff.py montre OÙ le design d'un tour est décalé, rayon par rayon ; il ne lit que les parties fixes – un anneau flottant bave dans ses médianes, donc jugez par compare.ts quand ils sont en désaccord.

• Un anneau fixe est brillant à CHAQUE angle : le 30e percentile sur l'angle le garde et supprime ce qui bouge – la façon de lire les vrais rayons et largeurs des anneaux.

• rv film rogne sur le sujet (film.json "crop") : une vitrine montre son sujet en grand.

• Un centre trouvé à partir des "anneaux les plus nets" erre quand une grande forme blanche est au milieu : utilisez un petit repère brillant sur plusieurs images, et ne faites confiance que lorsque les images sont d'accord (measure/polar.py landmark).

• Une lueur épaissit chaque bord : choisissez la police par mesure (measure/fontmatch.py), pas à l'œil.

• Un zoom ou une rotation mesuré est une hypothèse jusqu'à ce qu'un deuxième point de vue soit d'accord : le 6 novembre, une corrélation log-polaire a rapporté un zoom de 3 %/s qu'une bande rayon-temps a montré inexistant, et la copie a rétréci son tunnel de cette valeur pendant un tour.

• Une zone croît comme la taille au carré : la taille d'un nombre est sqrt(zone blanche au-dessus des images avant lui), ou sa boîte.

• Les séquences libres de droits sont souvent en 4K ProRes, 1-2 Go par clip : lisez-les en 1920 de large (rv ref le fait), gardez l'original pour l'archive, et surveillez le disque.