agentSkill
Reanimate — 좋은 사이트의 움직임을 그대로 옮기기
출처: https://github.com/NiazMorshed2007/reanimate/blob/main/skills/reanimate/SKILL.md
| name | reanimate |
| description | 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, then record the clone and verify it against the reference frame by frame, iterating until timing, easing, sequence and layout match. Use whenever the user wants to clone, copy, replicate, recreate, reverse-engineer, port or "steal" a hero, section, widget, marquee, carousel, hover effect, page transition, loader, scroll animation or interaction from a site or video, says "make it look/feel/move like this", "same animation as", "match this exactly", or hands over a gif/video and asks to build it, including when they also want to add their own content, colours or extra features on top, or only want part of the reference (one section, one widget, a few seconds). Covers canvas, WebGL, WebGPU and three.js / 3D scenes (shaders, particles, globes, glTF models) as well as CSS and JS motion. Pixel-level matching of fonts, colours and spacing is done only when they ask for it. |
reanimate
Rebuild what the user points 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. The deliverable is code in the user's project plus evidence (numbers and side-by-side sheets), never "it looks about right".
What "done" means
Pick the fidelity level from the user's words and state it in the first message; it decides what you verify.
Level | When | Must match | May differ |
|---|---|---|---|
motion-faithful (default) | "clone this animation", "make ours feel like theirs", "same hero as X but our copy" | trigger, sequence and order, stagger, timing of every step (±80 ms), easing family, direction and distance of movement relative to the element size, layout proportions | copy, colours, fonts, images, brand details |
pixel-faithful | "match it exactly", "pixel-perfect", "details should match", "1:1" | everything above plus fonts, sizes, colours, spacing, radii, shadows, assets; mean frame mismatch ≤ 2 % | nothing the user did not ask to change |
mixed | "clone X and add Y", "like theirs but with our pricing tiers" | the cloned parts at one of the levels above | the additions, which you describe and show but verify only for not breaking the cloned motion |
The user can narrow the target to one section, one widget, one page, or a time range of a video ("the first 3 seconds", "0:12 to 0:15"). Clone exactly that; do not pull in the rest of the page.
Workflow
Everything below lives in .reanimate/＜name＞/ inside the user's project (add it to .gitignore unless they want the evidence committed). Keep each round's artefacts; they are the proof.
0. Scope
Write three lines at the top of .reanimate/＜name＞/spec.md before any capture:
Target: what to clone, as precisely as the user said it (URL + selector / time range / "the toggle in the gif").
Destination: where the code goes and in what stack (read
package.json, existing components and the animation library already in use; match it rather than introducing a new one).Fidelity: motion-faithful, pixel-faithful or mixed, plus the list of additions for mixed.
Infer what you can from the request and the repo. Ask only when two readings lead to different work (for instance "the hero" on a page with two candidate sections). When a reference is a login-walled page or a YouTube/Loom link you cannot download here, ask the user for a screen recording and continue with everything else meanwhile.
1. Setup
＜skill＞ below is the directory this SKILL.md lives in. Scripts need Bun (https://bun.sh); the first run downloads Playwright's Chromium and a static ffmpeg (about 250 MB).
bashbash ＜skill＞/scripts/setup.sh # installs playwright, ffmpeg, pixelmatch once; prints "ready"
All scripts are run with bun ＜skill＞/scripts/＜name＞.ts --help. They are deterministic and share one rule: capture the reference and the clone with the same viewport, selector crop, trigger, duration and fps, otherwise the comparison measures your setup instead of your work.
2. Capture the reference
Read references/capture.md for the recipe for your source type. In short:
Website:
capture.ts --url … --out ref --selector ＜section＞ --trigger load|scroll|hover|click|none --duration … --track "＜moving elements＞". You getvideo.webm,frames/,inspect.json(declared animations, keyframes, computed styles, fonts, detected libraries) andtrack.json(per animation frame position, size, opacity, transform of each tracked element). For CSS/WAAPI motioninspect.jsonoften contains the exact durations, delays and easings: use them, it beats estimating.
(이하 생략 — 전체 SKILL.md는 원본 저장소에서 확인하세요: https://github.com/NiazMorshed2007/reanimate/blob/main/skills/reanimate/SKILL.md)
원본: https://github.com/NiazMorshed2007/reanimate/blob/main/skills/reanimate/SKILL.md · 라이선스: MIT — 원문 그대로 옮겼으며, 자세한 조건은 저장소의 LICENSE를 따릅니다.
※ 화면 표시를 위해 꺾쇠괄호(< >)를 전각 문자(＜ ＞)로 바꿨습니다. 그대로 복사해 쓰실 때는 위 원본 저장소의 SKILL.md를 받아 주세요.