Was ist reanimate?
reanimate ist ein Agent-Skill zum Kopieren von Bewegung. Du zeigst Claude Code eine Live-Seite, eine Bildschirmaufnahme, ein mp4, ein gif oder eine Lottie-Datei und nennst Element und Zieldatei; der Skill nimmt die Referenz in einem Headless-Chromium mit festem Viewport und fester Bildrate auf, schreibt eine Spezifikation mit einer Zeile pro Element und Eigenschaft (Start, Dauer, von und nach, Easing, Staffelung), baut die Animation mit dem, was das Projekt schon nutzt (CSS, Framer Motion, GSAP oder three.js), nimmt dann die Kopie genauso auf und vergleicht Timing, Easing und Pixel. Das wiederholt er, meist in 2 bis 5 Runden, und listet auf, was nach 5 noch nicht passt.
Bei Canvas, WebGL und WebGPU verfolgt er die GPU-Aufrufe statt Pixel zu lesen: Shader-Quellcode, Uniforms, Render-Passes, Texturen und den Szenengraphen von three.js, Pixi, PlayCanvas, Babylon oder OGL, auf einer virtuellen Uhr mit geseedetem Math.random, sodass zwei Aufnahmen identisch ausfallen. Standard ist reine Bewegungstreue (Timing innerhalb von 80 ms, gleiche Easing-Familie und Reihenfolge); wer pixelgenau verlangt, bekommt zusätzlich Schriften, Farben, Abstände und eine mittlere Pixelabweichung von 2 % oder weniger.
Das Repository stammt von Niaz Morshed, steht unter MIT, wurde am 29. Oktober 2026 angelegt und zuletzt am 31. Oktober geändert. Es hat rund 1.570 Sterne, 137 Forks, einen Mitwirkenden, keine getaggten Releases und eine Website mit 14 geklonten Beispielen von Vercel, Stripe, Clerk, Resend und anderen, jedes am Original gemessen.
Lohnt sich reanimate?
Der Beitrag von reanimate ist eine Rückkopplungsschleife, kein Prompt. Ein Agent, der eine Animation nach einem Link nachbauen soll, macht einen Durchgang und erklärt den Sieg, weil er das Timing nicht sehen kann. Dieser Skill gibt ihm Augen: ein Aufnahmeskript, das Frames, deklarierte CSS- und Web-Animations-Keyframes, berechnete Stile und Elementpositionen pro Frame festhält, und ein Vergleichsskript, das Timing-Fehler, Pixelabweichung und Differenzbögen für Referenz und Kopie ausgibt. SKILL.md weist Claude an, jeden Kontaktbogen zu lesen und gegen feste Abnahmekriterien weiterzuarbeiten, statt bei "sieht richtig aus" aufzuhören. Wenn die Quelle eigene Keyframes deklariert, übernimmt der Skill daraus die exakten Dauern und Easings, statt zu schätzen.
Die veröffentlichten Belege sind ungewöhnlich konkret. Beim Klon der Vercel-Toolbar stimmen 417 von 417 Frames überein; die Drehungen des Hero-Würfels von Resend sind über 25 s exakt, bei 0,11 % abweichenden Pixeln; Stripes kippende Karte kommt innerhalb von 0,4 px zur Ruhe, und ihre WebGL-Neigungskurve passt innerhalb von 33 ms. Das sind Läufe des Autors selbst an 14 Beispielen, meist 30 bis 90 Minuten lang, kein unabhängiger Benchmark, aber die Methode ist reproduzierbar, und die Artefakte jeder Runde bleiben als Beleg in .reanimate/ in deinem Projekt.
Es ist ein engeres und strengeres Werkzeug als die Motion-Skills um es herum. motionmaxxing und bang-motion helfen einem Agenten, neue Bewegung mit gutem Geschmack zu entwerfen; reanimate kopiert nur vorhandene Bewegung, und sein Wert liegt darin, dass es zeigen kann, wie nah die Kopie ist.
Der Haken: Es ist zwei Wochen alt, hat einen Mitwirkenden und keine Releases, und sein Einsatzzweck lädt zu Ärger ein. Aufnehmen heißt, beliebige fremde Seiten in einem lokalen Headless-Browser auszuführen, und ein am 10. November 2026 eröffnetes Issue zeigt, dass eine Seite Trace-Dateien mit ../ benennen und so außerhalb des Aufnahmeordners schreiben kann; der vorgeschlagene Patch ist nicht gemergt. Seiten hinter einem Login, YouTube und Loom lassen sich nicht direkt aufnehmen, Windows ist ungetestet, der erste Lauf lädt rund 250 MB herunter, und die standardmäßige Software-GPU ist langsam. Das README erinnert außerdem daran, dass Schriften, Bilder und Code von einer anderen Website weiterhin ihren Eigentümern gehören.
Unser Fazit: reanimate ist das richtige Instrument für eine Frontend-Entwicklerin, die den neuen Hero genau wie eine Referenz wirken lassen soll, und das falsche, um Bewegung von Grund auf zu entwerfen. Lass es nur gegen vertrauenswürdige Websites laufen, prüfe den Diff, den es schreibt, und plane eine Stunde Agentenzeit pro Animation ein.
Wo es sich lohnt
Ein Frontend-Entwickler in einem Start-up, das seine Marketing-Website neu gestaltet
Den Karten-Hover aus einer Design-Referenz in unseren Framer-Motion-Komponenten nachbauen
/reanimate mit der Referenz-URL und der Zieldatei starten; der Skill liest die deklarierten Keyframes, schreibt die Bewegung in Framer Motion und hört auf, wenn das Timing innerhalb von 80 ms liegt. Rechne mit zwei bis fünf Aufnahmerunden.
Ein Creative Developer, der einen WebGL-Hero portiert, den er wiederverwenden darf
Shader, Uniforms und Timing einer three.js-Szene zurückgewinnen
Mit --clock virtual --gl --assets aufnehmen, um Shader-Quellcode, konstante Uniforms und animierte Kanäle zu extrahieren, und den Klon dann mit gl.ts compare Kanal für Kanal vergleichen.
Eine Design-System-Ingenieurin, die die Bildschirmaufnahme eines Motion-Designers in Code übersetzt
Einen 2-Sekunden-Loader aus einem mp4 Frame für Frame treffen
Datei und Zeitbereich übergeben; frames.ts extrahiert und beschneidet die Frames, der Skill baut den Loader in CSS und vergleicht die Aufnahme der Kopie mit dem Video, bis die Abweichung unter dem Ziel liegt.
Bevor du dich festlegst
- Einrichtung
- npx skills add NiazMorshed2007/reanimate -g (mit -a claude-code entfällt die Agentenabfrage), dann /reanimate <was> von <wo>, in <Datei>. Braucht Bun 1.1 oder neuer unter macOS oder Linux; der erste Lauf installiert ein statisches ffmpeg und das Chromium von Playwright, zusammen rund 250 MB.
- Integrationen
- Für Claude Code gebaut und getestet; andere Agenten, die SKILL.md lesen, können es ungetestet laden. Bun-Skripte für Aufnahme, Frames, Vergleich, Easing-Anpassung, Kontaktbögen und GPU-Traces; hängt sich in three.js, Pixi, PlayCanvas, Babylon und OGL ein.
- Daten und Datenschutz
- Läuft lokal, ohne API-Schlüssel und ohne beschriebene Telemetrie; Aufnahmen, Frames und Differenzbögen landen in .reanimate/<name>/ in deinem Projekt. Es lädt fremde Seiten in Headless-Chromium, und ein offenes Issue meldet, dass seitengesteuerte Trace-IDs Dateien außerhalb des Aufnahmeordners schreiben können. MIT; kopierte Schriften, Bilder und Code bleiben Eigentum ihrer Rechteinhaber.
- Kosten im großen Maßstab
- Kostenlos. Die eigentlichen Kosten sind Agentenzeit: Die Beispiele des Autors brauchten meist 30 bis 90 Minuten pro Stück in Claude Code, regelmäßige Nutzung braucht also einen großzügigen Claude-Plan oder ein entsprechendes API-Budget. Der Hardware-GPU-Modus ist schneller als das standardmäßige SwiftShader.
- Grenzen
- Keine Seiten mit Login, kein YouTube oder Loom ohne Bildschirmaufnahme; Federn werden angepasst statt ausgelesen; Worker-Uhren laufen in Echtzeit; Canvas in iframes braucht die URL des iframes; Windows-Korrekturen liegen in offenen Pull Requests.
Was gut ist
- Misst die Kopie in jeder Runde am Original, statt zu raten
- Liest exakte Keyframes und Easings, wenn die Seite sie deklariert
- Verfolgt WebGL-, WebGPU- und three.js-Szenen auf einer deterministischen virtuellen Uhr
- Baut im vorhandenen Stack des Projekts: CSS, Framer Motion, GSAP oder three.js
- Keine API-Schlüssel; MIT-Lizenz
Was nicht
- Ein Mitwirkender, keine Releases, zwei Wochen alt
- Offenes Path-Traversal-Issue beim Aufnehmen nicht vertrauenswürdiger Seiten
- Keine direkte Aufnahme von Seiten mit Login, YouTube oder Loom
- Windows ungetestet; rund 250 MB Downloads beim ersten Lauf
- Lange Läufe von 30 bis 90 Minuten verbrauchen Agenten-Tokens
Am besten für
Frontend-Entwickler mit Claude Code, die einen bestimmten Hover, Einstieg oder WebGL-Effekt genau nachbauen müssen und belegen wollen, wie nah die Kopie ist.
Alternativen zu reanimate
reanimate: häufige Fragen
- Lohnt sich reanimate?
- reanimate behebt den eigentlichen Grund, warum Agenten beim Klonen von Animationen scheitern (sie sehen keine Bewegung), indem der Agent seine Kopie so lange am Original misst, bis die Zahlen übereinstimmen. Wir bewerten es mit 3.8 von 5.
- Was kostet reanimate?
- Kostenlos (MIT). Keine API-Schlüssel; die Kosten sind die Claude-Code-Nutzung für Läufe, die oft 30 bis 90 Minuten dauern.
- Welche Nachteile hat reanimate?
- Ein Mitwirkender, keine Releases, zwei Wochen alt; Offenes Path-Traversal-Issue beim Aufnehmen nicht vertrauenswürdiger Seiten; Keine direkte Aufnahme von Seiten mit Login, YouTube oder Loom; Windows ungetestet; rund 250 MB Downloads beim ersten Lauf; Lange Läufe von 30 bis 90 Minuten verbrauchen Agenten-Tokens.
- Für wen eignet sich reanimate?
- Frontend-Entwickler mit Claude Code, die einen bestimmten Hover, Einstieg oder WebGL-Effekt genau nachbauen müssen und belegen wollen, wie nah die Kopie ist.
- Was kostet reanimate für ein Team oder im Produktivbetrieb?
- Kostenlos. Die eigentlichen Kosten sind Agentenzeit: Die Beispiele des Autors brauchten meist 30 bis 90 Minuten pro Stück in Claude Code, regelmäßige Nutzung braucht also einen großzügigen Claude-Plan oder ein entsprechendes API-Budget. Der Hardware-GPU-Modus ist schneller als das standardmäßige SwiftShader.
- Ist reanimate sicher für Firmendaten?
- Läuft lokal, ohne API-Schlüssel und ohne beschriebene Telemetrie; Aufnahmen, Frames und Differenzbögen landen in .reanimate/<name>/ in deinem Projekt. Es lädt fremde Seiten in Headless-Chromium, und ein offenes Issue meldet, dass seitengesteuerte Trace-IDs Dateien außerhalb des Aufnahmeordners schreiben können. MIT; kopierte Schriften, Bilder und Code bleiben Eigentum ihrer Rechteinhaber.
- Was sind die besten Alternativen zu reanimate?
- Die nächsten Alternativen, die wir getestet haben, sind motionmaxxing, Bang Motion und Playwright Test Agents.
Antworten geprüft am 11. Nov. 2026.