starrandy123/reanimate-video

¿Qué hace reanimate-video?

reanimate filma una página en vivo, la reconstruye en tu código, filma la copia y la compara, ronda tras ronda, hasta que los números coinciden. Su propio camino para una referencia de VIDEO funciona, pero una primera ejecución real (6 nov 2026, una cuenta regresiva gratuita de stock) encontró siete problemas, cada uno silencioso o lento. Este kit los elimina y añade la medición que un video necesita, porque un video no tiene página que inspeccionar.

Requiere reanimate: npx skills add NiazMorshed2007/reanimate -g, luego ejecuta bash <reanimate>/scripts/setup.sh. Después rv setup una vez (las herramientas de medición numpy y opencv, en un Python propio del kit: el python3 que tienen la mayoría de Macs se niega a una instalación global de pip). Verifica con rv doctor. (rv es el archivo rv de este skill.)

Los problemas, y qué hace el kit

	Problema (reanimate tal como viene, desde un video)	El kit
1	un video de 10 bits (ProRes, la mayoría del metraje de stock) se convierte en PNG de 16 bits, 10 MB por fotograma	rv ref escribe fotogramas de 8 bits
2	las hojas incluyen cada fotograma en una página y se agotan con fotogramas de 1080p	las hojas vienen de copias de 480 px
3	una copia abierta como file:// no puede cargar sus módulos ES: reanimate graba una página en blanco sin decir palabra	rv serve + rv round rechaza file://, y cada grabación se verifica: BLANK o FROZEN detiene la ronda
4	el primer fotograma de la copia se graba antes de su primer fotograma de animación	la plantilla dibuja al cargar
5	comparar 300 fotogramas a 1080p lleva minutos por ronda	las rondas comparan a la mitad del tamaño, de la misma forma cada ronda, nítido y borroso 4 px
6	un video no tiene pistas de elementos ni fotogramas clave que leer	measure/: centro, flotación, giro, arcos, fundido, tamaño, segmentos, tipografía, a partir de los píxeles
7	el reloj virtual suma sus ticks en punto flotante y puede saltarse el último tick de un fotograma: ese fotograma muestra la página un tick antes (17 ms a su valor predeterminado de 60 Hz)	una copia en la plantilla se graba llamando a su draw exactamente en t = k / fps; otras páginas a un tick de 240 Hz
8	(las propias herramientas del kit) numpy y opencv no se pueden instalar con pip en el python3 que tienen la mayoría de Macs (Homebrew, PEP 668)	rv setup crea su propio Python (.venv); rv measure <tool> ejecuta cada herramienta con él

tests/run.sh reproduce cada problema en reanimate tal como viene (ROJO), luego ejecuta la forma del kit (VERDE); tests/e2e.sh ejecuta todo el camino en un caso pequeño (una copia QUE ES la referencia da 0 %; un color incorrecto plantado da peor). Ejecuta ambos después de cualquier cambio en el kit.

Antes que nada: ¿se puede copiar este video?

Copia solo la APARIENCIA de un video que el usuario pueda copiar: propio, o una licencia gratuita que permita cambios (Licencia Estándar de Videezy: gratis para uso personal y comercial con el crédito "Videezy.com"; licencia gratuita de Mixkit; licencias de Pexels y Pixabay). Escribe la licencia, su enlace de origen y la fecha en <work>/LICENSE.md, y pon el crédito en pantalla donde sea que se muestre el video (<work>/film.json "credit"). El metraje de un juego se copia solo por su MOVIMIENTO (valor predeterminado de reanimate): la apariencia (las palabras, la fuente, los colores, el arte) sigue siendo propia del usuario.

Los pasos

1. rv doctor
2. rv ref <video> <work> (añade --start/--end para una parte, --crop x,y,w,h para un elemento). LEE CADA HOJA en <work>/ref/sheets y las de velocidad completa en <work>/ref/sheets_full_rate. Escribe qué se mueve, y cuándo, antes de medir.
3. Mide cada elemento en movimiento con la herramienta para su tipo de movimiento (measure/README.md; ejecuta cada una como rv measure <tool> ...), en <work>/ref/frames. Prueba cada herramienta en el elemento antes de confiar en ella (su --sheet, o un segundo fotograma que debe coincidir).
4. <work>/spec.md: una fila por elemento y propiedad: inicio, duración, desde -> hasta, easing o la tabla medida, y el archivo del que proviene el número. Una fila con "?" no está terminada.
5. Construye: copia template/ en el proyecto. animation.js exporta draw(ctx, t) (una función pura del tiempo) y DURATION; pon cada número medido en un módulo con el archivo del que proviene. El lienzo es del tamaño de la referencia (<work>/run.json).
6. rv serve <directorio de copia> luego rv round 1 <work> --url http://127.0.0.1:8765/index.html. Lee <work>/compare-1/report.md y sus hojas (compare-1/sheets): los números indican qué tan lejos está, las hojas indican qué. Arregla solo la DIFERENCIA MÁS GRANDE, luego rv round 2 .... Detente en 5 rondas; lo que aún falla se reporta con su número y su razón.
7. rv rounds <work> (la tabla) y rv film <work> (los clips del proceso, 1080x1920: el video, sus fotogramas, cada ronda con lo que difiere en rojo y su número, los números cayendo, el resultado final sincronizado).
8. Informe: qué se copió y con qué fidelidad, los archivos, la tabla de rondas, qué quedó diferente y por qué.

