# Motion Shared Element

Project portfolio where a card opens into the project detail with the same cover and title.

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

## Install

```bash
agentic-ui add motion-shared-element
npx shadcn@4.17.0 add @agentic-ui/motion-shared-element
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** shared-element-morph, view-transitions-api, collection-to-detail, detail-stepping, history-back-forward, hash-deep-link, focus-handoff-and-restore, navigation-announcement, interrupt-safe, flip-fallback, instant-fallback, reduced-motion-fallback
- **Intents:** explore-detail, navigate, manage-collection
- **Suits domains:** project-management, ecommerce, media, crm, travel, file-storage
- **Interaction:** navigate, keyboard-navigation, history
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Project portfolio where a card opens into the project detail with the same cover and title., Product grid opening a product page whose hero image is the card thumbnail., Media library or listing gallery stepping between items in the detail view.
- **Avoid when:** Dense tables or lists without a visual anchor to carry across; use a page transition instead., Detail views opened in a separate document or origin; this only morphs same-document swaps.
- **Preserve when adapting:** single-owner-per-shared-name, single-state-update, focus-to-detail-heading-and-back-to-card, polite-view-announcement, static-informational-state
- **Replace when adapting:** items-and-media, 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/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion