Animated React Component Libraries
Hainrixz/editor-pro-max
Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.
Breaks a shared video or GIF down frame by frame to recreate its motion as working code instead of guessing the timing by eye.
$ npx skills add sendaifun/skills --skill animation-reverse-engineering -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install sendaifun/skills animation-reverse-engineering --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/sendaifun/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/animation-reverse-engineering .claude/skills/animation-reverse-engineering && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "animation-reverse-engineering" agent skill from https://github.com/sendaifun/skills/tree/main/skills/animation-reverse-engineering into .claude/skills/animation-reverse-engineering/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animation-reverse-engineering", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/sendaifun/skills/tree/main/skills/animation-reverse-engineeringType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add sendaifun/skills --skill animation-reverse-engineering -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install sendaifun/skills animation-reverse-engineering --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sendaifun/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/animation-reverse-engineering .agents/skills/animation-reverse-engineering && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "animation-reverse-engineering" agent skill from https://github.com/sendaifun/skills/tree/main/skills/animation-reverse-engineering into .agents/skills/animation-reverse-engineering/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animation-reverse-engineering", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add sendaifun/skills --skill animation-reverse-engineering -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install sendaifun/skills animation-reverse-engineering --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sendaifun/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/animation-reverse-engineering .cursor/skills/animation-reverse-engineering && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "animation-reverse-engineering" agent skill from https://github.com/sendaifun/skills/tree/main/skills/animation-reverse-engineering into .cursor/skills/animation-reverse-engineering/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animation-reverse-engineering", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/sendaifun/skills.git --path skills/animation-reverse-engineering--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add sendaifun/skills --skill animation-reverse-engineering -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install sendaifun/skills animation-reverse-engineering --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sendaifun/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/animation-reverse-engineering .gemini/skills/animation-reverse-engineering && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "animation-reverse-engineering" agent skill from https://github.com/sendaifun/skills/tree/main/skills/animation-reverse-engineering into .gemini/skills/animation-reverse-engineering/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animation-reverse-engineering", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install sendaifun/skills animation-reverse-engineeringInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add sendaifun/skills --skill animation-reverse-engineering -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/sendaifun/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/animation-reverse-engineering .github/skills/animation-reverse-engineering && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "animation-reverse-engineering" agent skill from https://github.com/sendaifun/skills/tree/main/skills/animation-reverse-engineering into .github/skills/animation-reverse-engineering/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animation-reverse-engineering", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add sendaifun/skills --skill animation-reverse-engineering -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install sendaifun/skills animation-reverse-engineering --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sendaifun/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/animation-reverse-engineering .opencode/skills/animation-reverse-engineering && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "animation-reverse-engineering" agent skill from https://github.com/sendaifun/skills/tree/main/skills/animation-reverse-engineering into .opencode/skills/animation-reverse-engineering/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animation-reverse-engineering", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
animation-reverse-engineeringBreaks a shared video or GIF down frame by frame to recreate its motion as working code instead of guessing the timing by eye.
This skill turns a motion reference — a video link, screen recording, or GIF — into working code through a staged pipeline: acquire, overview, dissect, analyse, optionally prototype, port, verify, and document. It starts by classifying whether the motion is timeline-driven, such as an entrance or staggered list, or interaction-driven, such as a scrubber or slider, since that changes both the checklist and how the port gets built.
When no reference exists yet, it points toward curated sites and accounts worth searching before resuming the pipeline once something is found. Ports default to React and TypeScript using framer-motion, though the earlier analysis phases stay framework-agnostic, with detailed guidance for acquisition and porting kept in the skill's own reference files.
10 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 06b36b8. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Ships 1 file in scripts/ (Shell), which the agent can run.
Shell commands in SKILL.md call:
ffmpegffprobebrewFrom the folder's file list and the shell code blocks in SKILL.md.
Links to these hosts (documentation or services it may open):
github.com60fps.designx.commobbin.comdribbble.compinterest.comawwwards.comgodly.websiteFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Animation Reverse Engineering loads about 2.1k tokens when it runs, and up to ~8.2k if it reads all its reference files. Until then it costs about 212 tokens; SKILL.md has 882 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
The full file from sendaifun/skills at commit 06b36b8, republished under its MIT licence (© sendaifun). 882 words, ~2,147 tokens.
.claude/skills/animation-reverse-engineering/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.Source & upstream: scriptscrypt/animation-reverse-engineering — improvements land there first.
Turn a motion reference into faithful production code via a measured, frame-level pipeline instead of eyeballing. Eyeballing a video at 1× lies about easing, stagger order, overlap, and timing — always dissect first.
acquire → overview → dissect → analyse → (prototype) → port → verify → documentBefore anything, decide which species you're studying. It changes the analysis checklist and the port architecture:
| Species | Driven by | Examples | Port shape |
|---|---|---|---|
| Timeline choreography | Time (mount, trigger) | Page entrances, text sweeps, staggered lists, modals | Keyframes, springs, delays, AnimatePresence |
| Interaction-driven | User input (drag, scroll, hover) | Scrubbers, sliders, pull-to-refresh, scroll scenes | One progress value → property mappings + derived discrete state |
Hybrids exist (an interaction that triggers timelines — e.g. release-to-reset rewinds). Classify each layer separately.
If the user wants a great animation but has no reference link, don't invent
motion from scratch — send them hunting and offer this shortlist (full list,
search phrases, and capture tips in references/discovery.md):
<pattern> animation"; most shots are videoAsk them to bring back a link or screen recording, then continue at Phase 1.
yt-dlp handles X/Twitter, YouTube, most hosts; plain
curl for direct mp4/GIF; ask the user for a screen recording if undownloadable).command -v yt-dlp ffmpeg ffprobe — install what's
missing (brew install yt-dlp ffmpeg) before starting.ffprobe -v error -select_streams v:0 \
-show_entries stream=width,height,r_frame_rate,duration,nb_frames \
-of default=nw=1 ref.mp4See references/acquisition.md for edge cases.
One tiled grid at ~2fps to map the whole video and find the transition windows:
ffmpeg -i ref.mp4 -vf "fps=2,scale=270:270,tile=7x5" overview.pngRead it and note: distinct states, when each transition starts/ends, what the interactions are (finger/cursor visible?), and which screen regions matter.
Extract dense vertical stacks of just the region that moves, at (or near) native
fps. Derive crop coordinates mathematically from the overview sheet's scale
factor — do not eyeball. Keep stacks to 14–17 rows for readability; use
not(mod(n,k)) sampling to fit; always pair select= with -vsync 0.
# every 2nd frame of frames 96–126, one region, 16 rows
ffmpeg -i ref.mp4 -vf "crop=W:H:X:Y,select='between(n,96,126)*not(mod(n,2))',tile=1x16" \
-frames:v 1 -vsync 0 stack.pngStart stacks ~0.3s before visible motion so you capture the exit phase, not just
the entrance. Full recipes in references/dissection.md.
Work through the checklist for your species (both, for hybrids). Write the findings down as a doc — this becomes the implementation spec and the verification baseline.
Timeline choreography (full list in references/analysis.md):
Interaction-driven (full list in references/porting-interactions.md):
A single self-contained HTML file (no deps) with toggles + speed slider, to lock timing before touching production. Build it when the animation is timeline-choreographed and timing/easing is the hard part. Skip it when the animation is interaction-driven — easing comes from the user's finger, so go straight to the production port and move the iteration loop into Phase 7 verification instead.
Default target is framer-motion (references/porting-framer-motion.md for the
pitfall table — filter containing-block trap, per-property transition delays,
double-animation nesting, rAF progress bars). For interaction-driven animations
use the one-MotionValue architecture in references/porting-interactions.md.
Phases 0–5 are framework-agnostic: the same analysis doc ports to CSS/WAAPI,
React Native Reanimated, or SwiftUI.
Don't stop at "it runs". Drive your implementation to the same states you
dissected (Playwright/browser automation), screenshot them, and compare against
the frame stacks from Phase 3. This is where mismatches surface — a theme flip
threshold that lags the sky, a crossfade that's too slow, a stagger running the
wrong direction. Loop: compare → adjust constant → re-screenshot. Method in
references/verification.md.
Record: source link, probe output, the analysis doc, tuning constants (with comments explaining which measurement each encodes), deliberate deviations from the reference (and why), and the exact ffmpeg commands so the dissection is reproducible.
references/examples/text-sweep.md — timeline species: the X Money
reverse-index text sweep (stagger math, blur feather, spring settle)references/examples/timelapse-slider.md — interaction species: a weather
timelapse scrubber (continuous sky interpolation, discrete hourly crossfades,
rewind-not-jump reset, scene theme flip)This skill is for studying motion technique — timing, easing, structure — to build your own work. Don't use it to ship 1:1 clones of a branded product's identity.
© sendaifun, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 10 other files (scripts, references) in skills/animation-reverse-engineering of sendaifun/skills.
Open the folder on GitHubat commit 06b36b8
Animation Reverse Engineering next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Animation Reverse Engineering this skillsendaifun/skills | 130 | — | ~2.1k | Automated safety check: Pass | MIT | |
| Animated React Component LibrariesHainrixz/editor-pro-max | 264 | 1 repos | ~5.7k | Automated safety check: Pass | Custom licence | |
| Motion Dev Animations199-biotechnologies/motion-dev-animations-skill | 114 | 1 repos | ~2.8k | Automated safety check: Notes | MIT | |
| Goey Toastanl331/goey-toast | 1.3k | — | ~1.3k | Automated safety check: Warn | MIT | |
| Shader for Interfacesv2space-labs/shader-for-interfaces | 115 | — | ~3.1k | Automated safety check: Pass | MIT | |
| Frontend UI Dark TSmicrosoft/skills | 3.1k | 5 repos | ~3.6k | Automated safety check: Pass | MIT |
Hainrixz/editor-pro-max
Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.
199-biotechnologies/motion-dev-animations-skill
Creates 120fps GPU-accelerated animations with Motion.dev (Framer Motion successor) for React, Next.js, Svelte, and Astro projects.
anl331/goey-toast
Install and use goey-toast — a gooey, morphing React toast component built on Sonner with Framer Motion.
v2space-labs/shader-for-interfaces
Decides whether an interface effect belongs in CSS, SVG, Canvas 2D, WebGL or WebGPU, then builds, debugs and visually verifies focused GPU effects inside product UIs.
microsoft/skills
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations.
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
sendaifun/skills
Builds and debugs Arcium encrypted computation apps on Solana: Arcis circuits, Anchor orchestration, encrypted inputs and the init, queue and callback flow.
sendaifun/skills
Complete CoinGecko Solana API integration for token prices, DEX pool data, OHLCV charts, trades, and market analytics.
sendaifun/skills
Integrates Phantom wallet connection, social login, and transaction signing into React, React Native, or vanilla JS apps on Solana.
sendaifun/skills
Comprehensive guidance for integrating Jupiter APIs (Ultra Swap, Lend, Perps, Trigger, Recurring, Tokens, Price, Portfolio, Prediction Markets, Send, Studio, Lock, Routing).
sendaifun/skills
Comprehensive guide for building high-performance Solana programs using Pinocchio - the zero-dependency, zero-copy framework.
sendaifun/skills
Ranger Finance SDK for building perpetual futures trading applications on Solana.
Works with
Categories
Breaks a shared video or GIF down frame by frame to recreate its motion as working code instead of guessing the timing by eye. This skill turns a motion reference — a video link, screen recording, or GIF — into working code through a staged pipeline: acquire, overview, dissect, analyse, optionally prototype, port, verify, and document. It starts by classifying whether the motion is timeline-driven, such as an entrance or staggered list, or interaction-driven, such as a scrubber or slider, since that changes both the checklist and how the port gets built.
Animation Reverse Engineering fits situations like: recreating a motion effect seen in a shared video or GIF; porting a scroll-driven or drag-driven interaction into working code; finding animation references when you have no concrete example yet.
Run `npx skills add sendaifun/skills --skill animation-reverse-engineering -a claude-code`. Or copy the skill folder (skills/animation-reverse-engineering in sendaifun/skills) into .claude/skills/animation-reverse-engineering in your project. Claude Code loads it when a task matches its description.
Run `npx skills add sendaifun/skills --skill animation-reverse-engineering -a codex`. Or copy the skill folder (skills/animation-reverse-engineering in sendaifun/skills) into .agents/skills/animation-reverse-engineering in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add sendaifun/skills --skill animation-reverse-engineering -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/animation-reverse-engineering, .gemini/skills/animation-reverse-engineering, .github/skills/animation-reverse-engineering and .opencode/skills/animation-reverse-engineering in your project.
Going by SKILL.md and its folder, Animation Reverse Engineering needs a shell for the scripts in its folder and the command-line tools its instructions call (ffmpeg, ffprobe and brew). Our summary lists: yt-dlp, ffmpeg, and ffprobe for downloading and inspecting reference video.
SKILL.md names 8 domains. As links in the text: github.com, 60fps.design, x.com, mobbin.com, dribbble.com, pinterest.com, awwwards.com and godly.website. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
Animation Reverse Engineering is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.1k tokens (SKILL.md is roughly 8.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 6.1k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Animation Reverse Engineering: Animated React Component Libraries (Hainrixz/editor-pro-max, 264 stars), Motion Dev Animations (199-biotechnologies/motion-dev-animations-skill, 114 stars), Goey Toast (anl331/goey-toast, 1.3k stars) and Shader for Interfaces (v2space-labs/shader-for-interfaces, 115 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
sendaifun (a GitHub organization) maintains it in sendaifun/skills, which has 130 GitHub stars. The repository holds 24 skills in this directory. The repository was last updated on July 31, 2026.
Source: sendaifun/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.