Typescript、Tailwind、Framer Motion を使用したアニメーション ホバー ロゴ

import { useState, useCallback } from "react";
import { motion, AnimatePresence, useMotionValue } from "framer-motion";
import { Play } from "lucide-react";

デフォルト関数 LogoHover() をエクスポート {
  const [isHovered, setIsHovered] = useState(false);
  const [showVideo, setShowVideo] = useState(false);
  const x = useMotionValue(0);

  const handleMouseMove = useCallback(
    (イベント: React.MouseEvent<HTMLElement>) => {
      consthalfWidth =event.currentTarget.offsetWidth / 2;
      x.set(event.nativeEvent.offsetX -halfWidth);
    }、
    [×]
  );

  戻る （
    <div className="relative w-[100px] h-[80px] カーソルポインタ" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <アニメーションプレゼンス>
        {! はホバーされています && (
          // 独自のロゴに変更します
          <motion.img src="/theo-logo.png" alt="Wegic Logo" className="absolute inset-0 w-full h-full object-contain" 初期値={{ 不透明度: 1, スケール: 1 } } exit={{ 不透明度: 0, スケール: 0.8 }} 遷移={{ 期間: 0.2 }} />
        )}
      </AnimatePresence>

      <アニメーションプレゼンス>
        {はホバーされています&& (
          <motion.div className="absolute inset-0 flex items-center justify-center w-full"Initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0, スケール: 0.8 }} 遷移={{ 期間: 0.2 }}>
            <ボタン
              className="flex w-full items-center justify-center gap-2 bg-white border border-black h-10 py-2rounded-md"
              onMouseMove={ハンドルマウスムーブ}
              onMouseEnter={() => setShowVideo(true)}
              onMouseLeave={() => setShowVideo(false)}
            >
              <再生サイズ={16} fill="white" ストローク幅={2} aria-hidden="true" />
              <p className="text-[10px] flex font-semibold">ビデオを見る</p>
            </ボタン>
          </motion.div>
        )}
      </AnimatePresence>
      {/* 動画ツールチップ */}
      <AnimatePresence モード="popLayout">
        {ビデオを表示&& (