What Motion does:
Manual keyframe tracks, per node and per property
Real cubic beziers, and springs with a normalized bounce
Writable timeline duration, plus
playbackSettingsfor autoplay, loop and mutedExports CSS
@keyframesand motion.dev snippets
… and not so much:
Work without the
metronomeflag turned on for the accountAnimate a top level frame, only its descendants
Take field names outside its allowlist
Replace a transform, since translation and scale compose with the resting one
Reflect playback settings in the exported CSS, so a play once timeline still exports as
infinite
Where the rules came from:
The curve set is in the AWS brand guidelines, chapter 3. There are two: Circle In/Out for arrivals, Exponential for most other moves. The guidance says uniformity is the intent, and that expression belongs in timing and composition. Both curves are now in the decision register as motion/ease-circle and motion/ease-exponential, so the next build picks from two values.
Reuse
The pattern is a row of cards, a shared start, a shared duration, and one travel distance per column. Changing the column count or the row count changes the distances and leaves the rest alone. The distances come off the storyboard, so a new storyboard gives a new build without any new decisions.
The build is a skill now. It reads the motion language first, authors the keyframes, exports the asset pack, and runs the brand conformance check before anything ships.
