Motion reference → production code

Motion,decoded.

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.

Analyze a motionSee it work

CSSGSAPFramer Motion

reference.mp4Analyzing

input · 60fps

cubic-bezier(.2,.8,.2,1)

extracted frames6 / 6

duration

420ms

easing

expo-out

distance

148px

Built for the people who ship motion

PRODUCT DESIGNDESIGN ENGINEERINGMOTION SYSTEMSDESIGN SYSTEMSFRONTEND PLATFORMCREATIVE DEVPRODUCT DESIGNDESIGN ENGINEERINGMOTION SYSTEMSDESIGN SYSTEMSFRONTEND PLATFORMCREATIVE DEV

How it works

From reference to shipped, in one pass

01 — Reference

Drop a motion reference

A screen recording, a GIF, a product demo. Anything with the motion you want to reproduce.

reference.mp4

02 — Analyze

Frames extracted, motion read

MotionCode isolates the moving element, samples its trajectory and recovers the underlying timing curve.

cubic-bezier(.2,.8,.2,1)

03 — Ship

Spec and code, ready to paste

A normalized spec plus production code for CSS, GSAP and Framer Motion — with a reduced-motion fallback.

Card.tsx

1import { motion } from "framer-motion";2 3export function Card() {4  return (5    <motion.div6      initial={{ opacity: 0, y: 148 }}7      animate={{ opacity: 1, y: 0 }}8      transition={{9        duration: 0.42,10        ease: [0.2, 0.8, 0.2, 1],11      }}12    />13  );14}

How it works

From reference to shipped

01 — Reference

Drop a motion reference

A screen recording, a GIF, a product demo. Anything with the motion you want to reproduce.

reference.mp4

02 — Analyze

Frames extracted, motion read

MotionCode isolates the moving element, samples its trajectory and recovers the underlying timing curve.

cubic-bezier(.2,.8,.2,1)

03 — Ship

Spec and code, ready to paste

A normalized spec plus production code for CSS, GSAP and Framer Motion — with a reduced-motion fallback.

Card.tsx

1import { motion } from "framer-motion";2 3export function Card() {4  return (5    <motion.div6      initial={{ opacity: 0, y: 148 }}7      animate={{ opacity: 1, y: 0 }}8      transition={{9        duration: 0.42,10        ease: [0.2, 0.8, 0.2, 1],11      }}12    />13  );14}

Capabilities

Everything between a clip and clean code

MotionCode does the tedious part — reading motion frame by frame — so the spec you ship is precise, portable and honest to the source.

Frame extraction

Drop a clip and MotionCode pulls the representative frames — the exact moments where the motion changes state.

Normalized motion spec

Duration, delay, easing and keyframes distilled into one clean, portable spec you can trust.

Multi-target code

Export the same motion as CSS, GSAP or Framer Motion — no hand-translation, no drift.

Easing detection

The real velocity curve, recovered from the footage and matched to the nearest cubic-bézier.

Workspaces

Keep references, specs and generated code together. Return to any analysis, read-only, whenever.

Reduced-motion output

Every export ships a prefers-reduced-motion fallback by default. Accessible motion, for free.

The output

One spec. Every format.

A normalized description of the motion — then the exact same motion rendered as code, wherever you build.

rendered

.card

target.card

duration420ms

delay0ms

easingcubic-bezier(.2,.8,.2,1)

transformtranslateY(148 → 0)

opacity0 → 1

export

reveal.css

1/* recovered from reference.mp4 */2@keyframes reveal {3  from {4    opacity: 0;5    transform: translateY(148px);6  }7  to {8    opacity: 1;9    transform: translateY(0);10  }11}12 13.card {14  animation: reveal 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;15}16 17@media (prefers-reduced-motion: reduce) {18  .card { animation: none; }19}

Playground

Scrub the motion yourself

Drag across the timeline — the element follows the recovered easing, not a straight line.

progress 15%

Pricing

Start free. Scale when it ships.

No credit card to try. Every plan exports accessible, reduced-motion-safe code.

Free

$0/forever

For trying the pipeline on a real reference.

5 analyses / month
CSS + Framer export
Reduced-motion fallback
1 workspace

Start free

Pro

$18/month

For designers and engineers shipping motion daily.

Unlimited analyses
CSS + GSAP + Framer export
Easing curve editor
Unlimited workspaces
Version history

Go Pro

Team

$49/month

For teams keeping a shared motion language.

Everything in Pro
Shared workspaces
Motion tokens export
SSO + roles
Priority support

Go Team

Ship motion with confidence.

Turn your next motion reference into code you can trust — in the time it takes to watch the clip.

Analyze a motionSee how it works

1import { motion } from "framer-motion";2 3export function Card() {4 return (5 <motion.div6 initial={{ opacity: 0, y: 148 }}7 animate={{ opacity: 1, y: 0 }}8 transition={{9 duration: 0.42,10 ease: [0.2, 0.8, 0.2, 1],11 }}12 />13 );14}

1/* recovered from reference.mp4 */2@keyframes reveal {3 from {4 opacity: 0;5 transform: translateY(148px);6 }7 to {8 opacity: 1;9 transform: translateY(0);10 }11}12 13.card {14 animation: reveal 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;15}16 17@media (prefers-reduced-motion: reduce) {18 .card { animation: none; }19}