# Motion View Transition API

Project or product grid whose card cover and title morph into the detail page and back.

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

## Install

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

## Metadata

- **Level:** layout
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** view-transitions-api, nextjs-app-router, cross-route-transition, per-route-transition-types, shared-element-morph, slide-variant, fade-variant, zoom-variant, direction-aware-back-forward, history-traversal-transition, focus-to-page-heading, iframe-instant-navigation, instant-fallback, reduced-motion-fallback
- **Intents:** navigate, explore-detail
- **Suits domains:** saas, project-management, crm, ecommerce, analytics, settings
- **Interaction:** navigate, keyboard-navigation, history
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Project or product grid whose card cover and title morph into the detail page and back, Workspace sections as separate routes that slide by navigation order and reverse on browser back, Greenfield Next.js app with the linear or stripe personality, where it is the default navigation motion
- **Avoid when:** Panels swapped inside a single route (use motion-page-transition or a tab indicator), Routes built around iframes, maps or video embeds that must stay live; they switch instantly anyway, Enterprise personality projects, whose navigation token is instant
- **Preserve when adapting:** single-router-commit-per-transition, direction-from-history-and-navigation-order, focus-to-page-heading, instant-navigation-without-motion, no-transition-on-iframes
- **Replace when adapting:** routes-and-variants, route-pairs, shared-element-names, pages-and-content
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, select, table
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, next, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion