mxa-motion
Gives a project's interface a small named set of motion presets, every number taken from the token scale, each with a reduced-motion form.
- Offers twelve presets, from a card rising in to an icon flipping, and leaves two decisions to judgement: which one, and whether to animate at all.
- Takes every duration, easing and spring from the token scale, with the springs generated from Material's numbers as CSS easings.
- Animates with CSS on the components' own hooks first, and uses the Motion library only for size changes, indicators, scroll reveal and reordering.
- Gives every preset a reduced-motion form in which opacity still changes and travel does not.
- Applies its rules while writing and in review, and points at Stylelint and Lighthouse where a project wants them enforced; it ships no checker of its own.
What is inside
The spring script generates CSS easing curves and their durations from Material's spring numbers, so both halves of a project's motion read the same two values.
- Consulted
- .mxa/motion-check.json
- Reference
- presets.md
- Evals
- 6
Works with
The outside tools and connectors this skill drives.
- CSS transitions on Base UI's data attributes· our default
- Motion, for layout, scroll reveal and reorder
The first is what we reach for on our own projects. A project that already uses one of the others keeps it, and the skill works with that instead.