card-circle-motion

"use client";
import { motion } from "framer-motion";

export default function CardCircleMotion() {
  return (
    <motion.div
      initial="rest"
      whileHover="hover"
      animate="rest"
      className="relative bg-white rounded-xl p-6 cursor-pointer overflow-hidden shadow-md group"
    >
 
      <motion.div
        variants={{
          rest: { clipPath: "circle(10% at 0% 0%)" },  
          hover: { clipPath: "circle(150% at 0% 0%)" }, 
        }}
        transition={{ duration: 0.4, ease: "easeInOut" }}
        className="absolute inset-0 bg-primary rounded-xl z-0 "
      />

      <motion.div
        variants={{
          rest: { color: "var(--color-primary)" }, 
          hover: { color: "#ffffff" },
        }}
        transition={{ duration: 0.3, ease: "easeInOut" }}
        className="relative z-10"
      >
        <h1 className="text-2xl font-bold group-hover:text-white text-primary">Hello</h1>
        <p className="mt-2 text-base group-hover:text-white text-primary">
          This is an amazing card with nice animation
        </p>
      </motion.div>
    </motion.div>
  );
}