Chrome extension
Turn any web animation into code
Capture an animation on a live page and export it as HTML and CSS, a React component, JSON or a prompt for your AI assistant. The keyframes, durations and easing are the ones the browser really ran.
Capture and preview with no account. A free account lets you copy and download.
Four exports from one capture
Pick the element, play the animation, then choose how you want it. Every export carries the same data: each animated property with its keyframes, duration, delay and easing curve.
HTML and CSS
A single self-contained file you can open in a browser. Plain @keyframes and transitions, no build step and no library.
React component
A component that plays the same motion, ready to drop into a React project and restyle.
JSON
The raw tracks, values and timing. Useful for your own tooling, a motion library, or checking exact numbers.
AI prompt
A prompt for Claude, ChatGPT or Cursor with the exact motion spec, so the assistant builds it into your code instead of guessing.
Why not just read the source?
Production code is minified, split across files and often driven by JavaScript. A GSAP timeline or a Web Animations API call does not show up in the Styles panel. DevTools can show one CSS animation at a time, but not a dozen tracks with their own delays. Capture Motion watches what actually moves and writes it down in a format you can use.
| Reading the source | Capture Motion | |
|---|---|---|
| CSS transitions and keyframes | Yes, if you can find them | Yes |
| GSAP, WAAPI, Lottie | Hard, the values live in scripts | Yes |
| Hover animations | Needs forced states in DevTools | Triggered with a real hover |
| Output | Whatever you rewrite by hand | HTML and CSS, React, JSON, AI prompt, Figma |
Three steps
- Pick the element. Click the extension and choose the button, card or section that animates.
- Play it. Hover, click or scroll so the animation runs. Every animated property is recorded.
- Export. Copy the HTML and CSS, the React component, the JSON or the AI prompt. Or send it to Figma first and design on top of it.
Learn the details
Questions
What code formats can I export?
A self-contained HTML file with CSS, a React component, JSON with the raw keyframes and timing, and a prompt for AI coding assistants such as Claude, ChatGPT and Cursor. The same capture can also go to Figma as a Figma Motion timeline.
Does it work if the site uses GSAP or Lottie?
Yes. The extension captures CSS transitions and keyframes, the Web Animations API, GSAP and Lottie, and records what the browser actually animated, whatever library drove it.
Do I need an account to export?
You can capture and preview without an account. Copying or downloading an export needs a free account. See the pricing page for plan details.
Why would I use the AI prompt instead of the code?
When you want the motion inside your own components and styles. The prompt gives your assistant the exact keyframes, durations and easing, so it rebuilds the animation in your codebase instead of inventing one.
Is the exported code a copy of the site's source?
No. It is generated from the captured motion values, not lifted from the site's files. Use it with your own visuals and do not reuse another brand's assets.