Audio for Motion: Lifetime Plans Are Live: Get 20% OFF on Plus plan with Coupon - AUDIO20
Capture Motion plugin iconCAPTURE MOTION - FIGMA PLUGIN

Turn web animationinto editablemotion

Pick an element on a web page and Capture Motion detects how it actually animates on load, on hover or on scroll into view. Then it hands you the real duration, easing and delay as runnable code or a real Figma Motion layer.

Capture Motion
Real capture

Reads WAAPI, CSS, GSAP, Lottie and canvas animations straight from the browser.

Export as code

Every capture ships with ready-to-use CSS, React and GSAP snippets.

Bring it into Figma

Paste a capture into the companion plugin and get a real, animated Figma layer.

Everything you need to capture and reuse motion

Real animation data, read straight from the browser and not guessed from a single frame.

capture-motion / preview

One capture. The full sequence, real.

Capture Motion replays the actual transition, even ones that finished before you opened it, and reconstructs the full keyframe sequence instead of guessing from one frame.

Detection & capture

  • Detects animations on load, hover and scroll into view
  • Reads WAAPI animations directly from the browser
  • Captures CSS transitions and @keyframes
  • Supports GSAP tweens and Lottie files
  • Canvas-based capture as a last-resort fallback
  • Real duration, easing and delay, never approximated

Export as code

Drop the exact motion into your project, no rebuilding.

Figma integration

  • Paste a capture into the Capture Motion Figma plugin
  • Rebuilds the element's real appearance
  • Recreates it as an actual animated Figma layer
  • Not a screenshot or a video: a layer you can inspect and adjust

Use with your LLM

  • "Copy for LLM" bundles the capture with a ready-made instruction
  • Paste into Claude, ChatGPT or any other AI assistant
  • Produces a working HTML/CSS/JS reproduction
  • No extra typing needed

From live site to editable motion

Five steps. No account, no re-timing anything by hand.

  1. 1

    Open Capture Motion

    Launch the extension on any website. No setup required.

  2. 2

    Pick an element

    Select the element on the page whose animation you want to capture.

  3. 3

    Detect the animation

    Capture Motion reads how it animates on load, hover or scroll into view.

  4. 4

    Get the real values

    Exact duration, easing and delay reconstructed from the actual animation, not guessed.

  5. 5

    Export anywhere

    CSS, React, GSAP, a Figma layer, or a ready-made prompt for your favourite LLM.

Loved by makers and teams worldwide

Real feedback from people who use Capture Motion every day.

“The 'Copy for LLM' option is genuinely the fastest part of my workflow now. Capture the animation, paste it into Claude and I get a working reproduction without typing a single line of easing math myself.”

E
ElenaUI Designer

“Our designers used to hand me a video of a reference animation and say 'something like this.' Now they paste a Capture Motion export into Figma and I get the actual timing, not a vibe.”

P
PriyaProduct Designer

“I have tried plenty of tools for reverse-engineering animations. Capture Motion is the first one that reconstructs the whole keyframe sequence instead of a single frame and hands me a working GSAP snippet in seconds.”

D
DevanshCreative Developer

“I used to eyeball easing curves off a competitor's site and just guess. Capture Motion pulls the real duration and easing straight out of the browser, so I stopped guessing entirely.”

R
RaviFrontend Engineer

Capture Motion: frequently asked questions

What is Capture Motion?

Capture Motion lets you pick an element on a web page and detects how it actually animates on load, on hover or on scroll into view. You get the real duration, easing and delay as runnable code or a Figma Motion layer.

Which types of animation can it capture?

It reads WAAPI animations directly from the browser, plus CSS transitions and @keyframes, GSAP tweens and Lottie files. Canvas-based capture is available as a last-resort fallback.

Are the timing values real or approximated?

They are real. Capture Motion replays the actual transition, even ones that finished before you opened it, and reconstructs the full keyframe sequence instead of guessing from a single frame.

What can I export?

You can export ready-to-use CSS, React (Framer Motion) and GSAP snippets, or a real Figma layer. There is also a "Copy for LLM" option that bundles the capture with a ready-made instruction for Claude, ChatGPT or any other AI assistant.

How does it work with Figma?

Paste a capture into the Capture Motion Figma plugin. It rebuilds the element's real appearance and recreates it as an actual animated Figma layer, not a screenshot or a video, so you can inspect and adjust it.

Capture any animation

Stop guessing.
Start capturing.

Turn any website animation into ready-to-use code or a real, editable Figma Motion layer, captured with its real timing and not an approximation.

Try Capture Motion

More plugins for faster Figma workflows

More Figma plugins for image conversion, audio and animation, built to keep your workflow inside Figma.

Image to Figma Design plugin icon

Image to Figma Design

Transform any image or screenshot into an editable Figma design with AI. Real layers, real components, pixel-accurate layouts.

Learn more
Audio for Motion plugin icon

Audio For Figma

Real sound effects, voiceovers and music synced live to the Motion playhead, right inside Figma.

Learn more
Capture Motion Chrome extension icon

Capture Motion - Chrome Extension

Point at an element and read how it actually animates: duration, easing, delay and the full keyframe sequence.

Learn more