MMridha UI

Direction Aware Card

A hover-interactive card component that detects the mouse entry direction (top, right, bottom, left) and slides in an overlay from that direction. Clean implementation with no external dependencies beyond Motion.

ReactNext.jsClient ComponentReactMotion
Loading preview…

CLI Installation

Add to your project using the shadcn CLI:

npx shadcn@latest add @mridha/direction-aware-card

Registry endpoint: https://ui.mridha.net/r/direction-aware-card.json

Manual Installation

1. Install dependencies

pnpm add motion

2. Copy the component file

Copy the source from the Code tab above into components/ui/direction-aware-card.tsx

3. Import the component

import { DirectionAwareCard } from "@/components/ui/direction-aware-card";

4. Use it in a page

export default function Page() {
  return (
    <main>
      <DirectionAwareCard />
    </main>
  );
}

Dependencies

motion

Accessibility

  • Card overlay content is accessible via keyboard focus.
  • Hover-triggered overlay is also shown on keyboard focus for accessibility.
  • Reduced motion collapses to a standard fade instead of directional slide.

Performance

  • Direction detection is a lightweight geometric calculation on mouseenter.
  • Uses CSS transforms — no layout-triggering properties are animated.