Direction Aware Hover

Cards 194

About

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

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Direction Aware Hover to your project and fits it to your theme.

Code

How Direction Aware Hover is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useRef, useState } from "react";
import Image from "next/image";
import { AnimatePresence, motion } from "framer-motion";
import { cn } from "@/lib/utils";
import { DirectionAwareHover } from "@/components/ui/direction-aware-hover";

export function DirectionAwareHoverDemo() {
  const imageUrl =
    "https://cdn.21st.dev/assets/mirror/00/0012472dbb7d1a41e20a90ddb37a8519af4a3de2d97670ed6fd2a8ce167dea50.jpg";
  return (
    <div className="h-[40rem] relative  flex items-center justify-center">
      <DirectionAwareHover imageUrl={imageUrl}>
        <p className="font-bold text-xl">In the mountains</p>
        <p className="font-normal text-sm">$1299 / night</p>
      </DirectionAwareHover>
    </div>
  );
}