Directional Hover

The DirectionalHover component tracks mouse events and calculates the angle of entry relative to the center of the bounding box. It then uses Framer Motion's AnimatePresence with custom variants to animate an overlay from the exact edge your cursor crossed — with 5 distinct animation effects.

Live Preview

Installation

Props

Effects

| Effect | Animation | Feel | |---|---|---| | slide | Full slide from entry edge | Classic, snappy | | fade | Opacity crossfade | Subtle, elegant | | scale | Expand from entry edge | Curtain reveal | | flip | 3D perspective rotation | Dramatic, playful | | blur | Slide with gaussian blur dissolve | Dreamy, cinematic |

How it Works

The component calculates the angle between the cursor and the card center using Math.atan2. It maps the result to one of four quadrants (top/right/bottom/left). That direction is passed as a custom prop to Framer Motion variants, which adapt the initial/exit animation accordingly. The effect prop selects which set of variants to use — from simple opacity fades to perspective-aware 3D flips.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { DirectionalHover } from "@/components/creative/directional-hover";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { DirectionalHover } from "@/components/creative/directional-hover";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <DirectionalHover
        overlayContent{/* value */}
        overlayClassName="example"
        effect{/* value */}
      >
        <div>Content goes here</div>
      </DirectionalHover>
    </div>
  );
}