Movement as a design decision, not a plugin setting
Motion on most sites arrives late, applied from a library of presets after the layout is finished. What results is animation that has no relationship to the design it decorates: fades of arbitrary duration, easing curves nobody chose, elements sliding in because the preset existed. Treating movement as design means the opposite order, because how something moves carries as much of the brand as the typography does.
States rendered as style, not as runtime behavior
The most consequential decision in this work is technical and it changes everything downstream. Hover and focus states get converted into real style rules rather than being driven by script at runtime. A state expressed as a style rule can be inspected in developer tools, which means it can be debugged in minutes rather than through an afternoon of guessing. It survives a content edit. It can be adjusted without anyone touching program logic. And it applies to a keyboard user exactly as it applies to somebody with a mouse, because focus and hover resolve through the same mechanism.
Sites that animate through runtime behavior tend to lose their interactive states quietly during maintenance, and nobody notices until a keyboard user reports that they cannot see where they are.
Reduced motion is a requirement
A visitor who has asked their operating system to limit movement has stated a need, frequently a medical one, since vestibular disorders make parallax and large-scale movement genuinely unpleasant. Honoring that preference is not a matter of disabling everything, which usually breaks a layout that relied on an animation to reveal content. The correct handling is designed in parallel: transitions become instantaneous rather than absent, movement across large distances is replaced with a change in opacity, continuous motion stops, and everything remains reachable. We build both readings at the same time rather than adding the reduced version afterward, because retrofitting it invariably leaves something unreachable.
Interaction confined to its own island
A few structural rules prevent the failures that show up most often in review. Stacking is declared explicitly, so an overlay sits where the designer intended rather than wherever the browser happened to resolve it. Pointer behavior is scoped to islands, so an interactive overlay does not blanket the links underneath it and quietly disable half a page. Contrast is computed with luminance math rather than judged by eye, so text over a moving background resolves against what is actually behind it. That last one catches a failure that survives most review processes, because a designer looking at a hero at one moment of an animation cannot see the frame where the text becomes unreadable.
Timing carries the brand
Duration and easing communicate character, and most sites never make a decision about either. Fast and sharp reads as efficient and technical. Slower with a soft curve reads as considered and premium. Bouncing reads as playful, or as unserious on the wrong site.
"A site where one element eases and another snaps feels unfinished even to somebody who could not say why."
So durations and curves live in the design system as named values rather than as numbers typed into individual components. Changing the character of a site becomes one edit.
Micro-interactions worth the effort
Small responses do disproportionate work, because they confirm that a system is alive and listening. A button that acknowledges a press before the network responds. A field that validates as somebody types rather than after they submit. A loading indicator that reflects real progress instead of spinning indefinitely. None of that is decoration. Each one answers a question the visitor would otherwise have to guess at, and guessing is where abandonment starts.
Performance discipline
Animation that stutters is worse than no animation, since a dropped frame reads as a broken site rather than as a subtle effect. The properties that animate cheaply are the ones the browser can hand to the graphics card, which in practice means transforms and opacity. Animating layout properties forces recalculation on every frame and is the single most common cause of stutter. Work is scheduled against the browser’s own frame timing rather than on arbitrary intervals, and anything offscreen stops.
Where motion work connects
Large-scale rendered visuals are covered in interactive experiences, scroll-linked sequencing is covered in scroll choreography, and the named values that keep timing consistent live in design systems.
How the engagement runs
Motion work happens through screen shared sessions, reviewed on real devices. If your site’s interactive states stopped working at some point and nobody can say when, the cause is usually motion built as runtime behavior rather than as design.