The DAW for web motion

Design motion by touching it.

Paste your component, drag the spring until it feels right, and export clean Motion, GSAP or CSS. No account needed.

Open the editor Browse templates

Your component

Revenue30 days

$48,29012.4%

Aug 15Sep 14

Timelinesettles ~1195 ms

0 ms

Drag to feel itstiffness 220 · damping 12

slowerfasterbouncier

Your code

39 lines

MotionCSSGSAP

import { motion, type Variants } from "motion/react"; const container = {  hidden: { y: 24, opacity: 0 },  show: {    y: 0,    opacity: 1,    transition: {      y: { type: "spring", stiffness: 220, damping: 12, mass: 1, restDelta: 0.01, restSpeed: 0.01 },      opacity: { type: "spring", stiffness: 220, damping: 12, mass: 1 },      delayChildren: 0.09,      staggerChildren: 0.08,    },  },} satisfies Variants; const item = {  hidden: { y: 10, opacity: 0 },  show: {    y: 0,    opacity: 1,    transition: {      y: { type: "spring", stiffness: 220, damping: 12, mass: 1, restDelta: 0.01, restSpeed: 0.01 },      opacity: { type: "spring", stiffness: 220, damping: 12, mass: 1 },    },  },} satisfies Variants; export function RevenueCard() {  return (    <motion.div      variants={container}      initial="hidden"      animate="show"    >      {/* your component here */}    </motion.div>  );}

In the editor

Feels like editing video. Ships like code.

The editor's own demo card, from paste to export. Every keyframe, spring and line of code in it is real.

Paste a component

HTML or JSX, into the paste dialog, then Add to stage. It renders as itself: real DOM, real Tailwind.

verve editor

Motion you design. Code you own.

free export

Paste a component

Real JSX, real DOM, real Tailwind.

Drag it, don't guess it

Scrub the timeline. Pull the springs.

Export the code

Motion, GSAP or plain CSS.

Export code Preview

0.00s

TracksGraph

duration1300mszoomcheckExport

0.5s

Curve

Shape how things move

Click a curve on the timeline — or the keyframe it leaves from — and it opens here, beside the code it becomes.

Paste component

Bare JSX, an export default component, or plain HTML — TSX and Tailwind classes work, shadcn tokens map to the editor theme. Variables from your codebase render as wireframe stand-ins, so the preview approximates your app rather than matching it pixel-for-pixel — you're here to design the motion; the export wraps your real code untouched.

<div className="w-64 rounded-xl border border-zinc-700 bg-zinc-900 p-4 shadow-lg">
  <p className="text-sm font-medium text-zinc-100">My component</p>
  <p className="mt-1 text-xs text-zinc-400">Bare JSX or export default. TSX works. No hooks (yet).</p>
</div>

Live preview appears here as you paste.

CancelAdd to stage

Export code

Your animation as production code — no runtime, no lock-in. Paste it into your project.

Component 1

MotionCSSGSAP

Send to repoCopy code

driven by

TimeScrollNavigation

intensity

SubtleDefaultDramatic

reduced motion

