Motion in Studio is a real timeline, and what it produces is plain CSS.

## The timeline

The Design surface's bottom dock is a motion timeline in the shape you would expect from an animation tool: a time ruler, a playhead, a bar for every animated element, and, when a layer is selected, one track per animated property beneath it.

Opacity, position, scale, rotation, blur, colour and background each keyframe **independently**. That is the model that makes real motion possible: a card that fades while it rises and settles is three curves, not one preset with a duration.

Each track has its own keyframe diamonds, a previous, toggle, next control, an inline value editor, and a marker at the playhead when you are between two keys rather than on one.

## It plays live

Play and scrub drive the actual preview rather than a rendered approximation, through the browser's own animation engine. What you are watching is the animation, at the frame you are scrubbed to.

Motion edits are live edits: they never reload the canvas, because reloading would tear down the running animation in the middle of the change you are making.

## What comes out is CSS

Every edit rewrites the motion source on the design and re-bakes it into a compiled block of **pure CSS**. No runtime, no animation library, no JavaScript on the page that renders it.

That matters twice. A shared prototype animates for a viewer with nothing installed, and the handoff to code is the animation itself rather than a description of it: a developer receives keyframes they can paste, not a note saying "fades in, 300ms, ease out".