# Motion Hero To Detail

Brand media library where an asset thumbnail grows into its detail dialog with metadata, tags and download actions.

- id: `motion-hero-to-detail`
- Page: https://agentic-ui-kit.com/components/motion-hero-to-detail
- Live preview: https://agentic-ui-kit.com/live/component/motion-hero-to-detail

## Install

```bash
agentic-ui add motion-hero-to-detail
npx shadcn@4.17.0 add @agentic-ui/motion-hero-to-detail
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** list-to-detail-expansion, shared-image-and-title, view-transitions-api, flip-fallback, instant-fallback, modal-detail-variant, route-detail-variant, history-back-forward, deep-link, focus-handoff-and-restore, escape-to-close, reduced-motion-fallback
- **Intents:** explore-detail, navigate, manage-collection
- **Suits domains:** media, ecommerce, file-storage, marketing, travel
- **Interaction:** navigate, keyboard-navigation, history
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Brand media library where an asset thumbnail grows into its detail dialog with metadata, tags and download actions, Product grid opening a product page whose hero image is the card thumbnail, with a shareable URL, Listing gallery that opens a property detail over the results and returns focus to the card on Escape
- **Avoid when:** Items have no image or visual anchor to carry across (use a page transition or a plain dialog), The detail needs stepping between items, a hash-based router or a polite view announcement (use motion-shared-element), Dense tables where rows open side panels (use a drawer or split view without a shared element)
- **Preserve when adapting:** focus-to-detail-heading-and-back-to-trigger, escape-closes, route-variant-pushes-history, single-owner-per-shared-name, instant-swap-without-motion
- **Replace when adapting:** items-and-media, detail-content, strings, route-param, transition-duration
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, dialog, button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react, react-dom
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion