See how it moves.

Tweenshot captures an element's animation frame by frame. Flag the wrong frame and hand it to AI.

Add to Chrome
Open
DesignDue Nov 6

Homepage hero

New headline, product shot and motion for the first fold.

JKAM72%

Hover the card

article.stream-card14 frames, 0 to 433 ms

Select a frame to read its values.

From a hover to a bug report in four steps.

  1. Pick an element

    Point at anything on the page, or find it by CSS selector. Arrow keys move to the parent, children and siblings.

    Tweenshot's capture panel open over a project dashboard, with the Hover trigger selected for a workstream card.

  2. Capture every frame

    Hover, focus, press and click are triggered for you. CSS, Web Animations and GSAP are stepped to exact times; canvas and drags are recorded live.

    A contact sheet of 27 numbered, timed frames of the card's hover and exit animation.

  3. Flag the frame that looks wrong

    Step through frames, compare them in onion skin or difference view, and write down what is off.

    The editor showing frame 3 at 100 ms, flagged with a note and the CSS values at that frame.

  4. Copy it for AI

    The sheet goes out with a Markdown spec: selector, keyframes, timing and the CSS of every frame.

    The Spec tab with a note for the AI and the Markdown spec ready to copy.

What your AI chat receives.

The flagged frame comes first, with its values, so the fix starts where the problem is.

contact-sheet.png 
# Animation capture: `article.stream-card` 27 frames from 0 to 840 ms, hover by Tweenshot.The attached sheet shows every frame in reading order. ## Flagged frames- Frame #3 at 100 ms (enter): Shadow is already full  while the card has barely lifted.  transform: translate(0px, -1.84px)  box-shadow: 0 24px 40px -16px rgba(28, 27, 25, 0.32) ## Transitions  transform   360ms cubic-bezier(0.4, 0, 0.2, 1)  box-shadow  100ms ease-out
A captured region of a dashboard, marked up with an arrow, numbered steps, a highlighter and a pixelated email address.

Screenshots, too.

Capture the visible area, the full page, a region or one element, then mark it up before you share it.

  • RegionAltShiftR
  • Full pageAltShiftF
  • Visible areaSet a shortcut
  • ElementSet a shortcut

Pen, highlighter, arrow, shapes, text, numbered steps and pixelate. Marks stay apart from the original.

Nothing leaves your device.

  • No account, no analytics, no network requests.
  • It runs only in the tab you capture, and only after you start it.
  • Exports drop the page address's query string. Specs redact form values and secret-looking attributes.
Read the privacy policy

What it asks Chrome for

activeTab
Capture the tab you started a capture in, and only that tab
scripting
Load the picker and capture panel into that tab
tabCapture offscreen
Read that tab's picture frame by frame, locally
downloads
Save exports to your Downloads folder
storage unlimitedStorage
Keep settings and recent captures on this device

Catch the frame that's wrong.

Add to Chrome

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