TiltCard

import React, { useEffect, useRef, useState } from 'react';

interface TiltCardProps {
  children: React.ReactNode;
}

const TiltCard: React.FC<TiltCardProps> = ({ children }) => {
  const cardRef = useRef<HTMLDivElement>(null);
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (cardRef.current) {
      const rect = cardRef.current.getBoundingClientRect();
      const xVal = (e.clientX - rect.left) / rect.width;
      const yVal = (e.clientY - rect.top) / rect.height;
      setX(xVal);
      setY(yVal);
    }
  };

  return (
    <div
      ref={cardRef}
      className="w-64 h-64 bg-off-white rounded-lg shadow-lg relative"
      onMouseMove={handleMouseMove}
      style={{
        transform: `perspective(1000px) rotateX(${-y * 10}deg) rotateY(${-x * 10}deg)`,
        boxShadow: `0px 0px 10px 5px rgba(0,0,0,0.2)`,
      }}
    >
      {children}
    </div>
  );};

export default TiltCard;

Component info

Dependencies

About

A 3D perspective tilt card component that follows the cursor position within the card, creating a depth shadow effect. Perfect for creating interactive and engaging user interfaces. Built with React and TypeScript, this component is easy to integrate into your existing projects. With a dark background and customizable content, the TiltCard component is ideal for showcasing products, services, or information in a unique and captivating way.