import { motion } from "motion/react"; export function Component1() {  return (    <div className="w-[380px] overflow-hidden rounded-xl border border-border bg-card">      <div className="flex items-center gap-3 border-b border-border px-4 py-3">        <div className="flex size-9 shrink-0 items-end justify-center gap-[3px] rounded-lg bg-primary p-2">          <div className="w-[3px] h-[7px] rounded-full bg-primary-foreground" />          <div className="w-[3px] h-[14px] rounded-full bg-primary-foreground" />          <div className="w-[3px] h-[10px] rounded-full bg-primary-foreground" />        </div>        <div className="min-w-0 flex-1">          <p className="text-[13px] font-medium text-foreground">verve editor</p>          <p className="text-[11px] text-muted-foreground">Motion you design. Code you own.</p>        </div>        <span className="shrink-0 rounded-full border border-border px-2 py-0.5 text-[10px] text-muted-foreground">free export</span>      </div>      <div className="flex flex-col gap-2 p-3">        <div className="flex items-center gap-3 rounded-lg border border-border bg-background p-3">          <span className="size-7 shrink-0 rounded-md bg-secondary" />          <div className="min-w-0">            <p className="text-[12px] text-foreground">Paste a component</p>            <p className="text-[10px] text-muted-foreground">Real JSX, real DOM, real Tailwind.</p>          </div>        </div>        <motion.div          className="flex items-center gap-3 rounded-lg border border-border bg-background p-3"          initial={{ y: 12 }}          animate={{ y: [12, 0] }}          transition={{            y: { duration: 1.05, times: [0, 1], ease: "easeOut" },          }}        >          <span className="size-7 shrink-0 rounded-md bg-secondary" />          <div className="min-w-0">            <p className="text-[12px] text-foreground">Drag it, don't guess it</p>            <p className="text-[10px] text-muted-foreground">Scrub the timeline. Pull the springs.</p>          </div>        </motion.div>        <div className="flex items-center gap-3 rounded-lg border border-border bg-background p-3">          <span className="size-7 shrink-0 rounded-md bg-secondary" />          <div className="min-w-0">            <p className="text-[12px] text-foreground">Export the code</p>            <p className="text-[10px] text-muted-foreground">Motion, GSAP or plain CSS.</p>          </div>        </div>      </div>      <div className="flex items-center gap-2 border-t border-border px-3 py-3">        <span className="flex-1 rounded-lg bg-primary py-2 text-center text-[12px] font-medium text-primary-foreground">Export code</span>        <span className="rounded-lg border border-border px-3 py-2 text-[12px] text-muted-foreground">Preview</span>      </div>    </div>  );}

0:00 / 0:24

0.5×1×

Paste a component

HTML or JSX, into the paste dialog, then Add to stage. It renders as itself: real DOM, real Tailwind.

Paste component

<div className="w-[380px] overflow-hidden rounded-xl border border-border bg-card">  <div className="flex items-center gap-3 border-b border-border px-4 py-3">    <div className="flex size-9 shrink-0 items-end justify-center gap-[3px] rounded-lg bg-primary p-2">      <div className="w-[3px] h-[7px] rounded-full bg-primary-foreground" />      <div className="w-[3px] h-[14px] rounded-full bg-primary-foreground" />      <div className="w-[3px] h-[10px] rounded-full bg-primary-foreground" />    </div>    <div className="min-w-0 flex-1">      <p className="text-[13px] font-medium text-foreground">verve editor</p>      <p className="text-[11px] text-muted-foreground">Motion you design. Code you own.</p>    </div>    <span className="shrink-0 rounded-full border border-border px-2 py-0.5 text-[10px] text-muted-foreground">free export</span>  </div>  <div className="flex flex-col gap-2 p-3">    <div className="flex items-center gap-3 rounded-lg border border-border bg-background p-3">      <span className="size-7 shrink-0 rounded-md bg-secondary" />      <div className="min-w-0">        <p className="text-[12px] text-foreground">Paste a component</p>        <p className="text-[10px] text-muted-foreground">Real JSX, real DOM, real Tailwind.</p>      </div>    </div>    <div className="flex items-center gap-3 rounded-lg border border-border bg-background p-3">      <span className="size-7 shrink-0 rounded-md bg-secondary" />      <div className="min-w-0">        <p className="text-[12px] text-foreground">Drag it, don't guess it</p>        <p className="text-[10px] text-muted-foreground">Scrub the timeline. Pull the springs.</p>      </div>    </div>    <div className="flex items-center gap-3 rounded-lg border border-border bg-background p-3">      <span className="size-7 shrink-0 rounded-md bg-secondary" />      <div className="min-w-0">        <p className="text-[12px] text-foreground">Export the code</p>        <p className="text-[10px] text-muted-foreground">Motion, GSAP or plain CSS.</p>      </div>    </div>  </div>  <div className="flex items-center gap-2 border-t border-border px-3 py-3">    <span className="flex-1 rounded-lg bg-primary py-2 text-center text-[12px] font-medium text-primary-foreground">Export code</span>    <span className="rounded-lg border border-border px-3 py-2 text-[12px] text-muted-foreground">Preview</span>  </div></div>

verve editor

Motion you design. Code you own.

free export

Paste a component

Real JSX, real DOM, real Tailwind.

Drag it, don't guess it

Scrub the timeline. Pull the springs.

Export the code

Motion, GSAP or plain CSS.

Export code Preview

CancelAdd to stage

02
Pick inside it
Double-click the component, then click a part of it to give that part its own layer. ⌥ targets the parent, Esc when done.

verve editor

Motion you design. Code you own.

free export

Paste a component

Real JSX, real DOM, real Tailwind.

Drag it, don't guess it

Scrub the timeline. Pull the springs.

Export the code

Motion, GSAP or plain CSS.

Export code Preview

Click elements inside the component to animate them on their own tracks.Hold ⌥ to target the parent · Esc when done
03
Pose, then key
Drag a value in the inspector and a keyframe lands at the playhead. Move the playhead, drag again.
element
div.flex "Drag it, don't guess i…"
presets
properties
x0
y0
scale1
scaleX1
scaleY1
rotate0
0s
0.5s
1s
Component 1
div.flex "Drag it, don't guess i…"
y
04
Tune the feel
Click the curve between two keys, make it a spring and pull the pad. The code beside it rewrites as you drag.
lineareaseeaseIneaseOuteaseInOutspringcustom
slowerfasterbouncier
stiffness 220damping 12weight1
molassesgentlesnappycrispbouncy

Export the code

Motion, GSAP or CSS, copied straight into your project. Nothing of ours comes with it, and no account needed.

Export code

Your animation as production code — no runtime, no lock-in. Paste it into your project.

Component 1

MotionCSSGSAP

Send to repoCopy code

driven by

TimeScrollNavigation

intensity

SubtleDefaultDramatic

reduced motion

import { motion } from "motion/react"; export function Component1() {  return (    <div className="w-[380px] overflow-hidden rounded-xl border border-border bg-card">      <div className="flex items-center gap-3 border-b border-border px-4 py-3">        <div className="flex size-9 shrink-0 items-end justify-center gap-[3px] rounded-lg bg-primary p-2">          <div className="w-[3px] h-[7px] rounded-full bg-primary-foreground" />          <div className="w-[3px] h-[14px] rounded-full bg-primary-foreground" />          <div className="w-[3px] h-[10px] rounded-full bg-primary-foreground" />        </div>        <div className="min-w-0 flex-1">          <p className="text-[13px] font-medium text-foreground">verve editor</p>          <p className="text-[11px] text-muted-foreground">Motion you design. Code you own.</p>        </div>        <span className="shrink-0 rounded-full border border-border px-2 py-0.5 text-[10px] text-muted-foreground">free export</span>      </div>      <div className="flex flex-col gap-2 p-3">        <div className="flex items-center gap-3 rounded-lg border border-border bg-background p-3">          <span className="size-7 shrink-0 rounded-md bg-secondary" />          <div className="min-w-0">            <p className="text-[12px] text-foreground">Paste a component</p>            <p className="text-[10px] text-muted-foreground">Real JSX, real DOM, real Tailwind.</p>          </div>        </div>        <motion.div          className="flex items-center gap-3 rounded-lg border border-border bg-background p-3"          initial={{ y: 12 }}          animate={{ y: 0 }}          transition={{            y: { type: "spring", stiffness: 220, damping: 12, mass: 1, restDelta: 0.01, restSpeed: 0.01 },          }}        >          <span className="size-7 shrink-0 rounded-md bg-secondary" />          <div className="min-w-0">            <p className="text-[12px] text-foreground">Drag it, don't guess it</p>            <p className="text-[10px] text-muted-foreground">Scrub the timeline. Pull the springs.</p>          </div>        </motion.div>        <div className="flex items-center gap-3 rounded-lg border border-border bg-background p-3">          <span className="size-7 shrink-0 rounded-md bg-secondary" />          <div className="min-w-0">            <p className="text-[12px] text-foreground">Export the code</p>            <p className="text-[10px] text-muted-foreground">Motion, GSAP or plain CSS.</p>          </div>        </div>      </div>      <div className="flex items-center gap-2 border-t border-border px-3 py-3">        <span className="flex-1 rounded-lg bg-primary py-2 text-center text-[12px] font-medium text-primary-foreground">Export code</span>        <span className="rounded-lg border border-border px-3 py-2 text-[12px] text-muted-foreground">Preview</span>      </div>    </div>  );}

The blind loop

You're typing numbers to describe a feeling.

Change stiffness: 300. Save. Wait. Watch it once. Now try to remember what the last one felt like.

The usual way

01stiffness 300damping 30too floaty

02stiffness 420damping 30now it's harsh

03stiffness 380damping 30closer

04stiffness 380damping 22wobbles at the end

05stiffness 360damping 26missed it — replay

06stiffness 360damping 26missed it again

07 – 13 · seven more of these

14stiffness 340damping 26almost

15stiffness 340damping 24ship it

15 rebuilds · about 9 minutes · one number

The same spring, here

01stiffness 340damping 24ship it

WatchThe curve redraws every frame.

DragSpeed across, bounce up.

0 rebuilds · about 4 seconds · and you felt every value in between

The docs

It's all written down.

Each card opens its page in the docs. The code on it is what the export writes.

Exports toMotion GSAP CSS

All documentation

The exit door

What do you actually leave with?

Features are easy to compare. The real question is what's in your hands, and in your bundle, when you close the tab.

What each motion tool leaves you with when you close the tab
Tool	What you walk away with	What your app has to carry
Jitter	What you walk away withA video, GIF or Lottie file	What your app has to carryA playerIt's never real UI.
Rive	What you walk away withA proprietary .riv file	What your app has to carryRive's runtimeIn your bundle for as long as you ship it.
Lottie	What you walk away withA JSON animation	What your app has to carryA player libraryIt interprets the JSON at runtime.
Figma Motion	What you walk away withCSS, React or JSON copied from Dev Mode, on a paid seat	What your app has to carryMotion for ReactNothing for CSS. You wire it to your own markup.
verve	What you walk away withMotion, GSAP or CSS, in your own files	What your app has to carryNothing from usMotion or GSAP if you pick them, nothing for CSS.

Export is free. And nothing you export depends on us, which is the whole point of this table.

And it's the animation you designed. We play every export in a real browser and check it against the preview.

Paste, animate, export

Paste it. Animate it. Export it.

You animate the component you already wrote, and you leave with a file.

Paste

Drop in the component you're shipping, JSX or plain HTML. It renders for real in a sandbox.

<div class="toast">
  <svg class="check" />
  <div>
    <strong>Changes published</strong>
    <span>3 files · 340ms</span>
  </div>
</div>

Animate

Scrub, drag keyframes, pull the spring until it feels right. Every element inside it can get its own track.

Changes published3 files · 340ms

toast

check

Export

Copy the Motion, GSAP or CSS into your project. It moves the way it did in the editor.

import { motion } from "motion/react";

export function PaymentToast() {
  return (
    <motion.div
      initial={{ x: 36, scale: 0.94, opacity: 0 }}
      animate={{ x: 0, scale: 1, opacity: 1 }}
      transition={{
        x: { type: "spring", stiffness: 340, damping: 27, mass: 1, restDelta: 0.01, restSpeed: 0.01 },
        scale: { type: "spring", stiffness: 340, damping: 27, mass: 1 },
        opacity: { type: "spring", stiffness: 340, damping: 27, mass: 1 },
      }}
    >
      {/* your component here */}
    </motion.div>
  );
}

The engine

What you see is what ships. We check.

Most tools show you one thing and hand you another. We run the export in a real browser and measure it against the preview.

0.30%

Worst-case drift, measured

20/20

Ten fixtures, two dialects

0 KB

Of verve in your bundle

spring-settledx −240 → 0 · 800ms

0.28% off here

engineexported code, measured in a browserworst moment, this fixture · 0.6% allowed

We wrote our own spring engine.

No wrappers around someone else's library. Every frame is computed right here.

Scrub to any moment.

Drop the playhead anywhere and everything is exactly where it should be.

Then we check it.

We generate the code, run it in a browser, and measure it against the preview.

The plot is CSS. Motion is measured live, so it gets a little more wiggle room. Or skip all this and export something and diff it yourself.

Templates

A hero entrance is five animations.

Each one is a whole scene, with every element on its own track and timed against the others. Click one and it opens with the timeline already full.

Hero entrance

Badge, headline, copy and buttons arriving one after another. The stagger every landing page wants.

2.0s5 elements

Feature cards

Three cards popping in on a spring, 100ms apart. A classic stagger, and it exports as one.

1.8s3 elements

Avatar stack

Faces popping in one after another. 80ms apart — fast enough to read as one gesture, slow enough to count.

1.6s4 elements

Field shake

A field shaking off bad input. Each shake is smaller than the last, because an even shake looks like a glitch.

1.0s1 element

There are 20, and each one has to be worth exporting. They double as tests for the exporter.

Browse all 20

What comes with it

Most of the work is already done.

Components that arrive animated, kits that hold to one motion profile, and the scales they're all built from. Every one of them opens in the editor.

Components

The shadcn-shaped ones, shipped with their motion already authored — a dialog whose backdrop dims while the panel rises, a dropdown that doesn't just appear. Open any of them and every keyframe is there to be moved.

Dialog

Dropdown

Toast

12 components · dialog, dropdown, toast…

Kits

Grouped by what you're building, each kit holding to one stated motion profile. A dashboard has no business moving like a landing page.

20 animations · 4 kits, 4 profiles

The scales

Five springs, five durations, five distances — the vocabulary everything above is built from, drawn by the solver that runs your preview.

bouncy · 220 stiffness, 12 damping

Docs

What each thing does and — the part most docs skip — where it stops. Written from the engine, so the figures in it can't drift from the code.

Paste, animate, export
What you can paste
The timeline
What each dialect cannot express

searchable · every capability has a page

Or start from nothing

Paste your own component and animate that instead. No account, no setup — the editor opens with a document ready.

no sign-in required

52 animations in all. Every one of them opens in the editor.

Pricing

Export is free.

Making an animation and exporting it costs nothing. Pro is for when you're making a lot of them.

Free

no card

Everything you need to make an animation and export it.

The full editor, with no account at all
Every property, template and easing
Motion, GSAP and CSS export, including scroll, hover and page transitions
5 saved animations once you sign in
Share links, so anyone can watch it run — revoke one whenever you like

Open the editor

Pro

/month

$12

For when you're making a lot of these.

Everything in Free, plus:

Unlimited saved animations
AI assist to start an animation from a sentence
Motion tokens — export your motion system, or apply a team's

Design motion by touching it.

Feels like editing video. Ships like code.

Paste a component

Paste a component

Pick inside it

Pose, then key

Tune the feel

Export the code

You're typing numbers to describe a feeling.

The usual way

The same spring, here

It's all written down.

Springs you pull

Hover, press, focus, drag

Scroll-linked

Split text

Motion paths

View transitions

Reduced motion

Import as tracks

What do you actually leave with?

Paste it. Animate it. Export it.

Paste

Animate

Export

What you see is what ships. We check.

We wrote our own spring engine.

Scrub to any moment.

Then we check it.

A hero entrance is five animations.

Hero entrance

Feature cards

Avatar stack

Field shake

Most of the work is already done.

Components

Kits

The scales

Docs

Or start from nothing

Export is free.

Free

Pro