Tilt React Component Move Using Framer Motion - Tilt Children On Mouse

gistfile1.txt

// components/Tilt.js
import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";

const Tilt = ({ children }) => {
  const [mousePosition, setMousePosition] = useState({ x: window.innerWidth / 2, y: window.innerHeight / 2 });

  useEffect(() => {
    const handleMouseMove = (e) => {
      setMousePosition({
        x: e.clientX,
        y: e.clientY,
      });
    };

    window.addEventListener('mousemove', handleMouseMove);

    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);

  const calculateTilt = (x, y) => {
    const middleX = window.innerWidth / 2;
    const middleY = window.innerHeight / 2;
    const offsetX = (x - middleX) / middleX;
    const offsetY = (y - middleY) / middleY;
    const rotationX = offsetY * 20; // Adjust the multiplier to control the tilt angle
    const rotationY = offsetX * -20; // Adjust the multiplier to control the tilt angle
    return { rotateX: rotationX, rotateY: rotationY };
  };

  const tilt = calculateTilt(mousePosition.x, mousePosition.y);

  return (
    <motion.div
      style={{
        transform: `rotateX(${tilt.rotateX}deg) rotateY(${tilt.rotateY}deg) translateZ(75px)`,
        transformStyle: "preserve-3d",
      }}
      transition={{ type: "spring", stiffness: 300, damping: 20 }}
    >
      {children}
    </motion.div>
  );
};

export default Tilt;