reanimate: clone an animation and prove it moves the same
/reanimate
Rebuild a UI animation from a live page, a screen recording, a gif or a Lottie file in your own code, then record the copy the same way and compare the two frame by frame, fixing timing, easing and stagger until the numbers match. Covers CSS, Web Animations, canvas, WebGL and three.js.
- License
- MIT
- By
- By GameSkill
Tested by GameSkill
27/27 checks passed on reanimate scripts on Bun with Playwright Chromium (headless shell, SwiftShader) (2026-11-03): trigger, a runnable example, a screenshot and self-check, one job per skill, and English + Chinese docs. Trigger checks match prompts against skill descriptions; they are not a live agent run.
Test reportWhat this skill does
When it triggers
Clone a section, widget, page or animation from any reference (a live website URL, a screen recording, an mp4/mov/webm, a gif, a Lottie file, a prototype export) frame by frame into the user's own codebase …
GameSkill's tested copy
GameSkill's tuned build of this skill: the skill files from commit 3f7a55a2986a, plus our runnable example, test report, self-check list and Chinese guide, put through our skill process.
License: based on NiazMorshed2007/reanimate by NiazMorshed2007, under MIT. The ZIP keeps the license files (LICENSE) and lists everything GameSkill added in CHANGES.md.
Self-check
- 第一条消息写明保真等级：动作一致、像素一致或混合 / State the fidelity level first: motion-faithful, pixel-faithful or mixed
- 参考和复刻用完全相同的视口、裁剪、触发、时长和帧率录制 / Capture reference and clone with the same viewport, crop, trigger, duration and fps
- 先读 inspect.json 里声明的时长和缓动，再从像素估 / Use the declared timings in inspect.json before estimating from pixels
- 每一轮都看 compare 图，不只看数字 / Look at the compare sheets every round, not only the numbers
- canvas 和 WebGL 用 --clock virtual 和同一个 --seed / Canvas and WebGL: --clock virtual and the same --seed on both sides
- 5 轮还不过就报告差距和原因，不降低阈值 / After 5 rounds, report what still fails; never lower the threshold
Install
Tell your AI
Install the skill from https://gameskill.dev/skills/reanimate/install.md
GameSkill's tested copy
mkdir -p .claude/skills
curl -fsSL https://gameskill.dev/dl/skills/reanimate.zip -o /tmp/gameskill-reanimate.zip
unzip -oq /tmp/gameskill-reanimate.zip -d .claude/skills
rm /tmp/gameskill-reanimate.zipWhat you get
- A capture script: video, frames, every declared CSS and Web Animations timing, and per-frame element tracks
- easing.ts: names the easing curve, delay, duration and overshoot from tracked motion
- compare.ts and sheet.ts: frame-by-frame mismatch, timing error and side-by-side diff sheets
- A virtual clock and seeded Math.random for canvas, WebGL and particle motion
- A fidelity contract (motion-faithful, pixel-faithful, mixed) and a fix-and-recapture loop of 2 to 5 rounds
Good fit
- Matching a menu, HUD or title-screen animation to a reference video or gif
- Proving a rebuilt transition has the same timing and easing, not just a similar look
Not for
- Copying another studio's art, fonts or brand: by default it matches motion and leaves the look to you
- Engine-side animation in Godot, Unity or Unreal: it records browser pages and videos
Try this prompt
Rebuild the title-screen entrance from this recording in my web game's menu: same drop, same button stagger, our own colours, and show me the compare report.About this skill
Rebuild what you point at so that it moves the way the reference moves, prove it with a frame-by-frame comparison, and keep going until the comparison passes. Works from a live website, a screen recording, an mp4/mov/webm, a gif, a Lottie file or a prototype export, and covers CSS and JS motion as well as canvas, WebGL, WebGPU and three.js scenes.
From the reanimate SKILL.md in NiazMorshed2007/reanimate.
What's inside
- A fidelity contract: motion-faithful (default), pixel-faithful or mixed
- Workflow: scope, setup, capture the reference, write the motion spec, build, verify, report
- Scripts:
capture.ts,frames.ts,easing.ts,compare.ts,sheet.ts,gl.ts - References for capture recipes, motion-spec analysis, implementation, verification and WebGL
Notes
- Motion, not assets: by default it matches timing and easing and leaves copy, colours, fonts and images to you. Use references you have the right to adapt.
- In our test, two virtual-clock captures of the same random-particle canvas used the same seeded numbers, but their animation-frame timestamps started about 0.5 ms apart, so a few anti-aliased pixels differed.
compare.tsstill passed them (mean mismatch 0.01%). Judge by the comparison, not by byte-identical frames.
Requirements
- Bun 1.1 or newer, macOS or Linux
- About 250 MB on first setup (Playwright Chromium and a static ffmpeg); no API keys
FAQ
Based on NiazMorshed2007/reanimate by NiazMorshed2007 (MIT). The author's LICENSE and NOTICE files ship in the ZIP; ATTRIBUTION.md and CHANGES.md list the source commit and what GameSkill added.
Works well with
Skills the author points to as related or as the better fit for neighbouring tasks.
De-AI Game UI (remove the generic AI look from menus and HUDs, checked by a lint)
A GameSkill original that strips the tells of AI-made game UI (purple-blue gradients, glass panels, neon glows, emoji icons, one big radius, everything centred, identical buttons, epic-journey copy) and rebuilds the screen from the game's own world. Ships a 12-rule lint that reads computed styles in headless Chrome for any framework, a before/after pause menu and a mutation test proving every rule can fail.
Game Feel & Juice
Add juice to actions: screen shake, hit-stop, eased motion, squash and stretch, knockback and layered audio-visual feedback.
Game UI/UX
HUDs and menus that work on every screen: anchored layouts, resolution and safe-area scaling, gamepad focus and event-driven updates.
Similar skills
Awesome Gamedev Agent Skills
77 portable SKILL.md skills across 12 engines (Godot, Unity, Unreal, Phaser, PixiJS, three.js, Bevy, pygame, LÖVE, Roblox, Defold, Ebitengine), with a router.
Three.js Game Skills
Nine Agent Skills for Codex and Claude Code that build playable Three.js browser games, with a director skill, a Vite scaffold and Playwright QA.
FunPlay Skill
14 MIT agent skills for game development with scripts and tests: sprite-sheet slicing, normal maps, audio conversion, game concept briefs, browser game slices, Unity MCP workflow and Cocos/WeChat minigame rules.
Godogen
Autonomous game development with Claude Code and Codex. Publishes a ready game repo for Godot, Bevy, Babylon.js or three.js.