aesthetic guides · 8 min read
Motion systems: how the best AI products animate
Duration scales, easing curves, spring configs. The best AI products treat motion as a system, not a set of one-off decisions. Here is what separates intentional motion from accidental motion.
Most products animate by accident. A developer reaches for a library default, a designer specifies "something smooth," and the result is a product where every interaction moves at a slightly different speed, with slightly different curves, for no particular reason.
A motion system is what happens when you treat animation as seriously as you treat color. It has a duration scale, a set of easing curves, spring configurations for interactive elements, and clear rules about when to use each. The best AI products have all of this. Here is what they chose, and why.
What a motion system is made of
Duration scale. Not just "fast" and "slow" — a specific set of values. Something like: 100ms, 150ms, 200ms, 300ms, 500ms. Each value has a purpose. 100ms is for hover states that should feel instant. 500ms is for modals that need to feel considered. You pick from the scale. You do not freehand.
Easing curves. The shape of the animation over time. ease-out starts fast and decelerates — reads as natural, like something coming to rest. ease-in-out accelerates and decelerates — reads as considered, slightly formal. ease-out-expo starts very fast and almost stops — reads as snappy, precision-tooled. The difference between these is not subtle. An interface with the wrong easing feels like a cheap knockoff of itself.
Spring configs. Springs are physics-based animations with mass, stiffness, and damping instead of duration and easing. They are especially good for interactive drag, reordering, and anything where the animation should respond to the velocity of the user's gesture. But they are overkill for hover states and panel transitions, where controlled duration matters more.
Stagger patterns. When multiple elements animate together — a list appearing, cards loading in — a stagger offset (typically 20-40ms per item) creates the sense of a cascade. Without stagger, items that animate in perfect sync look like a bug.
Linear: precision and speed above everything
Linear's motion system is built around a single conviction: the interface should feel instant. Their duration range is 200-350ms for most transitions, with hover states at 100-150ms. That is fast. For comparison, many enterprise tools animate at 400-600ms, which is why they feel sluggish.
The signature easing is ease-out-expo. This curve starts extremely fast and nearly stops at the end. It matches the sensation of Linear's design philosophy: professional users who know what they want, getting there without waiting.
Springs appear specifically for interactive drag — reordering issues, dragging cards between columns. When you drag, the spring responds to your velocity. If you throw a card fast, it moves with that energy. If you nudge slowly, it settles gently. This is the right use of springs: where user gesture has momentum.
For everything else — panel slides, dropdown opens, transitions between views — Linear uses controlled CSS transitions with ease-out-expo. Springs would add bounciness that conflicts with the "precision software" message.
Stripe: motion as a trust signal
Stripe's motion is notably slower than Linear's, and deliberately so. Their range is 350-500ms for significant transitions, with careful attention to easing on financial data interactions.
This is intentional. Fast animation in a fintech context can feel anxious, even unreliable. When a user initiates a payment and something flashes past at 150ms, there is a subtle fear response: did that actually go through? Stripe's slower, confident animations say: yes, something happened. We are not rushing.
The easing choices lean toward ease-in-out and custom cubic beziers that soften both entry and exit. This creates a sense of smooth inevitability. Things arrive and depart as if they were always going to.
Springs almost never appear in Stripe's UI. Springs introduce unpredictability, small bounces, slight overhoots. In a financial context, unpredictability is the last thing you want. The motion system signals control.
Vercel: motion as absence
Vercel's approach is the most restrained of the three. Duration range: 150-250ms. Easing: mostly ease-out with some linear for progress indicators. Springs: almost none.
The philosophy is not minimalism for its own sake. It is that Vercel's product — deployment, infrastructure, configuration — is a context where the user wants information, not performance. A deployment succeeding should not feel cinematic. It should feel correct.
Silence is a design choice at Vercel. When you toggle a setting, it just toggles. There is no bounce, no flourish. The feedback is in the state change itself, not in the theatrical delivery of it. This restraint communicates reliability. The product is so confident in itself that it does not need to call attention to every action.
The 150-250ms range is just fast enough to feel responsive without feeling imprecise. You know something happened. You do not have to watch it happen.
The signals each approach sends
Linear's fast springs and expo easing communicate: this tool respects your time. You are an expert. We will not make you wait.
Stripe's slower, smooth curves communicate: we are handling something important. We are doing it carefully. You can trust us.
Vercel's minimal, fast transitions communicate: the product works. We do not need to convince you with movement.
These are not arbitrary preferences. They are legible signals that match the product's core promise. A motion system that contradicts the product's message — a bank with bouncy springs, a professional tool with slow theatrical transitions — creates dissonance users feel but cannot always name.
Using DesignMD's motion systems
DesignMD's motion files encode these decisions as tokens you can drop into your project. The linear.md motion file includes the full duration scale (100ms through 500ms), the spring configurations for drag interactions, and the easing presets with their intended uses.
To use them, add the relevant MOTION.md to your CLAUDE.md:
@content/motion/linear.md
When you ask Claude to build a dropdown, a panel, a list with items — it will use the correct durations, the correct easing, and the correct spring configs for interactive elements. The motion will match the design language because the design language is in the context.
You are not picking values from a guess. You are using 14 years of Linear's interaction refinement, encoded and ready.