# Marketing motion vs product motion

By Kush Ahuja · Sep 30, 2026 · Building agents-hub, part 9
Source: https://www.thekush.codes/blog/marketing-motion-vs-product-motion

> The agents-hub landing page moves a lot. The dashboard barely moves. Why they share tokens but not animation, and the rules I use to decide what gets to move.

## Key takeaways
- The agents-hub landing page and dashboard share every colour, font and component but follow different motion rules.
- Marketing pages get scroll reveals and a scroll film; the daily dashboard only animates where the customer acts or something arrives.
- Colours are chosen by contrast: LinkedIn blue for text at about 5.7:1, the brighter blue only for decoration.

When the agents-hub landing page came out right, I asked for a dashboard "as professional as the landing page". The tempting move was to copy its animations too. That would have been a mistake, and the reason is one line I keep coming back to: design for the 100th session.

## Two pages, two jobs

A landing page is visited once or twice. Its job is to explain and convince, so it gets a generous motion budget: headline words rising with a 70ms stagger, scroll reveals, an Apple-style scroll film where a phone turns chaos into a tidy calendar. A dashboard is opened every day. A reveal that delights on day one is in the way by day fifty.

So they share everything visual and nothing kinetic: the same colours, fonts, radii and components, with very different motion rules.

## What the dashboard is allowed to animate

- Page to page: View Transitions. The sidebar never moves, the active nav pill flies to its new item, the new page settles up 10px. No library, and browsers without support just navigate.
- Only where the customer acts or something arrives: a press scales to 0.97, an upload row shows a real progress bar, learned colours pop in with a 50ms stagger.
- Exits use fewer properties than entrances. A dialog enters with translate, scale and blur, and leaves with opacity and a slight scale only.
- A region re-rendered with the same state swaps with no animation. Only a change of state earns an entrance.
- The only loops are real work in progress: a "Learning..." bar and a spinner on a badge.

## The small rules underneath

- Three curves only: a quart ease-out for hovers and fades, an expo ease-out for entrances, an in-out for slow loops. Never ease-in on UI.
- Animate transform, opacity and small blurs. Nothing that triggers layout.
- With reduced motion on, keep the fades, drop the travel, blur and every loop.

## Colour is a contrast decision

I wanted "LinkedIn blue, not AI blue". `#0A66C2` passes WCAG AA for text on white at about 5.7:1, so it carries everything you read or press. The brighter `#008FFF` from agents.org.in is only 3.3:1, so it is used purely for glows and the live dot, never for text. Headings use Bricolage Grotesque and the body uses Geist, because Inter on a marketing page reads as the AI default before anyone reads a word.

This portfolio follows the same split. The home page is marketing, so it moves. The blog you are reading is product, so it mostly holds still.