Reveal Card

1"use client";
2import React, { useEffect, useRef, useState } from "react";
3import Image from "next/image";
4 
5interface CardProps {
6  coverImage: string;
7  titleImage: string;
8  characterImage: string;
9  width?: number;
10  height?: number;
11  hoverRotation?: number;
12  titleTranslateY?: number;
13  characterTranslateY?: number;
14  characterTranslateZ?: number;
15  alt?: {
16    cover?: string;
17    title?: string;
18    character?: string;
19  };
20  animation?: {
21    duration?: number;
22    delay?: number;
23  };
24  priority?: boolean;
25  threshold?: number;
26  className?: string;
27}
28 
29const RevealCard: React.FC<CardProps> = ({
30  coverImage,
31  titleImage,
32  characterImage,
33  width = 266,
34  height = 400,
35  hoverRotation = 25,
36  titleTranslateY = -50,
37  characterTranslateY = -15,
38  characterTranslateZ = 100,
39  alt = {
40    cover: "Cover Image",
41    title: "Title",
42    character: "Character",
43  },
44  animation = {
45    duration: 500,
46    delay: 0,
47  },
48  priority = false,
49  threshold = 0.3,
50  className = "",
51}) => {
52  const cardRef = useRef<HTMLDivElement>(null);
53  const [isVisible, setIsVisible] = useState(false);
54  const [isMobile, setIsMobile] = useState(false);
55  const [isRevealed, setIsRevealed] = useState(false);
56  const [hasBeenRevealed, setHasBeenRevealed] = useState(false);
57 
58  useEffect(() => {
59    const checkMobile = () => {
60      setIsMobile(window.innerWidth < 768);
61    };
62    checkMobile();
63    window.addEventListener("resize", checkMobile);
64 
65    const currentRef = cardRef.current;
66 
67    const observer = new IntersectionObserver(
68      ([entry]) => {
69        if (entry.isIntersecting) {
70          setIsVisible(true);
71          if (!hasBeenRevealed) {
72            setIsRevealed(true);
73            setHasBeenRevealed(true);
74          }
75        } else {
76          setIsVisible(false);
77        }
78      },
79      { threshold },
80    );
81 
82    if (currentRef) {
83      observer.observe(currentRef);
84    }
85 
86    return () => {
87      window.removeEventListener("resize", checkMobile);
88      if (currentRef) observer.unobserve(currentRef);
89    };
90  }, [threshold, hasBeenRevealed]);
91 
92  const handleCardClick = () => {
93    setIsRevealed(!isRevealed);
94    setHasBeenRevealed(true);
95  };
96 
97  const animationStyle = {
98    transitionDuration: `${animation.duration}ms`,
99    transitionDelay: `${animation.delay}ms`,
100  };
101 
102  const shouldReveal = isMobile
103    ? isRevealed
104    : isRevealed || (!hasBeenRevealed && isVisible);
105 
106  const mobileRevealClass =
107    isMobile && shouldReveal
108// … truncated