Agent skill

Animation Reverse Engineering

by sendaifun in sendaifun/skills

Breaks a shared video or GIF down frame by frame to recreate its motion as working code instead of guessing the timing by eye.

MITAuto-check passedFrontend & Design

Install Animation Reverse Engineering

skills CLI
$ npx skills add sendaifun/skills --skill animation-reverse-engineering -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install sendaifun/skills animation-reverse-engineering --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ 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-src

Use ~/.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/

Facts

Skill name
animation-reverse-engineering
GitHub stars
130
Token cost
~2.1k tokens
SKILL.md length
882 words
Files
11 (incl. scripts, references)
Skills in repo
24
Repo updated
First seen
Licence
MIT

At a glance

Breaks a shared video or GIF down frame by frame to recreate its motion as working code instead of guessing the timing by eye.

  • Works in 10 steps: Classify the animation → 5 — No reference yet? Help the user… → Acquire → …
  • Recreating a motion effect seen in a shared video or GIF
  • SKILL.md covers Phase 0 — Classify the animation, Phase 0.5 — No reference yet?…, Phase 1 — Acquire and Phase 2 — Overview contact sheet, plus 8 more sections
  • Runs Shell scripts from its folder; calls ffmpeg, ffprobe and brew

What it does

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.

When your agent uses it

  • 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

Example prompts

  • “Implement this text-sweep animation from the video I just shared.”
  • “How does this slider's drag interaction actually move, frame by frame?”
  • “Port this modal entrance effect into our React component.”

Requirements

  • yt-dlp, ffmpeg, and ffprobe for downloading and inspecting reference video

Workflow steps

10 steps, taken from the step headings in SKILL.md.

  1. Classify the animation
  2. 5 — No reference yet? Help the user discover one
  3. Acquire
  4. Overview contact sheet
  5. Crop-band frame stacks
  6. Analysis checklist
  7. HTML motion lab (optional, decide deliberately)
  8. Production port
  9. Verify against the reference
  10. Document

What it can do on your machine

Read from SKILL.md and the folder at commit 06b36b8. It shows what the files ask for, not the result of running them.

  • Tool permissions

    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.

  • Runs code

    Ships 1 file in scripts/ (Shell), which the agent can run.

    Shell commands in SKILL.md call:

    • ffmpeg
    • ffprobe
    • brew

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • github.com
    • 60fps.design
    • x.com
    • mobbin.com
    • dribbble.com
    • pinterest.com
    • awwwards.com
    • godly.website

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

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.

Always · name and description, kept in context so the agent knows when to use it
~212
When it runs · the whole SKILL.md, loaded when a task matches
~2.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~8.2k

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.

Safety

Auto-check passed

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.

SKILL.md

The full file from sendaifun/skills at commit 06b36b8, republished under its MIT licence (© sendaifun). 882 words, ~2,147 tokens.

Download SKILL.mdSave it as .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.
name
animation-reverse-engineering
description
Reverse-engineer any motion reference (a video from X/Twitter, Dribbble, a screen recording, a GIF) into production animation code through frame-level dissection. Use when the user shares a video/URL and says "implement this animation", "recreate this motion", "port this interaction", "how does this animate", "clone this effect", or wants to study how a reference moves before building it. Covers both timeline choreography (entrances, text sweeps, staggers) and interaction-driven motion (scrubbers, sliders, drag-driven scenes). Also fires when the user asks where to find good animation references or inspiration — it suggests curated sites and X accounts to hunt, then reverse-engineers whatever they bring back. Ports default to React/TypeScript with framer-motion; the analysis phases are framework-agnostic.
category
Frontend
tags
animation, motion, frontend, ui, framer-motion
license
MIT
metadata.author
scriptscrypt
metadata.version
1.0

Animation Reverse-Engineering → Production Port

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 → document

Phase 0 — Classify the animation

Before anything, decide which species you're studying. It changes the analysis checklist and the port architecture:

