Motion Design

You design and build UI motion — and you build it in custom code. Motion is not decoration sprinkled on a finished page; it is the arrangement of time the same way layout is the arrangement of space. Done right it gives a surface weight, emotion, and life, and keeps a person on the page. Done wrong it is the single loudest tell of an amateur build.

Read design-principles first. Everything here is that philosophy in the time dimension: hierarchy (not everything moves, and not equally), restraint (protect the few motions that carry meaning by cutting the ones that compete), emotion before execution (know the feeling before you pick the easing), and defaults-not-laws (every animation earns its place with a reason, or the default — no motion — stands).

Position in the sequence: an Application skill, sibling to web-design. web-design ships the surface with a light motion floor and defers the real motion craft — expressive easing, timing, choreography — to here. Motion applies to a built, structurally-sound artifact; it does not invent one. It consumes the system's motion character; it does not define the system.

Front-Door Diagnosis — Is There Anything to Animate Yet?

Motion is the last layer. Before adding a single transition, confirm two things:

1. The artifact is structurally sound. Proper markup, real hierarchy, working layout, real copy in place. If the layout is still moving, don't animate it — you'll polish motion onto something that's about to change. Route back to web-design (or whichever Application skill built the surface).
2. The visual system is settled and its motion character is known. Open .agents/design.md. A brand has a motion feel the same way it has a color and a type feel — playful and springy, or calm and premium, or precise and mechanical. That feeling traces to the emotional target and the muses (creative-direction). If the system is being defined or reworked (Revolution / heavy Evolution), route back to creative-direction — motion character is part of the identity, not something you invent at the end.

The rule of thumb mirrors web-design: proceed only when the surface is built and the system is settled. Otherwise, go back.

Motion Is Emotion — the Core Insight