Direction Aware Hover
Card overlay that slides in from the direction the cursor enters.
Preview
Direction Aware Hover
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Image galleries and portfolio grids.
Why this component matters
The directional slide-in feels natural and spatial — the content appears from where the user came.
Usage guidance
Use with image cards that have hover overlay text. The overlay should contain a title and brief description. Works best in square or portrait-oriented grids.
Installation
bash
npx shadcn@latest add @aceternity/direction-aware-hoverUsage
example.tsxtsx
import { DirectionAwareHover } from "@/components/ui/direction-aware-hover";
export default function Example() {
return (
<DirectionAwareHover>
{/* Your content here */}
</DirectionAwareHover>
);
}Source
direction-aware-hover.tsx
components/ui/direction-aware-hover.tsx