Problem

The UI combines transition-all, hover translations, reorder springs, glass effects, nested shadows, many independent radii, and repeated bordered cards. Reduced-motion handling covers only some CSS utilities and not all Framer Motion transitions.

User impact

Streaming and list updates feel visually busy, hover states can look jittery, and Settings/side panels resemble a stack of equally important cards rather than a clear product hierarchy.

Relevant code

• apps/desktop/src/styles.css and token CSS
• Sidebar reorder components
• Settings primitives and shell
• Onboarding, provider tabs, command palette, context panels, and composer

Implementation outline

• Define semantic motion durations/easings for micro, enter/exit, and layout transitions.
• Replace transition-all with explicit properties.
• Remove positional hover motion from dense navigation/list rows.
• Centralize Framer useReducedMotion handling and disable nonessential springs/layout/height animation.
• Define a small radius scale and one elevation scale.
• Reserve glass/blur for overlays that need depth.
• Use plain grouped rows for routine Settings; reserve cards for alerts, summaries, destructive actions, and discrete entities.
• Document when to use borders, cards, elevation, and animation.

Acceptance criteria

• Reduced-motion mode contains no nonessential translation, spring, reorder, or animated-height effects.
• Critical surfaces no longer use transition-all.
• Hovering dense rows does not move surrounding geometry.
• Migrated screens use shared radius/elevation tokens.
• Settings and context panels have materially fewer nested borders/cards.
• Streaming updates do not animate unrelated layout.
• Visual hierarchy remains clear in light and dark modes.

Required tests

• Reduced-motion component tests.
• Normal/reduced-motion visual baselines.
• Lint/check preventing new transition-all in desktop UI.
• Manual audit of onboarding, sidebar reorder, Settings, palette, context rail, and composer.