By KumarSashank
Drop a screen recording of any web animation and motiscope measures timing, curates keyframes, and rebuilds it as GSAP, CSS, Framer Motion, or Lottie code — including full landing pages with scroll animations.
Analyze a screen recording of an animation to characterize its motion — timing, easing, transforms, and sequencing — so it can be recreated as web code. Use when the user drops or points at a video of an animation (.mp4/.mov/.webm/.mkv/.m4v/.avi/.gif) and says things like "I want this animation on my site", "recreate this motion", "how is this animated", or runs /motiscope:analyze.
Check and configure motiscope — verify ffmpeg/ffprobe are installed and scaffold the API-key config used for optional (stubbed) asset generation. Use for first-time setup, "motiscope isn't working", dependency errors, or /motiscope:doctor.
Rebuild a whole landing page / multi-section website from a screen recording that scrolls or walks through it. Use when the user has a recording of an ENTIRE page (not a single animation) and wants the full page recreated — layout, sections, copy, design system, and scroll animations. Orchestrates analyze (measured timing + section structure + curated frames) + asset generation + a full multi-section build. For one isolated animation, use /motiscope:recreate instead.
Recreate an analyzed animation as working web code — GSAP (JavaScript), CSS/Web Animations, Framer Motion (React), or Lottie/SVG. Use after /motiscope:analyze, or when the user asks to "build/recreate this animation in <framework>". Reads the motiscope animation spec and emits a runnable component.
Uses power tools
Uses Bash, Write, or Edit tools
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Executables (bin/) — files in this plugin's bin/directory are added to the Bash tool's PATH while the plugin is enabled.
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.
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
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
motiscope does the one thing a vision model can't do from a screenshot — measure time — and hands everything else to the model:
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.npx claudepluginhub kumarsashank/motiscope --plugin motiscopeProfessional SVG to Lottie animation skill with advanced bezier curves and motion graphics. Replace After Effects workflow.
Create beautiful, performant web animations for React and TypeScript applications. Includes background effects, text animations, 3D transforms, creative visual effects, Framer Motion, GSAP, and more.
Official GSAP skills for Claude, Cursor, and other AI agents — animations, timelines, ScrollTrigger, plugins, utilities, React, and performance
Skill for understanding and applying design motion principles with AI assistance.
Modern animation library for React and JavaScript. Create smooth, production-ready animations with motion components, variants, gestures (hover/tap/drag), layout animations, AnimatePresence exit animations, spring physics, and scroll-based effects. Use when building interactive UI components, micro-interactions, page transitions, or complex animation sequences.
HyperFrames by HeyGen. Write HTML, render video. Compositions, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website capture for HyperFrames.