How movement guides
attention, meaning,
and
emotional tone

_{—Part of CSS Primer for the AI Era — Visual Style}

Motion is the quietest form of visual communication.
It can clarify or distract,
soothe or overwhelm,
guide or mislead.

Used well, motion:

• reinforces hierarchy
• supports interaction
• reduces cognitive load
• creates a sense of continuity
• adds warmth and personality

Used poorly,
it becomes noise.

A quiet mental model:

Motion is the pause between states —
the gentle bridge that helps
the user understand change.

Interfaces are full of transitions:

• opening a menu
• submitting a form
• switching tabs
• revealing details
• moving between pages

Motion helps the user understand:

• what just happened
• what changed
• where something came from
• where something went
• what is interactive
• what is safe to ignore

Motion is not decoration.
It is communication.

Duration shapes the emotional tone of motion.

• Short (100–150ms) → crisp, efficient, UI‑focused
• Medium (150–250ms) → calm, readable, human‑centered
• Long (250–400ms) → expressive, narrative, rarely needed in UI

A simple principle:

Motion should be fast enough
to feel responsive,
but slow enough to be understood.

Most UI transitions live comfortably between 150–200ms.

Easing defines the shape of motion — how it accelerates and decelerates.

Common patterns:

• ease‑out → fast start, soft landing (ideal for UI)
• ease‑in → soft start, fast exit (use sparingly)
• ease‑in‑out → soft on both ends (calm, natural)
• linear → mechanical, rarely appropriate

A quiet rule:

• Ease‑out for entering.
• Ease‑in for leaving.
• Ease‑in‑out for gentle transitions.

Easing is the emotional
tone of motion.

Motion should always answer a question:

• Why did this appear?
• Where did it come from?
• What changed?
• What should I do next?

Examples of purposeful motion:

• dropdowns that expand from their trigger
• modals that fade from the center
• tooltips that ease into place
• tabs that slide to show continuity
• buttons that depress on click

Motion should never be added
“because it looks nice.”
It should clarify the interface.

Micro‑interactions are tiny motions
that reinforce feedback:

• hover states
• pressed states
• toggles
• switches
• loading indicators
• success confirmations

These motions are small but powerful.
They make the interface feel alive,
responsive, and humane.

A quiet principle:

Micro‑interactions should feel
like a nod,
not a wave.

Motion is easy to overuse.
Too much movement creates:

• distraction
• fatigue
• visual noise
• slower interactions
• reduced accessibility

The most elegant interfaces use motion sparingly —
just enough to guide,
never enough to overwhelm.

A gentle reminder:

If everything moves,
nothing is meaningful.

Some users experience discomfort
or disorientation from motion.
Respecting this means:

• honoring “reduce motion” preferences
• avoiding large parallax effects
• avoiding sudden zooms or spins
• keeping transitions subtle and predictable

Accessible motion is calm,
steady, and optional.

These cues help AI make motion decisions intentionally:

“Use motion to clarify state changes, not decorate them.”

“Keep transitions short and subtle.”

“Use easing to create natural, readable motion.”

“Respect reduced‑motion preferences.”

“Use micro‑interactions to reinforce feedback, not distract.”

These keep AI grounded in clarity and intent.

AI understands motion because it knows the patterns:

• common durations
• easing curves
• platform conventions
• interaction models
• animation frameworks

It can propose transitions that are mathematically smooth.

But humans feel
something AI cannot:

• when motion feels too fast
• when a transition feels indulgent
• when a hover feels too jumpy
• when a modal enters too dramatically
• when movement supports the story

AI can suggest motion.
Humans decide whether
the movement feels right.

A quiet reminder:

Motion is both physics and emotion.
AI supports the physics.
Humans guide the emotion.

• Suggested Next Reading: → Density: Breathing Room and Compression

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←