01 / Read
Rows before frames
The rail names what moves. Scan it top-down first; the ruler only matters once you know whose row you are reading.
Frame ruler · 24 fps
Click a diamond to inspect its easing
Motion is a document, not a decoration.
Keyframe Atelier is the timing workbench used by the Rally design team. Every span you see here is a committed value in the product's motion spec — reviewable, diffable, and exportable as plain CSS.
02 / Select
Diamonds carry intent
A rotated square is an interpolated key. A flat square is a hold — the value freezes until the next diamond claims it.
03 / Tune
Curves are shared
Six named curves cover the whole product. If a keyframe needs a seventh, that is a conversation, not a drag gesture.
04 / Ship
Export is lossless
Frames become milliseconds at 24 fps, control points become cubic-bezier(), and the rail becomes CSS custom property names.