Motion as a Design Material

Most teams add animation at the end of a project. It is the last thing designed, the first thing cut when a deadline moves, and the first thing blamed when a site feels slow.

We approach it differently.

Motion as Communication

Every transition a user experiences is a communication. It says something about the relationship between the current state and the next. When done well, motion makes an interface feel intuitive before a user has consciously understood it.

Consider the difference between:

• A modal that appears — jarring, spatial dislocation, requires the eye to reorient entirely.
• A modal that expands from its trigger — the eye follows a logical spatial path, the interface feels grounded.

Same information, radically different cognitive load. The second version is not prettier. It is more useful.

The Hierarchy of Motion

We use a three-tier hierarchy for every project:

Tier 1 — Functional Motion: Transitions that communicate state change. Loading states, form validation, navigation. These are non-negotiable and are always designed before any decorative motion.

Tier 2 — Directional Motion: Transitions that establish spatial relationships. Page transitions, drawer animations, modal sequences. These build the user's mental model of the interface's architecture.

Tier 3 — Expressive Motion: Animations that communicate brand personality. Hover states, entrance animations, cursor behaviors. These are where the studio's aesthetic voice lives.

The hierarchy matters because teams almost always work backwards. They design the expressive layer first, neglect the functional layer, and ship a product that feels aesthetically alive but functionally confusing.

Duration Is Not About Speed

The most common mistake in motion design is conflating "fast" with "good." The right duration for a transition depends on:

• Spatial distance traveled — further transitions warrant longer durations.
• Information density changed — the more the user needs to reorient, the more time they need.
• Interrupt frequency — transitions that occur repeatedly (hover states, scroll effects) should be shorter to avoid frustration.

Our working defaults: functional state changes at 150–250ms, directional transitions at 350–500ms, expressive moments given whatever they need.

The Physics of Easing

A linear transition is always wrong. The physical world does not move linearly. Attention does not move linearly. An interface that does feels artificial in a way users cannot articulate but definitely notice.

We default to spring-based physics over duration-based easing for most transitions. Springs communicate mass and inertia in a way that bezier curves can approximate but never fully replicate. With Framer Motion, this costs nothing additional in code.

Knowing When Not to Move

The studio that adds motion to everything has not mastered motion. The most powerful motion decisions are the ones that answer: here, stillness is more striking than movement.

A site built from intentional restraint — where the few things that do move carry real weight because everything else holds still — is remembered.