starrandy123/reanimate-video

Was macht reanimate-video?

reanimate filmt eine Live-Seite, baut sie in deinem Code nach, filmt die Kopie und vergleicht, Runde für Runde, bis die Werte übereinstimmen. Der eigene Pfad für eine VIDEO-Referenz funktioniert zwar, aber ein erster echter Durchlauf (6. November 2026, ein kostenloser Stock-Countdown) traf auf sieben Fallstricke, die alle still oder langsam waren. Dieses Kit entfernt sie und fügt die Messmethoden hinzu, die ein Video braucht – denn ein Video hat keine Seite zum Inspizieren.

Erfordert reanimate: npx skills add NiazMorshed2007/reanimate -g, dann einmal bash <reanimate>/scripts/setup.sh. Danach rv setup einmalig (die Messwerkzeuge numpy und opencv in einem eigenen Python: das python3 der meisten Macs verweigert ein globales pip install). Prüfe mit rv doctor. (rv ist die rv-Datei dieses Skills.)

Die Fallstricke und was das Kit tut

	Fallstrick (reanimate wie ausgeliefert, von einem Video)	Das Kit
1	ein 10‑Bit-Video (ProRes, die meisten Stockaufnahmen) wird zu 16‑Bit-PNGs, 10 MB pro Frame	rv ref schreibt 8‑Bit-Frames
2	Sheets inline jeden Frame in einer Seite und laufen bei 1080p-Frames in ein Timeout	Sheets kommen von 480‑px-Kopien
3	eine Kopie, geöffnet als file://, kann ihre ES‑Module nicht laden: reanimate zeichnet eine leere Seite auf, ohne eine Meldung	rv serve + rv round verweigert file://, und jede Aufzeichnung wird geprüft: BLANK oder FROZEN stoppt die Runde
4	der erste Frame der Kopie wird aufgezeichnet, bevor der erste Animationsframe da ist	die Vorlage zeichnet beim Laden
5	300 Frames bei 1080p zu vergleichen dauert Minuten pro Runde	Runden vergleichen bei halber Größe, auf die gleiche Weise jede Runde, scharf und um 4 px verwischt
6	ein Video hat keine Element‑Tracks oder Keyframes zum Auslesen	measure/: Zentrum, Float, Drehung, Bögen, Verblassen, Größe, Segmente, Schriftart – aus den Pixeln
7	die virtuelle Uhr summiert ihre Ticks in Gleitkomma und kann den letzten Tick eines Frames überspringen: dieser Frame zeigt die Seite einen Tick zu früh (17 ms bei standardmäßigen 60 Hz)	eine Kopie auf der Vorlage wird aufgezeichnet, indem ihr draw exakt bei t = k / fps aufgerufen wird; andere Seiten bei 240 Hz-Tick
8	(die eigenen Werkzeuge des Kits) numpy und opencv können per pip nicht in das python3 installiert werden, das die meisten Macs haben (Homebrew, PEP 668)	rv setup erstellt ein eigenes Python (.venv); rv measure <werkzeug> führt jedes Werkzeug damit aus

tests/run.sh reproduziert jeden Fallstrick mit reanimate wie ausgeliefert (ROT) und dann mit dem Kit (GRÜN); tests/e2e.sh durchläuft den gesamten Pfad mit einem kleinen Fall (eine Kopie, die IDENTISCH mit der Referenz ist, zeigt 0 % Abweichung; eine eingebaute falsche Farbe zeigt eine schlechtere Abweichung). Führe beide nach jeder Änderung am Kit aus.

Bevor es losgeht: Darf dieses Video kopiert werden?

Kopiere nur das AUSSEHEN eines Videos, das der Benutzer kopieren darf: sein eigenes oder eine freie Lizenz, die Änderungen erlaubt (Videezy Standardlizenz: kostenlos für private und kommerzielle Nutzung mit dem Vermerk „Videezy.com“; Mixkits freie Lizenz; die Lizenzen von Pexels und Pixabay). Schreibe die Lizenz, ihren Quelllink und das Datum in <work>/LICENSE.md und platziere den Vermerk auf dem Bildschirm, wo immer das Video gezeigt wird (<work>/film.json „credit“). Gameplay wird nur für seine BEWEGUNG kopiert (reanimate‑Standard): das Aussehen – Wörter, Schriftart, Farben, Kunst – bleibt Eigentum des Benutzers.

Die Schritte

1. rv doctor
2. rv ref <video> <work> (füge --start/--end für einen Ausschnitt hinzu, --crop x,y,w,h für ein Element). LESE JEDES SHEET in <work>/ref/sheets und die in voller Framerate in <work>/ref/sheets_full_rate. Schreibe auf, was sich bewegt und wann, bevor du misst.
3. Messe jedes sich bewegende Element mit dem Werkzeug für seine Bewegungsart (measure/README.md; führe jedes aus als rv measure <werkzeug> ...) auf <work>/ref/frames. Beweise jedes Werkzeug am Element, bevor du ihm vertraust (sein --sheet oder ein zweiter Frame, der übereinstimmen muss).
4. <work>/spec.md: eine Zeile pro Element pro Eigenschaft: Start, Dauer, von -> bis, Easing oder die gemessene Tabelle und die Datei, aus der die Zahl stammt. Eine Zeile mit einem „?“ ist nicht abgeschlossen.
5. Bauen: Kopiere template/ in das Projekt. animation.js exportiert draw(ctx, t) (eine reine Funktion der Zeit) und DURATION; setze jede gemessene Zahl in ein Modul mit der Datei, aus der sie stammt. Die Leinwand hat die Größe der Referenz (<work>/run.json).
6. rv serve <verzeichnis der kopie> dann rv round 1 <work> --url http://127.0.0.1:8765/index.html. Lese <work>/compare-1/report.md und seine Sheets (compare-1/sheets): die Zahlen sagen, wie weit ab, die Sheets sagen, was. Korrigiere nur den GRÖSSTEN Unterschied, dann rv round 2 .... Stoppe nach 5 Runden; was immer noch fehlschlägt, wird mit seiner Zahl und seinem Grund gemeldet.
7. rv rounds <work> (die Tabelle) und rv film <work> (die Prozessclips, 1080×1920: das Video, seine Frames, jede Runde mit dem, was abweicht, in Rot und seiner Zahl, die fallenden Zahlen, das finale Synchronbild).
8. Bericht: was kopiert wurde und in welcher Genauigkeit, die Dateien, die Rundentabelle, was abwich und warum.

