Introducing Aceternity UI Pro - 70+ premium component packs and templates to build amazing websites.
Logo

Direction Aware Hover

A direction aware hover effect using Framer Motion, Tailwindcss and good old javascript.

Open in
image

In the mountains

$1299 / night

Installation

Run the following command

npx shadcn@latest add @aceternity/direction-aware-hover

Props

PropTypeDescription
imageUrlstringThe URL of the image to be displayed.
childrenReact.ReactNode or stringThe content to be displayed over the image.
childrenClassNamestring (optional)The CSS class to be applied to the children.
imageClassNamestring (optional)The CSS class to be applied to the image.

Build websites faster and 10x better than your competitors with

Aceternity UI Pro

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

70+ templates and component blocks combined

Ready to copy paste component blocks, save days of development time

Aceternity UI Pro Demo - Light Mode
A product by Aceternity
Building in public at @mannupaaji