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:
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:
Motion helps the user understand:
Motion is not decoration.
It is communication.
Duration shapes the emotional tone of motion.
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:
A quiet rule:
Easing is the emotional
tone of motion.
Motion should always answer a question:
Examples of purposeful motion:
Motion should never be added
“because it looks nice.”
It should clarify the interface.
Micro‑interactions are tiny motions
that reinforce feedback:
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:
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:
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:
It can propose transitions that are mathematically smooth.
But humans feel
something AI cannot:
AI can suggest motion.
Humans decide whether
the movement feels right.
A quiet reminder:
Motion gives clarity.
Intent gives purpose.
And sometimes, breaking the timing pattern
is what makes the interface feel human.
Motion is both physics and emotion.
AI supports the physics.
Humans guide the emotion.
Tony de Araujo —New York | Lisbon