SpeciesDriven byExamplesPort shape
Timeline choreographyTime (mount, trigger)Page entrances, text sweeps, staggered lists, modalsKeyframes, springs, delays, AnimatePresence
Interaction-drivenUser input (drag, scroll, hover)Scrubbers, sliders, pull-to-refresh, scroll scenesOne progress value → property mappings + derived discrete state

Hybrids exist (an interaction that triggers timelines — e.g. release-to-reset rewinds). Classify each layer separately.

Phase 0.5 — No reference yet? Help the user discover one

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):

  • 60fps.design + @60fpsdesign on X — curated best-in-class app animations
  • Mobbin — screen recordings of real shipped product flows
  • Dribbble — search "<pattern> animation"; most shots are video
  • Pinterest — goldmine for "ui animation" / "micro interaction" pins
  • Awwwards / Godly — motion-heavy websites (screen-record)
  • X craft accounts: @emilkowalski_, @raunofreiberg, @jh3yy, @jsngr

Ask them to bring back a link or screen recording, then continue at Phase 1.

Phase 1 — Acquire

  • Download the reference (yt-dlp handles X/Twitter, YouTube, most hosts; plain curl for direct mp4/GIF; ask the user for a screen recording if undownloadable).
  • Check tooling first: command -v yt-dlp ffmpeg ffprobe — install what's missing (brew install yt-dlp ffmpeg) before starting.
  • Probe before dissecting — fps, resolution, duration set every later command:
bash
ffprobe -v error -select_streams v:0 \
  -show_entries stream=width,height,r_frame_rate,duration,nb_frames \
  -of default=nw=1 ref.mp4

See references/acquisition.md for edge cases.

Phase 2 — Overview contact sheet

One tiled grid at ~2fps to map the whole video and find the transition windows:

bash
ffmpeg -i ref.mp4 -vf "fps=2,scale=270:270,tile=7x5" overview.png

Read it and note: distinct states, when each transition starts/ends, what the interactions are (finger/cursor visible?), and which screen regions matter.

Phase 3 — Crop-band frame stacks

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.

bash
# 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.png

Start stacks ~0.3s before visible motion so you capture the exit phase, not just the entrance. Full recipes in references/dissection.md.

Phase 4 — Analysis checklist

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):

  1. Which properties change (translate, opacity, scale, blur, letter-spacing…)
  2. Direction grammar (conveyor vs mirror)
  3. Stagger order (forward, reverse-index, center-out)
  4. Feather — how many units are mid-transition simultaneously
  5. Easing measured from frame-by-frame deltas — never guessed
  6. Asymmetric timing (fast exit + long settle is the norm)
  7. Handoff overlap between elements
  8. Intermediate/transient values
  9. What explicitly does NOT move

Interaction-driven (full list in references/porting-interactions.md):

  1. The progress domain — what does 0→1 span? Is it clamped, rubber-banded, wrapped?
  2. Continuous mappings — which properties interpolate smoothly with progress (gradients, positions, magnification fields)
  3. Discrete derivations — which values step at thresholds, and how each step transitions (crossfade? roll? hard cut?) — check for ghost frames at 60fps
  4. Interaction grammar — every gesture and button: does reset jump or rewind? does release snap, settle, or stay? is there an autoplay?
  5. State-dependent chrome — does the scene's palette/theme flip at some progress value (e.g. day→night)? Does the flip lead or lag the continuous background?
  6. Smoothing — does the driven value track input 1:1 or through a spring?
Show full SKILL.md (282 more words)Show less

Phase 5 — HTML motion lab (optional, decide deliberately)

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.

Phase 6 — Production port

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.

Phase 7 — Verify against the reference

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.

Phase 8 — Document

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.

Worked examples

  • 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)

Ethics

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

Files

SKILL.md and 10 other files (scripts, references) in skills/animation-reverse-engineering of sendaifun/skills.

  • SKILL.md
  • references/acquisition.md
  • references/analysis.md
  • references/discovery.md
  • references/dissection.md
  • references/examples/text-sweep.md
  • references/examples/timelapse-slider.md
  • references/porting-framer-motion.md
  • references/porting-interactions.md
  • references/verification.md
  • scripts/dissect.sh

Open the folder on GitHubat commit 06b36b8

