Motion is grammar, not decoration
The difference between a site that feels premium and one that feels busy is not how much motion it has. It is whether the motion means anything.
Strip the adjectives away and motion on the web does exactly one honest job: it answers questions the user did not know they were asking. Where did this come from? What is connected to what? Did that work? What should I look at now?
When motion answers those questions, the interface feels inevitable. When it does not, it feels like weather — pleasant at best, in the way at worst.
Verbs, not effects
The most useful shift in how I build motion was to stop collecting effects and start writing a vocabulary. On this site, the particle field has four verbs:
- Dim — content is taking over; the field steps into the background.
- Scatter — ambient idle; nothing is asking for attention.
- Morph — one thing is becoming another; identity is preserved.
- Detonate — you crossed a threshold; the world is rebuilding.
Every animation on the site is one of those four, and that is precisely why it does not feel busy. A vocabulary this small has grammar: a morph on hover promises the shape you will get after the click. A detonation only happens on navigation, so it always means "you went somewhere."
If an animation could be swapped for a completely different one and the page would make just as much sense — it was decoration, and it can go.
The three questions
Before any animation ships, it has to answer yes to at least one of these:
- 01Does it explain a relationship? Origin, hierarchy, cause and effect. The case-study thread that draws downward as you scroll is saying these six stages are one continuous process — that is information, not garnish.
- 02Does it confirm an action? Press states, fill sweeps, the cursor ring opening over a target. Sub-200ms, always.
- 03Does it direct attention honestly? One thing at a time. If two elements animate at once, one of them is lying about its importance.
Everything else — the parallax that exists because it can, the stagger on every list — fails the audit.
Restraint is a feature with a spec
Two hard rules made restraint enforceable instead of aspirational:
prefers-reduced-motionis not an afterthought. The engine simply never boots, and the site stands on typography and layout alone. If the static version does not hold up, the motion was hiding a design problem.- Scroll-driven animation scrubs; it never plays on a timer while you read. Motion you cannot pause with your thumb is motion working against the reader.
Premium is not the amount of motion. It is the ratio of meaning to movement — and the sites that feel the most alive are usually the ones that move the least, at exactly the right moments.
Yassine Amraoui
DESIGNER & MULTIMEDIA DEVELOPER