Documentation
Turn any animation into a Motion Blueprint
MotionLens watches a UI animation and hands your AI coding agent a precise, framework-agnostic description it can build from — trigger, sequence, timing, easing, and feel.
Quickstart
Three steps, about a minute:
- Sign in and open the dashboard. New accounts get 5 free credits — no card.
- Drop in a short clip (MP4/MOV/GIF) of the animation you want, or paste a link and let the recorder capture it.
- Pick a mode and hit Analyze. You get a Motion Blueprint you can copy straight into Claude Code, Cursor, or any agent.
Analysis modes
Each mode trades depth for credits — pick per clip:
- Standard (2 credits) — the full Blueprint (summary, timeline, per-element motion) plus a captioned storyboard of key frames so you (and multimodal agents) can see the motion, not just read it. Best for most clips.
- Precision (3 credits) — runs an extra geometry pass that disambiguates tricky mechanics (scale vs. slide vs. camera-pan) for the highest-fidelity spec.
The Motion Blueprint
Every analysis returns one structured Blueprint. It's framework-agnostic — the same spec works for React, React Native, Flutter, SwiftUI, or Jetpack Compose:
{
"summary": "one plain-English sentence",
"trigger": "load | scroll | hover | tap | other",
"elements": ["short names of the elements"],
"timeline": [{ "t": "0.0s", "event": "what happens" }],
"motion": [{
"element": "which element",
"change": "fade | slide | scale | blur | ...",
"from": "start state", "to": "end state",
"duration_ms": 300, "easing": "ease-out",
"stagger_ms": 60, "direction": "up|down|in|out|none"
}],
"feel": ["smooth", "springy", "premium"],
"agent_prompt": "ready-to-paste instruction for a coding agent",
"confidence": "high | medium | low"
}Honest promise: a Blueprint gets your agent ~85–90% of the way there — you tweak the last bit of feel. It's not a pixel-perfect clone.
Use it with your agent
Hit Copy Blueprintand paste it into your agent's chat, or use the built-in agent prompt. Tell the agent to "preserve the feel over exact pixels" and it will implement the motion in your stack.
MCP server
MotionLens runs as an MCP server, so your agent can analyze motion without leaving the editor. Once connected, two tools are available — analyze_video and analyze_url. See the API Reference for parameters and response shapes.
Credits & plans
Analyses cost credits by mode (Standard 2 · Precision 3). Free includes 5 credits, Pro is $9/mo for 150, Studio is $19/mo for 300. Refunds are automatic if an analysis fails. See pricing for the full breakdown.