Compare with similar skills

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.

Animation Reverse Engineering compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Animation Reverse Engineering this skillsendaifun/skills130—~2.1kAutomated safety check: PassMIT
Animated React Component LibrariesHainrixz/editor-pro-max2641 repos~5.7kAutomated safety check: PassCustom licence
Motion Dev Animations199-biotechnologies/motion-dev-animations-skill1141 repos~2.8kAutomated safety check: NotesMIT
Goey Toastanl331/goey-toast1.3k—~1.3kAutomated safety check: WarnMIT
Shader for Interfacesv2space-labs/shader-for-interfaces115—~3.1kAutomated safety check: PassMIT
Frontend UI Dark TSmicrosoft/skills3.1k5 repos~3.6kAutomated safety check: PassMIT

Similar skills

  • 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.

    264 GitHub starsUsed in 1 repo~5.7k tokens
    Frontend & DesignAuto-check passed
  • Motion Dev 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.

    114 GitHub starsUsed in 1 repo~2.8k tokens
    Frontend & DesignAuto-check: notes
  • Goey Toast

    anl331/goey-toast

    Install and use goey-toast — a gooey, morphing React toast component built on Sonner with Framer Motion.

    1.3k GitHub stars~1.3k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check: warnings
  • Shader for Interfaces

    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.

    115 GitHub stars~3.1k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed
  • Frontend UI Dark TS

    microsoft/skills

    Official

    Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations.

    3.1k GitHub starsUsed in 5 repos~3.6k tokens
    Frontend & DesignAuto-check passed
  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 41 repos~769 tokens
    Frontend & DesignAuto-check passed

More from sendaifun/skills

All 24 skills in this repo
  • Builds and debugs Arcium encrypted computation apps on Solana: Arcis circuits, Anchor orchestration, encrypted inputs and the init, queue and callback flow.

    130 GitHub stars~2.8k tokensUpdated 2 mo ago
    Auto-check passed
  • Coingecko

    sendaifun/skills

    Complete CoinGecko Solana API integration for token prices, DEX pool data, OHLCV charts, trades, and market analytics.

    130 GitHub starsUsed in 1 repo~4.8k tokens
    Auto-check: notes
  • Phantom Connect SDK

    sendaifun/skills

    Integrates Phantom wallet connection, social login, and transaction signing into React, React Native, or vanilla JS apps on Solana.

    130 GitHub stars~1.3k tokensUpdated 2 mo ago
    Auto-check passed
  • Integrating Jupiter

    sendaifun/skills

    Comprehensive guidance for integrating Jupiter APIs (Ultra Swap, Lend, Perps, Trigger, Recurring, Tokens, Price, Portfolio, Prediction Markets, Send, Studio, Lock, Routing).

    130 GitHub starsUsed in 1 repo~5.1k tokens
    Auto-check passed
  • Pinocchio Development

    sendaifun/skills

    Comprehensive guide for building high-performance Solana programs using Pinocchio - the zero-dependency, zero-copy framework.

    130 GitHub starsUsed in 1 repo~4.1k tokens
    Auto-check passed
  • Ranger Finance

    sendaifun/skills

    Ranger Finance SDK for building perpetual futures trading applications on Solana.

    130 GitHub starsUsed in 1 repo~3.6k tokens
    Auto-check: notes

Works with

Questions about Animation Reverse Engineering

What does Animation Reverse Engineering do?

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.

When should I use Animation Reverse Engineering?

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.

How do I install Animation Reverse Engineering in Claude Code?

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.

How do I install Animation Reverse Engineering in Codex?

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.

Can I use Animation Reverse Engineering in Cursor, Gemini CLI or GitHub Copilot?

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.

What does Animation Reverse Engineering need to run?

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.

Does Animation Reverse Engineering access the network?

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.

Is Animation Reverse Engineering safe to install?

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.

What licence does Animation Reverse Engineering use?

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.

How many tokens does Animation Reverse Engineering use?

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.

What are the alternatives to Animation Reverse Engineering?

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.

Who maintains Animation Reverse Engineering?

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.