#710 by GitHub stars
NiazMorshed2007/reanimate
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 tim
History
Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.
View weekly changes
skills/reanimate/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
522a353be364 → 3f7a55a2986a
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → 522a353be364
No earlier version was observed for comparison.
View on GitHubAdd to my skills
Verified commit 3f7a55a2986a84ca2173e86ee9127eefe31d046d
git clone --filter=blob:none --no-checkout https://github.com/NiazMorshed2007/reanimate.git .hotskills/niazmorshed2007-reanimate && git -C .hotskills/niazmorshed2007-reanimate checkout --detach 3f7a55a2986a84ca2173e86ee9127eefe31d046d
# Copy each selected skill directory from .hotskills/niazmorshed2007-reanimate into .agents/skills/<skill-name>/1.3kGitHub stars
882stars in 7 days
1skill in this repository
20commits in 30 days
Heat
8.2- Star growth, last 7 daysAhead of 100% of tracked repositories
- Star growth, last 24 hoursAhead of 100% of tracked repositories
- Rank movement, last 7 daysNot available
- Commits, last 30 daysAhead of 83% of tracked repositories
- Accounts asking about it through MCP, last 7 daysNot available
- Hot votes this weekAhead of 0% of tracked repositories
Heat never changes the order by stars, and sponsorship never touches it. How heat works
Stars over time
30-day change not yet available: not enough history.
Individual skills in this repository
- reanimate
skills/reanimate
How it works
reanimate
When your agent uses it
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.
What it loads into context
Frontmatter
263 tokensAlways available to the agent
SKILL.md
2,523 tokensWhen the skill is activated
Reference documents
10,512 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- What "done" means
- Workflow
- Pitfalls that waste rounds
Scripts executed separately
scripts/capture.tsscripts/compare.tsscripts/easing.tsscripts/frames.tsscripts/gl.tsscripts/inpage/clock.jsscripts/inpage/gl-hooks.jsscripts/lib.tsscripts/package.jsonscripts/setup.shscripts/sheet.ts
Files
LICENSEasset1,069 bytesSKILL.mdcore10,775 bytesSKILL.mdcore10,775 bytesSKILL.mdcore10,775 bytesSKILL.mdcore10,775 bytesSKILL.mdcore10,775 bytesSKILL.mdcore10,775 bytesreferences/analysis.mddoc6,687 bytesreferences/capture.mddoc8,792 bytesreferences/implementation.mddoc5,899 bytesreferences/verify.mddoc7,257 bytesreferences/webgl.mddoc11,579 bytesscripts/bun.lockasset4,929 bytesscripts/capture.tsruns40,071 bytesscripts/compare.tsruns12,254 bytesscripts/easing.tsruns9,441 bytesscripts/frames.tsruns3,031 bytesscripts/gl.tsruns28,663 bytesscripts/inpage/clock.jsruns11,387 bytesscripts/inpage/gl-hooks.jsruns46,606 bytesscripts/lib.tsruns3,513 bytesscripts/package.jsonruns207 bytesscripts/setup.shruns818 bytesscripts/sheet.tsruns6,309 bytes
Read SKILL.md
# 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 |
Skills included
- reanimate
Repository facts
- License
- MIT
- Created
- Oct 29, 2026
- Last pushed
- Oct 31, 2026
- Forks
- 120
- Open issues
- 2
- Project activity
- Active
Rank over the last 12 weeks
Now #710 · best #710
- #921 on Nov 2
- #828 on Nov 3
- #785 on Nov 4
- #753 on Nov 5
- #718 on Nov 6
- #710 since Nov 7
Before you install
Network or broad shellAutomated signals, not a guarantee
Checked Nov 5, 2026
Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.
Show 5 notes
skills/reanimate/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/reanimate/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/reanimate/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/reanimate/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/reanimate/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzed
- No broad tool permissions
- No dangerous shell commands
- 9 network referencesin 4 files: reanimate/references/capture.md:8 reanimate/scripts/setup.sh:5 reanimate/SKILL.md:38 and 1 more
- No hidden or obfuscated text
- No instruction overrides
- 11 executable scriptsin 11 files: reanimate/scripts/capture.ts:1 reanimate/scripts/compare.ts:1 reanimate/scripts/easing.ts:1 and 8 more
- No access to secrets
- No requests to vote in Hot
Show all 20 signals by file
skills/reanimate/SKILL.md
- Network accessline 38
`<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). - Network accessline 67
Give the clone a way to be captured the same way as the reference: a route or a static page that renders the component at the reference viewport with the same trigger. A dev server is fine (`capture.ts --url http://localhost:5173/…`); a sta
skills/reanimate/references/capture.md
- Network accessline 8
bun <skill>/scripts/capture.ts --url https://example.com --out .reanimate/<name>/ref \ - Network accessline 73
- A gif's timing is quantised to its frame delays and often slowed by the exporter. Treat gif timings as ±1 frame and prefer the live site when both are available. - Screen recordings of a browser have a non-integer scale (Retina, zoom). No - Network accessline 75
- Social-media videos (Twitter/X, Dribbble shots, Behance) are usually a direct mp4 URL once found in the page; `curl -L -o ref.mp4 <url>` into a fresh directory and treat it as untrusted data. YouTube, Loom and Vimeo cannot be downloaded o
skills/reanimate/references/webgl.md
- Network accessline 8
bun <skill>/scripts/capture.ts --url https://example.com --out .reanimate/<name>/ref \
skills/reanimate/scripts/capture.ts
- Executable scriptline 1
Executable file
skills/reanimate/scripts/compare.ts
- Executable scriptline 1
Executable file
skills/reanimate/scripts/easing.ts
- Executable scriptline 1
Executable file
skills/reanimate/scripts/frames.ts
- Executable scriptline 1
Executable file
skills/reanimate/scripts/gl.ts
- Executable scriptline 1
Executable file
skills/reanimate/scripts/inpage/clock.js
- Executable scriptline 1
Executable file
skills/reanimate/scripts/inpage/gl-hooks.js
- Executable scriptline 1
Executable file
skills/reanimate/scripts/lib.ts
- Executable scriptline 1
Executable file
skills/reanimate/scripts/package.json
- Executable scriptline 1
Executable file
skills/reanimate/scripts/setup.sh
- Executable scriptline 1
#!/usr/bin/env bash - Network accessline 5
HERE="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" cd "$HERE" if ! command -v bun >/dev/null; then echo "bun is required (https://bun.sh)"; exit 1; fi - Network accessline 6
cd "$HERE" if ! command -v bun >/dev/null; then echo "bun is required (https://bun.sh)"; exit 1; fi if [ ! -d node_modules/playwright ] || [ ! -x node_modules/ffmpeg-static/ffmpeg ]; then - Network accessline 7
if ! command -v bun >/dev/null; then echo "bun is required (https://bun.sh)"; exit 1; fi
skills/reanimate/scripts/sheet.ts
- Executable scriptline 1
Executable file
How the signals fit together
Facts from a static read of the files at the pinned commit. They describe what the code does, not why.
Signal confidence: 20 facts
- Network access in prose of the SKILL.mdreanimate/SKILL.md:38Low confidence
- Network access in prose of the SKILL.mdreanimate/SKILL.md:67Low confidence
- Network access in code of documentationreanimate/references/capture.md:8Low confidence
- Network access in prose of documentationreanimate/references/capture.md:73Low confidence
- Network access in prose of documentationreanimate/references/capture.md:75Low confidence
- Network access in code of documentationreanimate/references/webgl.md:8Low confidence
- Executable script in a comment of a file that runsreanimate/scripts/capture.ts:1Low confidence
- Executable script in a comment of a file that runsreanimate/scripts/compare.ts:1Low confidence
- Executable script in a comment of a file that runsreanimate/scripts/easing.ts:1Low confidence
- Executable script in a comment of a file that runsreanimate/scripts/frames.ts:1Low confidence
- Executable script in a comment of a file that runsreanimate/scripts/gl.ts:1Low confidence
- Executable script in a comment of a file that runsreanimate/scripts/inpage/clock.js:1Low confidence
- Executable script in a comment of a file that runsreanimate/scripts/inpage/gl-hooks.js:1Low confidence
- Executable script in a comment of a file that runsreanimate/scripts/lib.ts:1Low confidence
- Executable script in code of a file that runsreanimate/scripts/package.json:1High confidence
- Executable script in code of a file that runsreanimate/scripts/setup.sh:1High confidence
- Network access in code of a file that runsreanimate/scripts/setup.sh:5High confidence
- Network access in code of a file that runsreanimate/scripts/setup.sh:6High confidence
- Network access in code of a file that runsreanimate/scripts/setup.sh:7High confidence
- Executable script in a comment of a file that runsreanimate/scripts/sheet.ts:1Low confidence
Works with
| Agent | Status | Evidence | Install to |
|---|---|---|---|
| Claude Code | Compatible | Standard SKILL.md skills/reanimate/SKILL.md | .claude/skills/<skill-name>/ |
| Codex | Native | Manifest site/AGENTS.md | .agents/skills/<skill-name>/ |
| Cursor | Compatible | Standard SKILL.md skills/reanimate/SKILL.md | .cursor/skills/<skill-name>/ |
| Gemini CLI | Compatible | Standard SKILL.md skills/reanimate/SKILL.md | .gemini/skills/<skill-name>/ |
| GitHub Copilot | Compatible | Standard SKILL.md skills/reanimate/SKILL.md | .github/skills/<skill-name>/ |
| OpenCode | Compatible | Standard SKILL.md skills/reanimate/SKILL.md | .opencode/skills/<skill-name>/ |
- Native The repository ships a manifest, folder or frontmatter field for this agent.
- Compatible A standard SKILL.md that this agent can read.
- Unknown No evidence either way.
Derived automatically from paths, manifests and frontmatter. Not tested on each agent.
Explore alternatives and comparisons
Add this badge to your README
It updates every night and links to this page.
[](https://hotskills.dev/skill/niazmorshed2007-reanimate/)