Chrome · Edge · Brave · Arc · Opera

See motion
frame by frame.

Pick an element and Tweenshot plays its animation, splitting it into numbered, time-stamped frames. Flag the wrong one and copy it as an AI-ready spec.md.

Add to ChromeTry it yourself ↓

How it works

01 · Pick

Pick the element.

Click it, or use the keyboard: / searches by selector, arrow keys move to the parent, children and siblings.

02 · Trigger

Choose the trigger.

running hover focus click and more. Tweenshot replays the animation or triggers it for you.

03 · Capture

Capture it frame by frame.

CSS transitions, Web Animations and GSAP are paused and stepped to exact times. Anything else is recorded live from the tab.

04 · Flag

Flag the wrong frame.

In frame #10 the square squashes while still in the air: the squash starts 35 ms before the landing. The values at that moment are right there.

05 · Copy

Copy it for AI.

Selector, timing, flagged frames and their values in one Markdown spec. Paste it and ask.

Try it yourself

Right here, right now.
In your browser.

Choose a trigger and press Capture. The frames are really computed on this page: click one, read its values, flag it and copy the spec.

Open →
DesignDue Nov 6
Homepage hero
New headline, product shot and motion for the first fold.
JKAM72%
Hover the card, or press Capture

14 frames · 30 fps · 433 ms

#03100 ms

Highlights

Everything you need
to read motion.

Contact sheet

Numbered, time-stamped frames. Onion skin, difference view, a motion lane and per-frame CSS changes.

8 triggers

From hover to click, or all of them at once.

Keyboard first

Picking, triggering and reviewing.

Markup

Pen, arrow, rectangle, numbered steps. The original stays intact.

Onion skin

See frames on top of each other.

Pixelate

Keep private details hidden.

Export

Downloads/Tweenshot/

On your device

activeTab · no host permissions

Privacy

No account. No analytics. No network requests. Captures stay in your device's IndexedDB; exports go to Downloads.

Read the privacy policy →

Show the motion.

Free. Works in Chrome, Edge, Brave, Arc and Opera, version 116 or later.

Add to ChromeSource on GitHub
✓ Copied to clipboard