motiscope
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
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
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 time — a dense motion-energy curve, a percentile-anchored hold threshold, and easing recovered by integrating speed — and leaves perception to the model.
How it works, in full → See it on real recordings
signature features
Built for real UI motion.
Localized energy
Small buttons & cards on a big page register as real motion instead of washing out in a whole-frame average.
Presets & focus
draft / balanced / detailed frame budgets, plus `--start/--end` windows and `--fps` to catch fast content.
Auto-decompose
Long/complex clips split into beats; frames follow the motion (allocated by magnitude) and skip dead holds.
Loop detection
Autocorrelation finds repeats and reports the period — with loop-vs-yoyo guidance for recreation.
Stagger sense
A motion grid infers sequencing direction and per-element timing (e.g. left-to-right, \~80ms each).
</>
4 code targets
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 CSS / Web Animations Framer Motion Lottie / SVG