reanimate-video

O que reanimate-video faz?

reanimate filma uma página ao vivo, reconstrói no seu código, filma a cópia e compara, rodada após rodada, até os números se igualarem. Seu próprio caminho para uma referência de VÍDEO funciona, mas a primeira execução real (6 de novembro de 2026, uma contagem regressiva gratuita) encontrou sete armadilhas, cada uma silenciosa ou lenta. Este kit as remove e adiciona a medição que um vídeo precisa, porque um vídeo não tem página para inspecionar.

Requer reanimate: npx skills add NiazMorshed2007/reanimate -g, depois execute bash <reanimate>/scripts/setup.sh. Depois, rv setup uma vez (as ferramentas de medição numpy e opencv, em um Python próprio do kit: o python3 que a maioria dos Macs tem se recusa a um pip install global). Verifique com rv doctor. (rv é o arquivo rv desta skill.)

As armadilhas, e o que o kit faz

	Armadilha (reanimate como vem, a partir de um vídeo)	O kit
1	um vídeo de 10 bits (ProRes, a maioria dos vídeos prontos) vira PNGs de 16 bits, 10 MB por quadro	rv ref escreve quadros de 8 bits
2	folhas de estilo embutem cada quadro em uma página e estouram o tempo limite com quadros 1080p	as folhas vêm de cópias com 480 px
3	uma cópia aberta como file:// não carrega seus módulos ES: reanimate grava uma página em branco sem aviso	rv serve + rv round recusa file://, e cada gravação é verificada: BRANCO ou CONGELADO interrompe a rodada
4	o primeiro quadro da cópia é gravado antes de seu primeiro quadro de animação	o modelo desenha ao carregar
5	comparar 300 quadros em 1080p leva minutos por rodada	as rodadas comparam no tamanho médio, da mesma forma todas as rodadas, nítido e desfocado 4 px
6	um vídeo não tem trilhas de elemento ou quadros-chave para ler	measure/: centro, flutuação, rotação, arcos, fade, tamanho, segmentos, tipo de letra, a partir dos pixels
7	o relógio virtual soma seus ticks em ponto flutuante e pode pular o último tick de um quadro: esse quadro mostra a página um tick adiantado (17 ms em sua frequência padrão de 60 Hz)	uma cópia no modelo é gravada chamando seu draw exatamente em t = k / fps; outras páginas a 240 Hz
8	(ferramentas próprias do kit) numpy e opencv não podem ser instalados via pip no python3 que a maioria dos Macs tem (Homebrew, PEP 668)	rv setup cria o próprio Python do kit (.venv); rv measure <ferramenta> executa cada ferramenta com ele

tests/run.sh reproduz cada armadilha no reanimate como vem (VERMELHO), depois executa do jeito do kit (VERDE); tests/e2e.sh executa todo o caminho em um caso pequeno (uma cópia que É a referência lê 0%; uma cor errada plantada lê pior). Execute ambos após qualquer alteração no kit.

Antes de tudo: este vídeo pode ser copiado?

Copie apenas a APARÊNCIA de um vídeo que o usuário pode copiar: o próprio, ou uma licença gratuita que permita alterações (Licença Padrão da Videezy: gratuita para uso pessoal e comercial com o crédito "Videezy.com"; licença gratuita da Mixkit; licenças da Pexels e Pixabay). Escreva a licença, seu link de origem e a data em <trabalho>/LICENSE.md, e coloque o crédito na tela onde quer que o vídeo seja mostrado (<trabalho>/film.json "credit"). As imagens de um jogo são copiadas apenas pelo seu MOVIMENTO (padrão do reanimate): a aparência — palavras, fonte, cores, arte — permanece própria do usuário.

Os passos

1. rv doctor
2. rv ref <video> <trabalho> (adicione --start/--end para uma parte, --crop x,y,w,h para um elemento). LEIA CADA FOLHA em <trabalho>/ref/sheets e as de taxa completa em <trabalho>/ref/sheets_full_rate. Escreva o que se move, e quando, antes de medir.
3. Meça cada elemento em movimento com a ferramenta adequada ao seu tipo de movimento (measure/README.md; execute cada um como rv measure <ferramenta> ...), em <trabalho>/ref/frames. Prove cada ferramenta no elemento antes de confiar nela (sua --sheet, ou um segundo quadro que deve concordar).
4. <trabalho>/spec.md: uma linha por elemento por propriedade: início, duração, de -> para, easing ou a tabela medida, e o arquivo de onde o número veio. Uma linha com "?" não está concluída.
5. Construa: copie template/ para o projeto. animation.js exporta draw(ctx, t) (uma função pura do tempo) e DURATION; coloque cada número medido em um módulo com o arquivo de onde veio. O canvas tem o tamanho da referência (<trabalho>/run.json).
6. rv serve <diretório da cópia> depois rv round 1 <trabalho> --url http://127.0.0.1:8765/index.html. Leia <trabalho>/compare-1/report.md e suas folhas (compare-1/sheets): os números dizem o quão distante, as folhas dizem o quê. Corrija apenas a MAIOR diferença, depois rv round 2 .... Pare em 5 rodadas; o que ainda falhar é relatado com seu número e sua razão.
7. rv rounds <trabalho> (a tabela) e rv film <trabalho> (os clipes do processo, 1080x1920: o vídeo, seus quadros, cada rodada com o que difere em vermelho e seu número, os números caindo, o final sincronizado).
8. Relatório: o que foi copiado e em qual fidelidade, os arquivos, a tabela de rodadas, o que ficou diferente e por quê.

