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.