Skip to content

Motiscope

Recreate any web animation from a screen recording. A motion-design plugin: analyzes motion (timing, easing, stagger, loops) and rebuilds it as GSAP / CSS / Framer Motion /…

Install

$/plugin marketplace add github:KumarSashank/motiscope

Install command taken from the project's README or registry entry. Always review code before running it.

motiscope

See the motion, recreate the animation. Drop a screen recording of an animation — get working GSAP / CSS / Framer Motion / Lottie code.

🔗 Live site · Quickstart · Install · Platforms · How it works


A motion-design tool for coding agents. Pure Python (standard library) + ffmpeg. No cloud, no npm, no accounts required. Ships as a Claude Code plugin, and as portable agent skills for Codex, Cursor, and anything that reads AGENTS.md.

"I want this animation on my site." — drop the clip, run /motiscope:analyze, then /motiscope:recreate gsap.

Demo — original → recreated

Left: the original.  Right: recreated with motiscope.  (one clip, so the beats stay in sync)

motiscope measured the motion of the tomato — a 4.45s clock, the wake-and-wave beats, and the easing curve of each. The banana is an original character built on that measured motion: an 11 KB animated SVG. The timing transfers; the artwork doesn't have to.

Original animation from SVGator's website-animation examples — all credit to the original creator. → full example · gallery

Ambient geometric loop — fifteen tiles, one beat

Left: the original.  Right: recreated with motiscope.

Fifteen tiles spin, scroll and ripple. motiscope measured a 0.75s master beat — burst peaks at 0.317 / 1.067 / 1.817s, agreeing to ±0.02s across three independent tiles — and an easing whose peak angular speed is 3.6× the mean, far sharper than a stock ease-in-out. The result is 14 KB of animated SVG with no JavaScript. Only the palette changed.

The whole-frame summary said linear. Per tile it isn't — the velocity drops to near zero and ramps again. That's the point: the report gives you the timing, you read the frames.

→ Live recreation · raw analysis + build script · original on SVGator

How it works

motiscope does the one thing a vision model can't do from a screenshot — measure time — and hands everything else to the model:

  1. The numbers measure the WHEN. A dense per-frame motion-energy curve (native fps, effectively free) plus ffmpeg signal analysis (scdet, freezedetect, blackdetect, siti, signalstats) give the exact timing: durations, the per-segment easing curve (a real cubic-bezier fitted from the velocity profile), beat/segment boundaries, stagger timing, and loop period. A still has no time axis — so this is the part that can't be guessed. It's the moat.
  2. The frames carry the WHAT. motiscope curates the keyframes that matter (chosen by the motion signal) and hands them to the model. Claude reads them with full vision to identify the elements and what kind of animation each is — fade, slide, scale, mask reveal, path draw, morph, 3D flip, text effect, whatever it sees. motiscope deliberately does not classify animation types — the model is better at that than any hand-coded taxonomy, so there's no fixed list to box you in.

Similar plugs

Orca is the ADE for working with a fleet of parallel agents. Run any coding agent with your own subscription. Available on desktop, mobile and remote runtime.

CLI proxy that reduces LLM token consumption by 60-90% on common dev commands. Single Rust binary, zero dependencies

Documented system prompts from Anthropic - Claude Fable 5.1, Opus 5.5, Claude Design, Claude Code. OpenAI - ChatGPT GPT-6-Astra, Codex. Google - Gemini 3.8 Flash, 3.1 Pro,…

Wrap Antigravity, ChatGPT Codex, Claude Code, Grok Build, Muse Code, Devin as an OpenAI/Gemini/Claude/Codex compatible API service, allowing you to enjoy the free Gemini…

Explore related