Docs

What it guarantees, and where it stops.

The editor is meant to be learnable without any of this — paste a component, drag a keyframe, press ⌘E. These pages are for the questions that survive that: what the solver actually promises, what each export dialect does with your timeline, and what happens when a timeline asks for something a dialect has no word for. Every figure here is read out of the engine when the page renders, so none of it can drift.

Topics: 40
Animatable properties: 17
Parity fixtures: 25
Export dialects: 3

Getting started

Paste, animate, exportThe whole loop, in three steps. You don't need an account, and nothing you export depends on verve.
What you can pasteJSX, TSX or plain HTML. Pasted markup is normalized before it reaches the frame, so a block copied from a browser's element inspector works as well as one copied from your editor.
Animating on the timelineThe basics: pose to key, a curve on every segment, and spring handles you can pull. The export is generated from the same springs, so what you feel is what ships.
Your first animation, end to endAbout five minutes, with no account and nothing to install.

The editor

The timelineOne row per animated property, one diamond per keyframe, and a curve on each segment between them. This page covers everything you can do there, from snapping and zoom to markers, loops, copy and paste, the value graph and onion skin.
Starting after another elementKeyframes are in absolute milliseconds, so without links, retiming a sequence means dragging everything after the change. A link says it once (this starts when that ends, 80ms later), and the timeline keeps it true as you move things.
The curve panelBottom right, beside the timeline: the curve of whatever you've selected, and the code it becomes. Pull the pad and the export rewrites itself in Motion, CSS or GSAP, with the lines that changed lit up.
ImagesAn image can be an element of its own (drop it, paste it or add it, and animate it like anything else) or arrive inside a component you pasted. Either way, the export points at your own file by its path, and the image never leaves your browser: it isn't uploaded or saved to your account.
Split textA heading that arrives letter by letter is one element per letter. Split a line of text and each letter or word becomes an element of its own, which the stagger step, the presets and every export dialect already know how to animate. The export gives you the split markup back.
Motion pathsAn element can travel along a curve instead of a straight line: an arc into place, a wave, a loop, an orbit. The shape is a setting, and the distance along it is an ordinary property with keyframes. Every dialect exports it as plain CSS Motion Path, with no plugin.
The inspector, and pose-then-keyThere's no record mode: move the playhead, change a value, and a keyframe appears at the playhead. Posing and keyframing are the same gesture.
Interaction states: hover, press, focus, dragA state is where an element goes while it's hovered, pressed, focused or dragged. States don't run on the timeline's clock, so they aren't keyframes. A state starts from wherever the timeline left the element.
Layers, order, and editing in placeThe rail on the left is the document, in paint order: top to bottom is back to front. Reordering it changes what overlaps what.
12 presets, in 3 categoriesA preset writes real keyframes starting at the playhead, and you can edit everything it writes as soon as it lands.
AI assistDescribe the motion in a sentence and get a document to start from. It picks from the same vocabulary the library is built out of, so what comes back is on the scales — and there is a clear edge to what it will do.
KeyboardEvery shortcut in the editor. This list is built from the same table the editor binds keys from, and a test checks that the two match.

The engine

The solver is a pure function of timeGiven a document and a time in milliseconds, the engine returns the value of every property, with no state carried between calls. Scrub backwards, jump to the end or render the same frame twice, and you get the same answer.
The properties, and how they reach the DOMProperties compose in groups, and each group reaches the DOM its own way. Transforms apply in Motion's own order, which is what lets the Motion export give each transform its own transition.

Export

What each dialect cannot expressWhat Motion, GSAP and CSS themselves can't express, however the export is written. Each row comes with the measurement behind it. Anything we could fix in our own code is a bug, so it isn't listed here.
One element, or the whole sceneThe export dialog's first choice is how much to export: one element with its picked children, or the whole scene once there's more than one element.
The Motion dialectYour component comes back with initial, animate and a transition per property on each element you animated. A spring that settles inside its own segment exports as a native spring config instead of sampled keyframes, so Motion runs the spring you designed.
The CSS dialectPlain @keyframes and an animation shorthand. Springs are turned into a linear() easing, so there's nothing to install. It's just CSS.
The GSAP dialectA timeline, or a single fromTo where a stagger makes one possible. Time-driven exports use only GSAP's core, with no plugins. The scroll-linked export also registers ScrollTrigger, which comes with the gsap package.
Scroll-linked exportThe same animation, driven by scroll position instead of time. Choose Scroll in the export dialog, then pick which part of the element's pass through the viewport drives it.
View transitionsTwo different things share this name. The View Transitions API animates snapshots of two pages, and a shared-element transition moves one element that exists on both. Both are under Navigation in the export dialog, as Whole view and Shared element.
Subtle, default, dramaticThree intensities of the same animation, generated from one document. Subtle has 40% less travel, with keyframe times scaled to 85%. Dramatic has 40% more travel, with keyframe times scaled to 110%. Springs keep their settings in both.
Reduced motionA reduced-motion export pins everything that moves the element through space (the transform properties and a motion path's distance) where it ends, since that's what vestibular guidance is about. Opacity, filters and color still animate, so the animation still says something once nothing travels.
Sharing a linkA link anyone can open to watch an animation play on its real markup and copy its code in all three dialects, without an account and without editing anything. It's a snapshot: what you shared is what they see.

Verification

How export parity is checkedThe parity gate renders the exported code, the same text the export dialog gives you, in a real browser and compares what the browser shows with the engine. That's how we know your export matches your preview, and how closely.
The motion checkThe motion check flags likely mistakes in an animation: a spring cut off mid-flight, a bounce the browser clamps away, travel at a constant, mechanical speed, a list that takes too long to arrive, or an export that's longer than it needs to be.
verve check, from the command lineverve check runs the parity check, the motion check or the render-cost check on a saved scene, and exits non-zero when something fails, so it can run in CI. It runs from the verve repo as npm run check; there's no separately installed verve command.
Reading a parity failureA failure names the fixture, the dialect, the worst moment and how far off it was. The size is a percentage of the property's own range, so 2px off on a 4px move shows up as the big error it is, and 2px off on a 400px move doesn't.
The fixturesEach fixture is there for one specific behavior, and says which in a sentence. That sentence is what a failure prints.

Reference

Property referenceEvery numeric animatable property, with its unit, default, and the group whose declaration it shares. The 3 color properties are listed under The properties. The table is read from the engine, so it always matches the editor.
Spring referenceThe 5 springs the editor offers, with the damping ratio that decides how each one feels and how long it takes to settle a 100-unit move. Both are computed from the spring's settings, so they're the numbers the engine actually produces.
Easing referenceThe 5 bezier curves, with their real control points. They're the standard CSS curves, which matters at export: Motion and CSS use them directly, while GSAP's power curves are a different family, so GSAP gets them sampled.
The motion systemThe duration, travel and stagger scales behind every template, kit and component. They all take their numbers from these, so they feel like they belong together.
Templates, kits and componentsEvery template, kit and component, with counts read from the code. Each one opens in the editor as a real document you can take apart.
Your component runs in a sandboxPasted code is transpiled in the browser and rendered inside an iframe that allows scripts and nothing else: no same-origin access and no network. Everything that comes back out is treated as untrusted.
The rest of itTwo pages that show what's easier to see than to read.