# Motion Perspective Gallery

Case-study or portfolio showcase on an agency or product marketing page.

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

## Install

```bash
agentic-ui add motion-perspective-gallery
npx shadcn@4.17.0 add @agentic-ui/motion-perspective-gallery
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** horizontal-gallery, coverflow-variant, fan-variant, flat-carousel-variant, snap-to-centre, mouse-drag-with-fling, native-touch-and-trackpad-scroll, click-side-item-to-centre, keyboard-carousel-pattern, inert-side-items, controlled-and-uncontrolled, state-callback, semantic-colour-tokens, reduced-motion-fallback
- **Intents:** navigate, explore-detail
- **Suits domains:** saas, ecommerce, media, marketing, travel
- **Interaction:** drag, click, keyboard-navigation, scroll
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Case-study or portfolio showcase on an agency or product marketing page, Featured products or collections on a storefront landing page, Album, film or course covers in a media library hero, Short process or timeline stages with the fan variant
- **Avoid when:** Browsing many items to compare them, where a grid shows more at once, Dense dashboards or forms, where one card at a time slows work down, Linear or enterprise personalities, where the depth group is not allowed and the gallery is a flat scroll-snap carousel, More than one expressive piece in the same viewport
- **Preserve when adapting:** carousel-pattern, inert-side-items, snap-to-centre, transform-and-opacity-only, flat-carousel-without-motion, work-only-in-view
- **Replace when adapting:** item-content, labels, variant, card-width, timing
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** carousel, card, button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion