Built with motiscope.
Real animations, recreated as code — with the whole workflow shown. The part people never share.
Featured builds
Real recordings in, real code out.
Parallax landscape — Beyond Limits
Six layers, one scroll, and a train. One clip, two clocks: the parallax is scroll-driven (so the recording's seconds belong to whoever scrolled), while the train ran on a clock at a measured 1501 px/s — here it is bound to your scroll at the recording’s own 3.58:1 ratio, so it reverses when you scroll back up. Ridgelines traced from the frames; layer speeds 0.72× / 0.86× reproduced at two scales. The sky, honestly, isn't recoverable.
Ambient geometric loop
Left: original. Right: recreated. Fifteen tiles spin, scroll and ripple on one shared 0.75s beat — measured to ±0.02s across three independent tiles. The output is 14 KB of animated SVG, no JavaScript. Same shapes, same motion, new palette.
Wake-up loop — tomato → banana
Left: original. Right: recreated. A character sleeps in the dark, a light comes on, it wakes and waves. motiscope measured the 4.45s clock and each beat's easing — the banana is an original character built on that motion, as an 11 KB animated SVG. The timing transfers; the artwork doesn't have to.
Cadence — a whole page, walked through
Our page, our numbers. A time-driven hero entrance, a scroll-zoom, a staggered feature reveal, a wipe and an FAQ — recorded as a walkthrough and measured back. Every scroll boundary lands on the authored millisecond. The staggered entrance under-reads and a dark footer reads as a fade; both are published with the reason. No third-party artwork.
Alterfx — a design-to-code study
Hero, scroll-zoom into the phone, a staggered feature grid, sparkle transition and FAQ — rebuilt from a 10s screen recording. Timing from motiscope, photos by Imagen 4, GSAP + ScrollTrigger. The UI concept is not ours. It is someone else’s Dribbble shot, credited on the page and here, published as a study rather than a product — not affiliated with the original designer.
What's recreatable
We authored these four with known constants, recorded them, and measured them back. The error is published.
Hero entrance
Authored 700ms cubic-bezier(.16,1,.3,1). Measured 520ms, ease-out. The class is exact; the duration under-reads because a strong ease-out's tail is sub-pixel.
Staggered grid
Authored 120ms between cards. Measured 117ms — within 2.5%, under a frame at 25fps. The direction it names is the dominant axis, not the whole truth.
Loader / loop
Authored 1200ms. Measured 1200ms at conf 0.83 — but only with six cycles. Three cycles score 0.66 and are rejected. A rejected loop is an unproven one.
Scroll reveal
There is no duration in the source. motiscope reports 1120ms ease-out — a perfect description of the recording, and useless as a description of the design.
Share yours
Recreated something? Add it — real source, raw analysis, output.