# Motion Page Transition

Billing workspace switching between overview, invoices, customers and settings.

- id: `motion-page-transition`
- Page: https://agentic-ui-kit.com/components/motion-page-transition
- Live preview: https://agentic-ui-kit.com/live/component/motion-page-transition

## Install

```bash
agentic-ui add motion-page-transition
npx shadcn@4.17.0 add @agentic-ui/motion-page-transition
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** page-transition, view-transitions-api, direction-aware-slide, history-back-forward, hash-deep-link, focus-to-page-heading, navigation-announcement, interrupt-safe, instant-fallback, reduced-motion-fallback
- **Intents:** navigate, explore-detail
- **Suits domains:** saas, billing, finance, crm, project-management, settings
- **Interaction:** navigate, keyboard-navigation, history
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Billing workspace switching between overview, invoices, customers and settings., Settings sections or a detail page whose tabs are separate routes., Client-side routed dashboard where back and forward should replay the swap in reverse.
- **Avoid when:** Full document navigations across origins; this only animates same-document route changes., Swapping small in-page panels; use a tab indicator or accordion instead of a page-level transition.
- **Preserve when adapting:** single-state-update, direction-from-nav-order, focus-to-page-heading, polite-navigation-announcement, static-informational-state
- **Replace when adapting:** pages-and-content, routing-source, document-title
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion, lib-motion-personalities