Was von einem Video kopiert wird und was nicht

Kopiert gut durch Messung: Formen, Text, Ringe und Bögen, die sich drehen, Ticks und Segmente, die aufleuchten, Ein- und Ausblendungen, Wachstum und Rutschen, die Reihenfolge und das Timing von allem. Messe sie mit measure/ und baue sie als Formen nach.

NICHT durch Messung kopierbar: eine 3D‑gerenderte Szene, Filmmaterial, zufällig platzierte Partikel, ein Hintergrund, dessen Teile blinken und sich ändern. measure/spin.py sagt dies mit seiner ÜBEREINSTIMMUNG (unter etwa 0,3 tut das Band mehr als nur drehen). Am 6. November 2026 las der Tunnel des Countdowns 0,16–0,6: Drei Runden der Kopie hinterließen einen Fleck (76 % → 48 % Pixel abweichend), während sein HUD übereinstimmte. Dann: Kopiere das vordere Element, gib dem Hintergrund die eigene Szene des Benutzers (die eines Spiels, einer Seite) und vergleiche nur dort, wo das Element ist, oder wähle eine Referenz mit einfarbigem Hintergrund. Bezeichne eine solche Kopie niemals als pixelgenau.

Bestehensgrenzen (reanimate‑eigene, für ein Video gelesen)

• Timing: jedes Ereignis (10/50/90 % Anstieg und Abfall eines Elements, measure/curve.py) innerhalb von 0,08 s der Referenz.
• Easing: die gemessene Kurve der Kopie liegt innerhalb von 5 % des Weges (mittlere absolute Abweichung) der Referenz.
• Pixel: mittlere Abweichung höchstens 2 % bei einer pixelgetreuen Kopie (nur bei einer Referenz, deren Aussehen der Benutzer kopieren darf, und nur dort, wo der Hintergrund Teil des Kopierten ist); melde die scharfe Zahl neben der verwischten.
• Jede Rundenaufzeichnung hat die Prüfung bestanden (keine leeren oder eingefrorenen Frames).

Gelernte Fallstricke

• Ein einziger Float für ein gesamtes Design ist eine Hypothese: Passe JEDEN Ringmittelpunkt auf den Originalframes an (polar.py fit), bevor du irgendeinen stabilisierst (stabilize.py). Am 6. November 2026 (Videezy 40314) fixierte sich der erste Fit auf den hellsten Ring, den weißen, der um 8,5 px driftet; der Ring bei 319 bewegt sich 0,1 px. Drei Runden ließen das gesamte HUD schweben und maßen es auf Frames, die von der falschen Schicht stabilisiert wurden; Runde 4, nur mit dem weißen Ring im Float und allem erneut um das stille Zentrum gemessen, verbesserte sich von 12,6 % auf 9,3 %.

• Teste eine Änderung an ein paar Frames, bevor du eine Runde ausgibst: rv still <work> --url ... --frames 0,60,150 und vergleiche diese Frames mit compare.ts gegen den Code der letzten Runde. Am 6. November halfen zwei von drei Kandidatenänderungen (10,0 → 9,5 → 8,9 %) und eine verschlechterte (13,3 %): Sie wurde nie zu einer Runde.

• measure/radial_diff.py zeigt, WO ein Rundendesign abweicht, Radius für Radius; es liest nur stille Teile – ein schwebender Ring verschmiert in seinen Medianen, also beurteile mit compare.ts, wenn sie sich widersprechen.

• Ein stiller Ring ist in JEDEM Winkel hell: das 30. Perzentil über den Winkel behält ihn und verwirft, was sich bewegt – so liest man die wahren Radien und Breiten der Ringe.

• rv film beschneidet auf das Motiv (film.json „crop“): eine Vorführung zeigt ihr Motiv groß.

• Ein Zentrum, gefunden aus „den schärfsten Ringen“, wandert, wenn eine große weiße Form in der Mitte ist: verwende einen kleinen hellen Landmark auf mehreren Frames und vertraue ihm nur, wenn die Frames übereinstimmen (measure/polar.py landmark).

• Ein Glühen verdickt jede Kante: wähle die Schriftart durch Messung (measure/fontmatch.py), nicht mit dem Auge.

• Ein gemessener Zoom oder eine Drehung ist eine Hypothese, bis eine zweite Ansicht zustimmt: Am 6. November meldete eine log‑polare Korrelation einen Zoom von 3 %/s, den ein Radius‑über‑Zeit‑Streifen als nicht existent zeigte, und die Kopie schrumpfte ihren Tunnel damit für eine Runde.

• Eine Fläche wächst quadratisch mit der Größe: die Größe einer Zahl ist sqrt(weiße Fläche oberhalb der Frames davor) oder ihr Kasten.

• Kostenloses Stockmaterial ist oft 4K ProRes, 1–2 GB pro Clip: lies es mit 1920 px Breite (rv ref tut das), behalte das Original für die Aufzeichnung und achte auf den Speicherplatz.