# Motion Image Reveal Hover

Agency case study index where each project title reveals its cover near the pointer.

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

## Install

```bash
agentic-ui add motion-image-reveal-hover
npx shadcn@4.17.0 add @agentic-ui/motion-image-reveal-hover
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** hover-image-preview, focus-image-preview, pointer-follow, velocity-tilt, follow-variant, side-panel-variant, crossfade-between-items, viewport-edge-flip, escape-to-dismiss, pause-offscreen, reduced-motion-fallback
- **Intents:** explore-detail, navigate
- **Suits domains:** marketing, media, ecommerce
- **Interaction:** hover, click
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Agency case study index where each project title reveals its cover near the pointer, Editorial archive listing issues with a cover preview in a side panel, Collection or lookbook index that previews product imagery as the visitor scans titles
- **Avoid when:** Dense data tables or admin lists where a floating image hides neighbouring rows, Lists without a meaningful image per item, Touch-first products where the side slot adds little over a card grid, Projects whose personality excludes the depth group (linear, enterprise), where only the side slot remains
- **Preserve when adapting:** links-are-primary, alt-text-on-every-image, preview-on-focus, escape-dismisses, side-slot-without-motion
- **Replace when adapting:** items, size, variant, placeholder, colour
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, card, select, table
- **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