reanimateとは？
reanimate は動きをコピーするためのエージェントスキルです。Claude Code にライブのページ、画面録画、mp4、gif、Lottie ファイルのいずれかを示し、対象の要素と出力先のファイルを指定します。スキルは固定のビューポートとフレームレートでヘッドレス Chromium に参照を録画し、要素とプロパティごとに 1 行（開始、長さ、開始値と終了値、イージング、ずらし）の仕様を書き、プロジェクトがすでに使っているもの（CSS、Framer Motion、GSAP、three.js）でアニメーションを作ります。そのうえでコピーを同じ方法で録画し、タイミング、イージング、ピクセルを比較します。これを通常 2 回から 5 回繰り返し、5 回を過ぎても一致しない点は一覧にして報告します。
canvas、WebGL、WebGPU では、ピクセルを読む代わりに GPU の呼び出しを追跡します。シェーダーのソース、uniform、レンダーパス、テクスチャ、そして three.js、Pixi、PlayCanvas、Babylon、OGL のシーングラフを、Math.random にシードを与えた仮想クロック上で記録するため、2 回のキャプチャは同一になります。既定の忠実度は動きのみ（タイミングの誤差 80 ms 以内、同じイージングの系統と順序）で、ピクセル単位の一致を求めると、フォント、色、間隔、そして平均ピクセル差 2 % 以下が加わります。
リポジトリは Niaz Morshed によるもので、MIT ライセンスです。2026 年 10 月 29 日に作成され、最終更新は 10 月 31 日です。スターは約 1,570、フォークは 137、コントリビューターは 1 人で、タグ付きのリリースはありません。サイトでは Vercel、Stripe、Clerk、Resend などから複製した 14 の例を、それぞれ元と比較した測定値付きで公開しています。
reanimateは使う価値があるか？
reanimate の貢献はプロンプトではなくフィードバックループです。リンクからアニメーションを作り直すよう頼まれたエージェントは、タイミングを見る手段がないため、1 回作っただけで完了を宣言します。このスキルはエージェントに目を与えます。フレーム、宣言された CSS と Web Animations のキーフレーム、計算済みスタイル、フレームごとの要素の位置を記録するキャプチャスクリプトと、参照とコピーの両方についてタイミングの誤差、ピクセル差、差分シートを報告する比較スクリプトです。SKILL.md は Claude に、コンタクトシートをすべて読み、「それらしく見える」で止まらず、固定の合格基準に対して反復を続けるよう指示します。参照元が独自のキーフレームを宣言している場合、スキルは推定せずにそこから正確な長さとイージングを取得します。
公開されている証拠は珍しいほど具体的です。Vercel のツールバーの複製では 417 フレーム中 417 フレーム が一致し、Resend のヒーローにあるキューブの回転は 25 s にわたって正確で、ピクセルの差は 0.11 % です。Stripe の傾くカードは 0.4 px 以内に収まり、WebGL の傾きの曲線は 33 ms 以内で一致します。これらは作者自身が 14 の例で行った実行で、多くは 30 分から 90 分かかっており、独立したベンチマークではありません。それでも手法は再現可能で、各回の成果物は証拠としてプロジェクトの .reanimate/ に残ります。
周辺のモーション系スキルより対象が狭く、厳密なツールです。motionmaxxing と bang-motion はエージェントがセンスよく新しい動きを設計するのを助けます。reanimate は既存の動きをコピーするだけで、その価値はコピーがどれだけ近いかを示せる点にあります。
注意点：公開から 2 週間で、コントリビューターは 1 人、リリースもなく、用途そのものが問題を招きやすいものです。キャプチャとは、任意の第三者のページをローカルのヘッドレスブラウザーで実行することです。2026 年 11 月 10 日に開かれた issue は、ページが ../ を含む名前をトレースファイルに付けることで、キャプチャフォルダーの外に書き込めることを示しています。提案されたパッチはまだマージされていません。ログインが必要なページ、YouTube、Loom は直接キャプチャできず、Windows は未検証で、初回実行では約 250 MB をダウンロードし、既定のソフトウェア GPU は遅いです。README は、別のサイトからコピーしたフォント、画像、コードは引き続きその所有者のものだとも念を押しています。
結論：reanimate は、新しいヒーローを参照とまったく同じ感触にするよう求められたフロントエンド開発者には適した道具ですが、 ゼロから動きを設計するには向きません。信頼できるサイトに対してだけ実行し、書き出された差分を確認し、アニメーション 1 つにつきエージェントの時間を 1 時間見込んでください。
真価を発揮する場面
マーケティングサイトを作り直しているスタートアップのフロントエンド開発者
デザイン参照のカードのホバーを、自社の Framer Motion コンポーネントで作り直す
参照 URL と出力先ファイルを指定して /reanimate を実行します。スキルは宣言されたキーフレームを読み、Framer Motion で動きを書き、タイミングが 80 ms 以内になったら止まります。キャプチャは 2 回から 5 回を見込んでください。
再利用の許諾を得た WebGL のヒーローを移植するクリエイティブ開発者
three.js シーンのシェーダー、uniform、タイミングを取り出す
--clock virtual --gl --assets を付けてキャプチャし、シェーダーのソース、定数の uniform、アニメーションするチャンネルを抽出してから、gl.ts compare で複製とチャンネルごとに比較します。
モーションデザイナーの画面録画をコードにするデザインシステムのエン ジニア
mp4 にある 2 秒のローダーをフレーム単位で再現する
ファイルと時間範囲を渡すと、frames.ts がフレームを抽出して切り抜き、スキルが CSS でローダーを作り、差が目標を下回るまでコピーの録画を動画と比較します。
導入前に確認すること
- 導入
- npx skills add NiazMorshed2007/reanimate -g（-a claude-code を付けるとエージェントの選択を省略）を実行し、/reanimate <対象> from <場所>, into <ファイル> と指示します。macOS または Linux で Bun 1.1 以降が必要で、初回実行で静的な ffmpeg と Playwright の Chromium、合わせて約 250 MB がインストールされます。
- 連携
- Claude Code 向けに作られ、検証されています。SKILL.md を読む他のエージェントも読み込めますが未検証です。キャプチャ、フレーム、比較、イージングのフィッティング、コンタクトシート、GPU トレース用の Bun スクリプトがあり、three.js、Pixi、PlayCanvas、Babylon、OGL にフックします。
- データとプライバシー
- ローカルで動作し、API キーは不要で、テレメトリーの記載もありません。キャプチャ、フレーム、差分シートはプロジェクトの .reanimate/<name>/ に保 存されます。第三者のページをヘッドレス Chromium で読み込み、未解決の issue では、ページが制御するトレース ID によってキャプチャフォルダー外にファイルが書き込まれうると報告されています。MIT。コピーしたフォント、画像、コードの権利はその所有者に残ります。
- 大規模利用時のコスト
- 無料です。実際の費用はエージェントの時間で、作者の例の多くは Claude Code で 1 つあたり 30 分から 90 分かかりました。日常的に使うなら、余裕のある Claude のプランか API 予算が必要です。ハードウェア GPU モードは既定の SwiftShader より高速です。
- 制限
- 画面録画がなければ、ログインが必要なページ、YouTube、Loom は扱えません。スプリングはソースから読まずにフィッティングで求めます。ワーカーのクロックは実時間で進みます。iframe 内の canvas には iframe の URL が必要です。Windows 向けの修正は未マージのプルリクエストにあります。
良い点
- 推測ではなく、毎回コピーを元と比べ て測定する
- ページが宣言していれば正確なキーフレームとイージングを読み取る
- WebGL、WebGPU、three.js のシーンを決定的な仮想クロックで追跡する
- プロジェクトの既存スタック（CSS、Framer Motion、GSAP、three.js）で作る
- API キー不要、MIT ライセンス
気になる点
- コントリビューター 1 人、リリースなし、公開から 2 週間
- 信頼できないページのキャプチャ時のパストラバーサルの issue が未解決
- ログインが必要なページ、YouTube、Loom は直接キャプチャできない
- Windows は未検証、初回実行で約 250 MB をダウンロード
- 30 分から 90 分の長い実行でエージェントのトークンを消費する
おすすめの人
特定のホバー、登場アニメーション、WebGL エフェクトを忠実に再現する必要があり、コピーがどれだけ近いかの証拠も欲しい、Claude Code を使うフロントエンド開発者。
reanimateの代替
reanimate：よくある質問
- reanimateは使う価値があるか？
- reanimate は、エージェントがアニメーションの複製に失敗する本当の理由（動きが見えないこと）を、コピーを元と比べて数値が一致するまでエージェントに測らせることで解決します。 評価は5点満点中3.8点です。
- reanimateの料金は？
- 無料（MIT）です。API キーは不要で、費用は 30 分から 90 分かかることが多い実行での Claude Code の利用分です。
- reanimateの欠点は？
- コントリビューター 1 人、リリースなし、公開から 2 週間; 信頼できないページのキャプチャ時のパストラバーサルの issue が未解決; ログインが必要なページ、YouTube、Loom は直接キャプチャできない; Windows は未検証、初回実行で約 250 MB をダウンロード; 30 分から 90 分の長い実行でエージェントのトークンを消費する.
- reanimateは誰に向いているか？
- 特定のホバー、登場アニメーション、WebGL エフェクトを忠実に再現する必要があり、コピーがどれだけ近いかの証拠も欲しい、Claude Code を使うフロントエンド開発者。
- チームや本番環境でreanimateを使うと費用はいくらか？
- 無料です。実際の費用はエージェントの時間で、作者の例の多くは Claude Code で 1 つあたり 30 分から 90 分かかりました。日常的に使うなら、余裕のある Claude のプランか API 予算が必要です。ハードウェア GPU モードは既定の SwiftShader より高速です。
- reanimateは企業データを扱っても安全か？
- ローカルで動作し、API キーは不要で、テレメトリーの記載もありません。キャプチャ、フレーム、差分シートはプロジェクトの .reanimate/<name>/ に保存されます。第三者のページをヘッドレス Chromium で読み込み、未解決の issue では、ページが制御するトレース ID によってキャプチャフォルダー外にファイルが書き込まれうると報告されています。MIT。コピーしたフォント、画像、コードの権利はその所有者に残ります。
- reanimateの代わりになるものは？
- 当サイトでレビューした中で最も近い代替はmotionmaxxing, Bang Motion 、 Playwright Test Agentsです。
回答確認日：2026年11月11日