NapCatQQ/napcat.webui/src/components/effect_card.tsx

import { Card, CardProps } from '@heroui/card';
import clsx from 'clsx';
import React from 'react';

export interface HoverEffectCardProps extends CardProps {
  children: React.ReactNode
  maxXRotation?: number
  maxYRotation?: number
  lightClassName?: string
  lightStyle?: React.CSSProperties
}

const HoverEffectCard: React.FC<HoverEffectCardProps> = (props) => {
  const {
    children,
    maxXRotation = 5,
    maxYRotation = 5,
    className,
    style,
    lightClassName,
    lightStyle,
  } = props;
  const cardRef = React.useRef<HTMLDivElement | null>(null);
  const lightRef = React.useRef<HTMLDivElement | null>(null);
  const [isShowLight, setIsShowLight] = React.useState(false);
  const [pos, setPos] = React.useState({
    left: 0,
    top: 0,
  });

  return (
    <Card
      {...props}
      ref={cardRef}
      className={clsx(
        'relative overflow-hidden bg-opacity-50 backdrop-blur-lg',
        className
      )}
      style={{
        willChange: 'transform',
        transform:
          'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)',
        ...style,
      }}
      onMouseEnter={() => {
        if (cardRef.current) {
          cardRef.current.style.transition = 'transform 0.3s ease-out';
        }
      }}
      onMouseLeave={() => {
        setIsShowLight(false);
        if (cardRef.current) {
          cardRef.current.style.transition = 'transform 0.5s';
          cardRef.current.style.transform =
            'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)';
        }
      }}
      onMouseMove={(e: React.MouseEvent<HTMLDivElement>) => {
        if (cardRef.current) {
          setIsShowLight(true);

          const { x, y } = cardRef.current.getBoundingClientRect();
          const { clientX, clientY } = e;

          const offsetX = clientX - x;
          const offsetY = clientY - y;

          const lightWidth = lightStyle?.width?.toString() || '100';
          const lightHeight = lightStyle?.height?.toString() || '100';
          const lightWidthNum = parseInt(lightWidth);
          const lightHeightNum = parseInt(lightHeight);

          const left = offsetX - lightWidthNum / 2;
          const top = offsetY - lightHeightNum / 2;

          setPos({
            left,
            top,
          });

          cardRef.current.style.transition = 'transform 0.1s';

          const rangeX = 400 / 2;
          const rangeY = 400 / 2;

          const rotateX = ((offsetY - rangeY) / rangeY) * maxXRotation;
          const rotateY = -1 * ((offsetX - rangeX) / rangeX) * maxYRotation;

          cardRef.current.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
        }
      }}
    >
      <div
        ref={lightRef}
        className={clsx(
          isShowLight ? 'opacity-100' : 'opacity-0',
          'absolute rounded-full blur-[150px] filter transition-opacity duration-300 dark:bg-[#2850ff] bg-[#ff4132] w-[100px] h-[100px]',
          lightClassName
        )}
        style={{
          ...pos,
        }}
      />
      {children}
    </Card>
  );
};

export default HoverEffectCard;