Logo Hover Animasi menggunakan Typescript, Tailwind dan Framer Motion

import { useState, useCallback } daripada "react";
import { motion, AnimatePresence, useMotionValue } daripada "framer-motion";
import { Main } daripada "lucide-react";

eksport fungsi lalai LogoHover() {
  const [isHovered, setIsHovered] = useState(false);
  const [showVideo, setShowVideo] = useState(false);
  const x = useMotionValue(0);

  const handleMouseMove = useCallback(
    (acara: React.MouseEvent<HTMLElement>) => {
      const halfWidth = event.currentTarget.offsetWidth / 2;
      x.set(event.nativeEvent.offsetX - halfWidth);
    },
    [x]
  );

  kembali (
    <div className="relative w-[100px] h-[80px] cursor-pointer" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <AnimatePresence>
        {!isHovered && (
          // tukar dengan logo anda sendiri
          <motion.img src="/theo-logo.png" alt="Logo Wegic" className="absolute inset-0 w-full h-full object-contain" initial={{ kelegapan: 1, skala: 1 } } keluar={{ kelegapan: 0, skala: 0.8 }} peralihan={{ tempoh: 0.2 }} />
        )}
      </AnimatePresence>

      <AnimatePresence>
        {isHovered && (
          <motion.div className="absolute inset-0 flex items-center justify-center w-full" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0, scale : 0.8 }} peralihan={{ tempoh: 0.2 }}>
            <butang
              className="flex w-full items-center justify-center gap-2 bg-white border border-black h-10 py-2 rounded-md"
              onMouseMove={handleMouseMove}
              onMouseEnter={() => setShowVideo(benar)}
              onMouseLeave={() => setShowVideo(palsu)}
            >
              <Saiz main={16} fill="white" strokeWidth={2} aria-hidden="true" />
              <p className="text-[10px] flex font-semibold">tonton video</p>
            </butang>
          </motion.div>
        )}
      </AnimatePresence>
      {/* Petua Alat Video */}
      <AnimatePresence mode="popLayout">
        {showVideo && (
          <motion.div
            permulaan={{ kelegapan: 0, y: 20, skala: 0.6 }}
            bernyawa={{
              kelegapan: 1,
              y: 0,
              skala: 1,
              peralihan: {
                kekakuan: 260,
                redaman: 10,
                tempoh: 0.3,
              },
              lebar: "200px",
              ketinggian: "auto",
            }}
            keluar={{ kelegapan: 0, y: 20, skala: 0.6 }}
           >