Too many curves.
Look at a typical Figma project — not bad, not good, average — and it has thirty to fifty different animation curves. Every component has its own. The button has one, the modal another, the toast a third. No system.
That's fine for a prototype. It's bad in production. The site starts to "jitter" — not visually, but tonally. Every element moves at its own frequency, and the interface stops reading as a single organism. This is exactly the situation where "everything looks tidy, but something's off."
That something is motion without a vocabulary.
Four curves.
In the studio we have four curves. We named them after the studio: nova-out, nova-in, nova-inout, nova-spring.
nova-out — for everything that appears. Fast start, slow finish. Buttons, toasts, pop-up menus. Gently appeared, gently settled.
nova-in — for everything that disappears. Slow start, fast finish. The mirror of nova-out, symmetry.
nova-inout — for moves and transformations. A symmetric curve. Used least often — only when an element moves, rather than appears or disappears.
nova-spring — for interactive responses that should feel like matter. Magnetic buttons, drags, drag-to-dismiss. Not for typography and not for modals.
Four. That's it. No ease-in-out-back-elastic.
Six durations.
Durations are the next vocabulary. There are few of them too: 100, 220, 420, 720, 1200, 2000 milliseconds. With names: instant, fast, base, slow, slower, glacial.
100 ms — for micro-responses that must feel instantaneous. A button's hover color, a checkbox state change. Less — the eye doesn't register it; more — it feels laggy.
220 ms — for most UI animations. A menu appearing, a tab switch, hover effects on cards. This is the "factory" duration.
420 ms — for meaningful transitions. Opening a modal, switching slides, opening a dropdown. Long enough to notice, short enough not to annoy.
720 ms — for large transformations. Opening a full-screen overlay, transitioning between page sections.
1200 and 2000 ms — for rare decorative effects. Hero animations on the home page, page transitions, ambient background motion.
No arbitrary transition: 0.347s that appeared in Figma and was forgotten in production. Only variables.
Less is confidence.
When a designer has fifty curves to choose from, every decision is random. When there are four, the system becomes recognizable. Motion reads as a voice.
It's the same logic as typography. A good brand is two typefaces, not five. A good color palette is six colors, not forty. Good motion is four curves.
In the premium segment this effect is amplified. A client with a premium budget doesn't count the number of effects; they read the intonation. Monotone, calm, confident motion reads as more expensive than varied and virtuosic motion. This is counterintuitive to junior designers and obvious to mature ones.
A smaller vocabulary used precisely beats a larger one.
When not to move.
prefers-reduced-motion: reduce is a system setting a user turns on when they have vestibular issues, migraines, an anxiety disorder, or simply a slow computer. The browser passes this setting to the site through a CSS media query.
Most sites ignore it. Some respond, but "gently": they reduce the amplitude, speed things up, make it "quieter." That's wrong.
The correct response is to turn everything off. Not "more subtle." Not "different." Off.
In our system, all four curves under reduce are replaced with step-end at a duration of 0 ms. No animations remain. States change instantly. The site works like a plain document — which is exactly what the person who turned on that setting wants.
What motion doesn't do.
Motion in a premium site isn't decoration. It's a signal.
When a button magnetizes to the cursor — that's the signal "this thing can be pressed." When a section reveals smoothly on scroll — that's the signal "this section is connected to the previous one, not torn out of context." When a form gently expands on focus — that's the signal "you're doing the right thing, keep going."
Animation that carries no meaning is extra noise. Paradoxically, premium sites usually have less of it than average. Wealthy brands don't wave their arms.
The test: turn motion off.
A simple quality check for a motion vocabulary is to turn it off entirely and look at the site.
If the site becomes incomprehensible without animation — that's bad motion. The animation carried information that should have been conveyed by other means (typography, hierarchy, color). That's typography-through-movement, and it's fragile.
If the site becomes duller without animation but still works — that's good motion. It adds a layer of feeling rather than replacing the basic means.
All our sites must pass the second test. It's part of final acceptance, alongside Lighthouse and the no-JavaScript check.