---
name: motion-system
description: "Applies “Motion is a system, not a garnish” as a repeatable product-quality gate. Use during design work when one easing family, three durations, every animation has a job."
---

# Motion is a system, not a garnish

Apply this skill during **Design** work. It supports Next.js / React, Mobile, Any stack.

One easing family, three durations, every animation has a job.

## Instructions

Define motion as a system before animating anything: one easing family (e.g. cubic-bezier(0.22,1,0.36,1)), a three-step duration scale stored as tokens, and a written rule for what each step is for. Every animation must name its job — orienting (where did this come from), confirming (did my action work), or directing attention. Cut anything that is only decoration. Animate transform and opacity exclusively; never animate width/height/top/left. Never attach a static centering transform and a transform animation to the same element — wrap instead. Entrances play once per session; infinite loops must be slow (6s+), low-amplitude, and honor prefers-reduced-motion with a static pose. If two elements animate at once, one of them is wrong.

## Detect the problem

- Every component animates differently
- Bounce on things that aren't playful
- Width/left/top in an animation

## Hold the gate

Do not declare this phase complete until every item passes:

- [ ] Easing + duration scale defined as tokens (≈150/250/400ms), used everywhere
- [ ] Every animation names its job: orient, confirm, or direct attention — decoration-only motion is cut
- [ ] Only transform and opacity animate; nothing animates layout properties
- [ ] Entrances run once; ambient loops are slow, subtle, and pause off-screen
- [ ] prefers-reduced-motion collapses everything to a static or opacity-only fallback

## Verify the result

List every animation and its job in one column; delete anything that has no job.