O que copia de um vídeo, e o que não copia

Copia bem, por medição: formas, texto, anéis e arcos que giram, ticks e segmentos que acendem, fades e flashes, crescimento e deslizamento, a ordem e o tempo de tudo isso. Meça-os com measure/ e reconstrua-os como formas.

NÃO copia por medição: uma cena renderizada em 3D, filmagem, partículas colocadas aleatoriamente, um fundo cujos pedaços piscam e mudam. measure/spin.py diz isso com seu ACORDO (abaixo de cerca de 0.3 a banda faz mais do que girar). Em 6 de novembro de 2026, o túnel da contagem regressiva leu 0.16-0.6: três rodadas da cópia o deixaram como um borrão (76% -> 48% dos pixels diferentes) enquanto seu HUD correspondia. Então: copie o elemento na frente, dê ao fundo a própria cena do usuário (de um jogo, de uma página), e compare apenas onde o elemento está, ou escolha uma referência cujo fundo seja simples. Nunca chame tal cópia de perfeita em pixels.

Critérios de aprovação (próprios do reanimate, lidos para um vídeo)

• Temporização: cada evento (subida e descida de 10/50/90% de um elemento, measure/curve.py) dentro de 0,08 s da referência.
• Easing: a curva medida da cópia dentro de 5% do percurso (diferença absoluta média) da referência.
• Pixels: diferença média de no máximo 2% para uma cópia fiel em pixels (apenas em uma referência da qual o usuário possa copiar a aparência, e apenas onde o fundo faz parte do que foi copiado); relate o número nítido ao lado do desfocado.
• Cada gravação de rodada passou pela verificação (sem quadros em branco ou congelados).

Armadilhas aprendidas

• Um único float para um design inteiro é uma hipótese: ajuste o centro de CADA anel nos quadros originais (polar.py fit) antes de estabilizar qualquer coisa (stabilize.py). Em 6 de novembro de 2026 (Videezy 40314) o primeiro ajuste travou no anel mais brilhante, o branco, que deriva 8,5 px; o anel em 319 se move 0,1 px. Três rodadas flutuaram todo o HUD e mediram em quadros estabilizados pela camada errada; rodada 4, com apenas o anel branco flutuando e tudo medido novamente em torno do centro fixo, foi de 12,6% -> 9,3%.

• Tente uma mudança em alguns quadros antes de gastar uma rodada: rv still <trabalho> --url ... --frames 0,60,150 e compare esses quadros com compare.ts em relação ao código da última rodada. Em 6 de novembro, duas de três mudanças candidatas ajudaram (10,0 -> 9,5 -> 8,9%) e uma piorou (13,3%): nunca se tornou uma rodada.

• measure/radial_diff.py mostra ONDE um design de rodada está errado, raio por raio; ele lê apenas partes paradas — um anel flutuante borra em suas medianas, então julgue por compare.ts quando discordarem.

• Um anel parado é brilhante em TODOS os ângulos: o percentil 30 sobre o ângulo o mantém e descarta o que se move — a maneira de ler os raios e larguras verdadeiros dos anéis.

• rv film corta para o assunto (film.json "crop"): uma demonstração mostra seu assunto grande.

• Um centro encontrado a partir dos "anéis mais nítidos" vagueia quando uma grande forma branca está no meio: use um pequeno ponto de referência brilhante em vários quadros, e confie nele apenas quando os quadros concordarem (measure/polar.py landmark).

• Um brilho engrossa cada borda: escolha o tipo de letra medindo (measure/fontmatch.py), não a olho.

• Um zoom ou giro medido é uma hipótese até que uma segunda visão concorde: em 6 de novembro, uma correlação log-polar relatou um zoom de 3%/s que uma faixa raio-por-tempo mostrou que não existia, e a cópia encolheu seu túnel por uma rodada.

• Uma área cresce como tamanho ao quadrado: o tamanho de um número é sqrt(área branca acima dos quadros antes dele), ou sua caixa.

• Imagens gratuitas prontas são frequentemente 4K ProRes, 1-2 GB por clipe: leia-as com 1920 de largura (rv ref faz), mantenha o original para registro, e fique de olho no disco.