Motion
An animation timeline on the Design surface where every property keyframes independently, plays live in the real preview, and compiles to pure CSS with no runtime.
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".