← Back

Motion Without Theater.

When motion is bad, it reads like insecurity: the interface jingling keys so you won’t notice the emptiness.

It spins, it floats, it bounces—anything to avoid being still long enough to be judged.

Good motion does the opposite. It explains.

Motion is a contract about causality

Every animation makes a promise: this happened because of that. A button pressed. A view revealed. A hierarchy deepened. A state changed.

When motion is decorative, the promise collapses. The interface becomes a screensaver with ambitions.

The useful way to involve AI here is not “make transitions cooler.” It’s to produce a choreography spec: budgets, duration bands, intent, and reduced-motion alternatives.

In other words: write the rules of motion the way you’d write the rules of typography—so the system becomes predictable, legible, and calm.

Tactics for tasteful motion

  • Write a motion budget. Maximum simultaneous animations per screen. (If everything moves, nothing explains.)
  • Map cause → effect. For each animation, name the trigger and what the user should learn from it.
  • Use duration bands. Small elements: short. Large transitions: longer. Exits often faster than entrances.
  • Be honest about vestibular triggers. Scaling, spinning, parallax, multi-direction motion—these can make people nauseous. Don’t be proud of that.
  • Support reduced motion without “teleportation.” Replace meaning-carrying motion with dissolve, highlight, color shift—not emptiness.
  • Avoid perpetual motion near text. Peripheral movement and reading don’t mix.
  • Keep physics consistent. Don’t invent a new easing curve for every component. That’s not personality; it’s noise.

Two prompts to turn motion into a system

1) Choreography map (purpose-first).

You are defining motion rules for a product UI.
 
Given this user flow:
{describe the screens and transitions}
 
Return a motion spec with:
- For each transition: trigger, purpose (what it teaches), duration, easing, distance/scale changes
- Reduced-motion fallback for each transition (no scaling/spinning/parallax)
- A motion budget (max concurrent animations per screen)
 
Rules:
- Motion must communicate hierarchy/state/causality.
- No decorative motion without a stated purpose.

2) Motion austerity (cut the theater).

Given this motion spec, cut the motion by 50% while preserving clarity.
 
For each removed animation:
- explain what it was doing
- why it’s unnecessary
- what (if anything) replaces it

The standard I use

If you turn motion off and the interface becomes confusing, your motion was functional and needs a reduced-motion translation.

If you turn motion off and nothing becomes confusing, your motion was mostly theater.

Motion should explain, not entertain.