Qué se copia de un video, y qué no

Se copia bien, mediante medición: formas, texto, anillos y arcos que giran, marcas y segmentos que se iluminan, fundidos y destellos, crecimiento y deslizamientos, el orden y la temporización de todo. Mídelos con measure/ y refabrica como formas.

NO se copia midiendo: una escena renderizada en 3D, metraje, partículas colocadas al azar, un fondo cuyas piezas parpadean y cambian. measure/spin.py lo dice con su ACUERDO (por debajo de aproximadamente 0.3 la banda hace más que girar). El 6 nov 2026 el túnel de la cuenta regresiva marcó 0.16-0.6: tres rondas de la copia lo dejaron como una mancha (76 % -> 48 % de píxeles diferentes) mientras su HUD coincidía. Entonces: copia el elemento en primer plano, dale al fondo la propia escena del usuario (de un juego, de una página), y compara solo donde está el elemento, o elige una referencia cuyo fondo sea liso. Nunca llames perfecta a una copia así.

Barras de aprobación (las propias de reanimate, leídas para un video)

• Temporización: cada evento (la subida y bajada al 10/50/90 % de un elemento, measure/curve.py) dentro de 0.08 s de la referencia.
• Easing: la curva medida de la copia dentro del 5 % del recorrido (diferencia absoluta media) de la referencia.
• Píxeles: diferencia media máxima del 2 % para una copia fiel a píxel (solo en una referencia de la cual el usuario pueda copiar la apariencia, y solo donde el fondo sea parte de lo copiado); reporta el número nítido junto al borroso.
• Cada grabación de ronda pasó la guardia (sin fotogramas en blanco o congelados).

Errores aprendidos

• Un solo flotante para todo un diseño es una hipótesis: ajusta el centro de CADA anillo en los fotogramas originales (polar.py fit) antes de estabilizar nada (stabilize.py). El 6 nov 2026 (Videezy 40314) el primer ajuste se fijó en el anillo más brillante, el blanco, que se desplaza 8.5 px; el anillo en 319 se mueve 0.1 px. Tres rondas flotaron todo el HUD y lo midieron en fotogramas estabilizados por la capa equivocada; la ronda 4, con solo el anillo blanco flotando y todo medido de nuevo alrededor del centro fijo, pasó de 12.6 % a 9.3 %.

• Prueba un cambio en unos pocos fotogramas antes de gastar una ronda: rv still <work> --url ... --frames 0,60,150 y compara esos fotogramas con compare.ts contra el código de la última ronda. El 6 nov dos de tres cambios candidatos ayudaron (10.0 -> 9.5 -> 8.9 %) y uno lo empeoró (13.3 %): nunca se convirtió en ronda.

• measure/radial_diff.py muestra DÓNDE una ronda de diseño está mal, radio por radio; solo lee partes fijas: un anillo flotante se difumina en sus medianas, así que juzga por compare.ts cuando no coincidan.

• Un anillo fijo es brillante en CADA ángulo: el percentil 30 sobre el ángulo lo conserva y descarta lo que se mueve: la forma de leer los radios y anchos reales de los anillos.

• rv film recorta al sujeto (film.json "crop"): una muestra muestra su sujeto grande.

• Un centro encontrado a partir de "los anillos más nítidos" se desvía cuando hay una gran forma blanca en el medio: usa un pequeño punto de referencia brillante en varios fotogramas, y confía en él solo cuando los fotogramas coinciden (measure/polar.py landmark).

• Un resplandor engrosa cada borde: elige la tipografía midiendo (measure/fontmatch.py), no a ojo.

• Un zoom o giro medido es una hipótesis hasta que una segunda vista coincide: el 6 nov una correlación log-polar reportó un zoom del 3 %/s que una tira de radio contra tiempo mostró que no existía, y la copia redujo su túnel por ello durante una ronda.

• Un área crece como el tamaño al cuadrado: el tamaño de un número es sqrt(área blanca sobre los fotogramas antes de él), o su caja.

• El metraje de stock gratuito suele ser 4K ProRes, 1-2 GB por clip: léelo a 1920 de ancho (rv ref lo hace), conserva el original como registro, y cuida el disco.