motiscope — recreate web animations from a screen recording

motiscope

what it does

Two signals: one measured, one seen.

motiscope reads the motion out of a recording the way a scope reads a waveform — then rebuilds it as code. Timing is measured off the curve; magnitudes are read off a few frames.

∿ measured — free<br>A dense per-frame motion-energy curve at native fps drives timing, easing, holds, fades, stagger and loop detection. Pure numbers, zero image tokens.

▖ seen — a few frames<br>A small curated set of PNG keyframes (~24–48) the model actually looks at to estimate which elements move and by how much — flagged as estimates.

how it works

The signal chain.

recording → curated frames → motion-energy curve → target-agnostic spec → animation code

A screenshot has no time axis. motiscope measures the<br>time — a dense motion-energy curve, a percentile-anchored hold threshold, and easing recovered<br>by integrating speed — and leaves perception to the model.

How it works, in full →<br>See it on real recordings

signature features

Built for real UI motion.

Localized energy<br>Small buttons & cards on a big page register as real motion instead of washing out in a whole-frame average.

Presets & focus<br>draft / balanced / detailed frame budgets, plus --start/--end windows and --fps to catch fast content.

Auto-decompose<br>Long/complex clips split into beats; frames follow the motion (allocated by magnitude) and skip dead holds.

Loop detection<br>Autocorrelation finds repeats and reports the period — with loop-vs-yoyo guidance for recreation.

Stagger sense<br>A motion grid infers sequencing direction and per-element timing (e.g. left-to-right, ~80ms each).

4 code targets<br>GSAP (defers to the official GSAP skills), CSS/WAAPI, Framer Motion, and Lottie/SVG.

dogfood

This site animates itself.

These are the kind of motions motiscope reads and rebuilds — a staggered entrance and easing curves, drawn as scope channels.

staggered entrance + easing channels — authored as animated SVG

recreate into

Pick a target.

GSAP<br>CSS / Web Animations<br>Framer Motion<br>Lottie / SVG

Install motiscope<br>Quickstart ↗