im feeling fairly new to hover animations and ive looked everywhere to try and achieve this effect for about a month. is there any examples I can look at to achieve this? video to YouTube link is posted below. thanks!

I tried inspecting element to see where I can find this but was unsuccessful

I tried this in my next.js app but its not the same

import React, { useState, useCallback } from 'react';
import type { NextPage } from "next";
import Container from "../components/container";
import { motion, useAnimation } from 'framer-motion';

const AnimatedCard = ({ children }) => {
  const [isHovered, setIsHovered] = useState(false);
  const cardAnimation = useAnimation();

  const handleMouseMove = useCallback((e) => {
    if (!isHovered) return;

    const { left, top, width, height } = e.currentTarget.getBoundingClientRect();
    const centerX = left + width / 2;
    const centerY = top + height / 2;
    const moveX = (e.clientX - centerX) / (width / 2);
    const moveY = (e.clientY - centerY) / (height / 2);

    cardAnimation.start({
      x: moveX * 10,
      y: moveY * 10,
      transition: { duration: 0.2 }
    });
  }, [isHovered, cardAnimation]);

  return (
    <motion.div
      className="absolute top-[569px] left-[calc(50%_+_170px)] bg-orangered rounded-11xl w-[404px] h-[217px] flex items-center justify-center"
      animate={cardAnimation}
      whileHover={{ scale: 1.0 }}
      transition={{ type: "spring", stiffness: 150 }}
      onMouseMove={handleMouseMove}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => {
        setIsHovered(false);
        cardAnimation.start({ x: 0, y: 0 });
      }}
    >
      {children}
    </motion.div>
  );
};
  return (
      <div>
        <AnimatedCard>
          {/* Add any content you want inside the card here */}
        </AnimatedCard>
      </div>

 );
};

export default Desktop;