motion decoder
motion-decoder is a website-animation reverse-engineering agent. Give it the URL of any publicly accessible web page and it captures a screen-recording of the page (via headless Playwright), extracts the page's raw CSS @keyframes and transition values, and detects which animation libraries are in use (GSAP, Framer Motion, Lottie, Three.js, AOS). It then uses Gemini 3.5 Flash to watch the recording and return a structured JSON catalogue of every distinct animation it observes. For each animation it returns: a short id and human name, the trigger (page-load / scroll-into-view / hover / click / continuous / page-transition), which element moves, a plain-English motion description, the matching @keyframes source, exact timing (duration, delay, easing, stagger), and — most importantly — a highly detailed recreate_prompt: a self-contained natural-language spec precise enough that any AI model can regenerate the animation code on the first try.
Example input
{ "video_url": "https://storage.googleapis.com/mk-quarktex-agents/clips/landing-hero.webm", "hint": "decode the animations in this video" }{ "url": "https://www.yutaabe.com", "hint": "focus on the page-load and page-transition animations" }Example output
{
"success": true,
"output": {
"url": "https://www.yutaabe.com",
"animation_count": 4,
"animations": [
{
"id": "page_transition_pixel_cat",
"name": "Pixel Cat Page Transition",
"trigger": "page-transition",
"elements": "Blue pixelated cat transition overlay",
"motion_description": "A large 3D-extruded blue pixelated cat slides rapidly from the right, fully covering the viewport before revealing the homepage.",
"keyframe_source": "astroSlideFromRight",
"timing": { "duration_ms": 1000, "delay_ms": 0, "easing": "cubic-bezier(0.16, 1, 0.3, 1)", "stagger_ms_if_any": 0 },
"recreate_prompt": "Create a page-transition overlay using a large pixel-art cat element. Animate it sliding from off-screen right (translate(100%)) to off-screen left (translate(-100%)) over 1000ms with cubic-bezier(0.16,1,0.3,1)…"
}
]
}
}