Free
Plate 01Try the pipeline on a real reference.
$0/forever
6 frames / analysis38% res
- 1 analysis a day
- 6 frames per analysis
- CSS, GSAP and Framer Motion output
- Read-only code studio — preview and copy
- 3 saved projects
Motion reference → production code
Drop in a video or GIF of any interface animation. MotionCode reads the motion and hands back a normalized spec plus production code — CSS, GSAP and Framer Motion.
How it works
01 — Reference
A screen recording, a GIF, a product demo. Anything with the motion you want to reproduce.
02 — Analyze
MotionCode isolates the moving element, samples its trajectory and recovers the underlying timing curve.
03 — Ship
A normalized spec plus production code for CSS, GSAP and Framer Motion — with a reduced-motion fallback.
1@keyframes mc-motion {2 from { transform: translateY(148px); }3 to { transform: translateY(0px); }4}5 6.card {7 animation: mc-motion 420ms cubic-bezier(0.16, 1, 0.3, 1) both;8}9 10@media (prefers-reduced-motion: reduce) {11 .card { animation: none; }12}Every interface moves. Most of that motion is guessed — eyeballed from a screen recording, retyped by hand, and lost somewhere between design and code. MotionCode measures it instead: frame by frame, curve by curve, until the motion you saw is the motion you ship.
Up to 16
key frames sampled per analysis
1 spec
duration, easing and keyframes, normalized
3 targets
CSS, GSAP and Framer Motion
Capabilities
MotionCode does the tedious part — reading motion frame by frame — so the spec you ship is precise, portable and honest to the source.
Drop a clip and MotionCode pulls the representative frames — the exact moments where the motion changes state.
fit cubic-bezier(0.16, 1, 0.3, 1)
The real velocity curve, recovered from the footage and matched to the nearest cubic-bézier.
Duration, delay, easing and keyframes distilled into one clean, portable spec you can trust.
Export the same motion as CSS, GSAP or Framer Motion — no hand-translation, no drift.
Keep references, specs and generated code together. Return to any analysis, read-only, whenever.
Every export ships a prefers-reduced-motion fallback by default. Accessible motion, for free.
The output
A normalized description of the motion — then the exact same motion rendered as code, wherever you build. Try it: pick a curve, set a duration, copy the result.
1@keyframes mc-motion {2 from { transform: translateY(148px); }3 to { transform: translateY(0px); }4}56.card {7 animation: mc-motion 420ms cubic-bezier(0.16, 1, 0.3, 1) both;8}910@media (prefers-reduced-motion: reduce) {11 .card { animation: none; }12}Pricing
Every plan reads the same motion and writes the same three targets. Paid plans sample finer, edit and export, and keep the history.
Try the pipeline on a real reference.
$0/forever
For designers and engineers shipping motion daily.
$18/month
For teams keeping a shared motion language.
$49/month
Everything in Pro, plus
USD · billed monthly via Razorpay · cancel anytime
Compare every limitYour first analysis is free. Bring the clip you've been eyeballing — leave with the spec and the code.