card-animation

1import React from "react";
2import TextMatrixRain from "../text/text-matrix-rain";
3import {
4  Bookmark,
5  CalendarRange,
6  Fingerprint,
7  MousePointer2,
8} from "lucide-react";
9import { motion } from "motion/react";
10import { useState } from "react";
11import { Button } from "@/components/ui/button";
12import TextBurnNeon from "../text/text-burn-neon";
13 
14const container = {
15  rest: {
16    transition: {
17      staggerChildren: 0.1,
18      staggerDirection: -1,
19    },
20  },
21  hover: {
22    transition: {
23      staggerChildren: 0.1,
24      staggerDirection: 1,
25    },
26  },
27};
28const card = {
29  rest: {
30    scale: 1,
31    y: 0,
32    transition: {
33      duration: 0.4,
34      ease: [1, 0.18, 0.6, 0.8] as [number, number, number, number],
35    },
36  },
37  hover: {
38    scale: 1.05,
39    y: -10,
40    transition: {
41      duration: 0.4,
42      ease: [1, 0.18, 0.6, 0.8] as [number, number, number, number],
43    },
44  },
45};
46 
47const pointer2 = {
48  rest: {
49    x: 0,
50    rotate: 0,
51    rotation: 0,
52    transition: {
53      duration: 0.4,
54      ease: [1, 0.18, 0.6, 0.8] as [number, number, number, number],
55    },
56  },
57  hover: {
58    x: -100,
59    rotate: 20,
60    transition: {
61      duration: 0.6,
62      ease: [1, 0.18, 0.6, 0.8] as [number, number, number, number],
63    },
64  },
65};
66 
67const CardAnimation = () => {
68  const [isHover, setIsHover] = useState(false);
69 
70  return (
71    <motion.div
72      variants={container}
73      animate={isHover ? "hover" : "rest"}
74      onHoverStart={() => setIsHover(true)}
75      onHoverEnd={() => setIsHover(false)}
76      className=" max-w-md w-full border rounded-3xl p-4 sm:p-7"
77    >
78      <TextMatrixRain repeat={false} className="text-xs">
79        AI POWERED
80      </TextMatrixRain>
81 
82      <h1 className="mt-2 text-lg sm:text-xl  font-light">
83        Built for Professional AI Workflows
84      </h1>
85      <h2 className="mt-3 text-xs sm:text-sm">
86        Streamline your AI operations with powerful orchestration tools.
87        Automate complex workflows, manage multiple models, and scale
88        effortlessly with our intuitive interface.
89      </h2>
90 
91      <section className="mt-10 sm:mt-20 relative h-48 sm:h-60 flex justify-center items-start">
92        <motion.div
93          variants={pointer2}
94          className="flex justify-center items-center h-8 aspect-square z-50 bottom-11 right-12 absolute  rounded-full "
95        >
96          <MousePointer2 size={24} className="" />
97        </motion.div>
98        <motion.div
99          variants={card}
100// … truncated