# Motion Direction Aware Hover

Portfolio or case-study grid where the overlay shows the discipline, a summary and a View case study action.

- id: `motion-direction-aware-hover`
- Page: https://agentic-ui-kit.com/components/motion-direction-aware-hover
- Live preview: https://agentic-ui-kit.com/live/component/motion-direction-aware-hover

## Install

```bash
agentic-ui add motion-direction-aware-hover
npx shadcn@4.17.0 add @agentic-ui/motion-direction-aware-hover
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** direction-aware-enter, direction-aware-exit, slide-variant, reveal-mask-variant, interruptible-turn-around, keyboard-focus-from-bottom, escape-to-dismiss, touch-tap-toggle, offscreen-pause, reduced-motion-fallback
- **Intents:** navigate, explore-detail
- **Suits domains:** marketing, media, ecommerce, saas, travel
- **Interaction:** hover, keyboard-navigation, touch
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Portfolio or case-study grid where the overlay shows the discipline, a summary and a View case study action, Template or theme gallery with Preview and Use template actions on each card, Product or listing grid with a quick-view overlay that follows the pointer between cards
- **Avoid when:** The overlay holds the only way to reach essential information on touch-first screens (show it inline instead), Dense data tables or lists where hover overlays would hide neighbouring rows, Cards that are themselves a single link (nested interactive content inside a link is invalid)
- **Preserve when adapting:** overlay-content-in-tab-order, focus-shows-from-bottom, escape-dismisses, fade-only-with-motion-off
- **Replace when adapting:** overlay-content, overlay-surface-colour, variant, distance
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion