NORTHSTAR NOTE
Flowmint
Motion should answer a question
When an element moves, the visitor spends attention following it. That cost is justified when the motion answers a question: what changed, where did this come from, which item is active, or how are these pieces connected? If the animation cannot answer one of those questions, it is probably decoration competing with the content.
This does not mean every interface should be static. A restrained reveal can establish reading order. A card transition can show that the surface is interactive. An accordion animation can preserve orientation while content expands. The standard is not whether motion looks refined in isolation; it is whether the page becomes easier to understand.
Start with state, not spectacle
The strongest interface motion usually lives between states: closed and open, idle and focused, default and selected, page and detail. Design the two states first. Make sure each one is clear without animation. Then use motion to connect them. This prevents a common failure where the animation is carrying information that disappears for keyboard users, touch users, or people with reduced motion enabled.
For a mobile menu, the closed state must make the trigger obvious and the open state must make navigation obvious. The transition should preserve the position of the brand and trigger so the interface feels continuous. For a form, focus, validation, pending, success, and error states should be visible before timing or easing is refined.
Use timing to express hierarchy
Fast feedback belongs to direct manipulation: button presses, focus rings, and simple hover changes. Interface transitions such as menus and accordions can take a little longer because the layout is changing. Editorial reveals can be slower, but the content should never wait behind them. A useful range is roughly 150 milliseconds for feedback, 250 to 350 milliseconds for interface changes, and under 650 milliseconds for an intentional entrance.
Consistency matters more than finding a magical duration. If every section uses a different spring, the site feels unstable. Choose one or two curves and let scale determine the timing. Small movements finish quickly. Larger compositional changes get more time. The Flowmint concept uses calm allocation paths and short state changes because the brand idea is control, not speed for its own sake.
Avoid movement that fights reading
Continuous background motion, large parallax, and cursor-following effects can make a screenshot look dynamic while making the page harder to use. They create competition in the visitor’s peripheral vision and can make scrolling feel less predictable. If a background must move, it should be subtle, localized, and able to pause or disappear.
Text should be available immediately. Do not require an animation to finish before a heading becomes readable. Avoid staggered character reveals for important claims; they slow comprehension and often produce poor reduced-motion fallbacks. If a section entrance is useful, a short opacity and small vertical transform on the group is usually enough.
Design the reduced-motion version at the same time
Reduced motion is not a final switch that simply removes every transition. The alternative still needs clear feedback and hierarchy. Replace parallax and large spatial movement with immediate state changes or a short opacity fade. Keep focus rings, validation states, and other essential feedback. Ensure decorative pointer response becomes a static composition on touch and reduced-motion devices.
Testing should include the operating system preference, not only a designer-controlled preview. Open menus, accordions, cards, and form states with reduced motion enabled. Check that no content disappears, no element jumps because its animation was also controlling layout, and no interaction relies on movement alone.
A practical motion audit
List every animated element and write its job beside it. Orientation, hierarchy, state, connection, feedback, or decoration. Remove animations that have no job. For the remaining ones, verify that the end states work without motion, the timing matches the scale, the transition does not cause layout shift, and the touch behavior does not depend on hover.
Then watch the whole page rather than isolated prototypes. Several tasteful effects can become excessive when they play in the same viewport. Motion is part of the Brand & Web Systems service because it needs the same discipline as typography and spacing: a limited vocabulary, consistently applied, supporting the story rather than asking to become the story.