Motion & Interaction Design Principles

The plain-language idea

Every animation should answer a specific question: what does this movement communicate that a static state change wouldn't? Good motion clarifies cause and effect (this appeared because of that), spatial relationships (this panel came from that direction, and will return there), or state (this is loading, this is now active). Motion added because a page "felt flat" without asking what it's communicating is decoration, and decoration is the first thing that should get cut when a product needs to feel calmer, faster, or more serious.

Two practical conventions carry most of the weight:

• Duration and easing should match the size and distance of what's moving. Small, local changes (a button's hover state) are fast (100–200ms); larger transitions (a panel entering the viewport) are a bit slower (250–400ms) with easing that starts fast and settles gently (ease-out), because that's closer to how physical objects actually decelerate.
• prefers-reduced-motion isn't an edge case — treat it as a requirement. Vestibular disorders can make large-scale motion (parallax, zooming, spinning) genuinely nauseating, not just "not to someone's taste." WCAG's success criterion for interaction-triggered animation (2.3.3, Animation from Interactions) is technically AAA-level, not AA — but respecting the OS-level prefers-reduced-motion setting is cheap, has no downside for users who don't need it, and is standard practice regardless of which conformance level a product targets.

See it in a real thing: one authored moment, reused everywhere

This platform's own motion system deliberately reuses a small vocabulary instead of inventing a new animation per component:

@keyframes praxis-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes praxis-dot-pulse {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40%           { opacity: 1; transform: translateY(-3px); }
}

praxis-rise communicates one specific thing — new content has arrived — and gets reused for dashboard cards, quiz feedback, and lesson content alike, rather than each surface inventing its own entrance. dot-pulse communicates "something is actively happening" (an AI tutor thinking, a logo's spark) — and this platform's own animated logo deliberately reuses that exact same pulse instead of authoring new "thinking" motion just for the mark. That reuse is itself a design decision: a product with five different loading animations is communicating five different things by accident, when it means to communicate one.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

What people usually miss

Watch out

• "Reduced motion" doesn't mean "no visual feedback." The rule above zeroes duration rather than deleting the animation — content still fades in and states still change, just instantly, so users who need reduced motion aren't left with a broken-feeling, static-only interface.
• Motion that repeats indefinitely (like a pulsing dot) should be reserved for genuinely ongoing states, not used as decoration on static content — an infinite animation on something that isn't actually still "happening" trains users to ignore all your motion, including the parts that matter.
• Easing curves aren't interchangeable. ease-out (fast start, gentle stop) reads as something arriving and settling; linear reads as mechanical, appropriate for a progress bar tracking real elapsed time but wrong for almost everything else, because nothing in the physical world actually moves at a constant velocity and then just stops.
• Motion is disproportionately expensive relative to its perceived value if it's not orchestrated. A page where five elements all fade in with an identical, simultaneous animation feels less deliberate than staggered timing (each element delayed slightly after the one before it) — the same visual language, a fraction more thought, a much stronger sense that the motion was authored rather than defaulted.

Why this matters in interviews

"When would you not add an animation?" is a more revealing question than "how would you animate this," because it tests whether a candidate treats motion as a deliberate, bounded design language or as a feature that gets sprinkled on for polish. The strongest answer names what the motion needs to communicate before naming how to build it — and can point to prefers-reduced-motion as a requirement they'd build in from the start, not bolt on after a complaint.