"use client"; import { useState } from "react"; import { motion } from "motion/react"; interface CardItem { id: string | number; title: string; bgColor: string; textColor: string; } // Soft bright pastels only (no photos / gradient globe imagery) const CARDS: CardItem[] = [ { id: "bloom", title: "شکوفه", bgColor: "#C9DFF5", textColor: "#3B5B8C" }, { id: "mist", title: "مه", bgColor: "#D4E8F2", textColor: "#3D6480" }, { id: "meadow", title: "چمنزار", bgColor: "#C8EBD8", textColor: "#2F6B4A" }, { id: "coral", title: "مرجان", bgColor: "#F7D4C8", textColor: "#A04A38" }, { id: "haze", title: "غبار", bgColor: "#F2D4E4", textColor: "#8A4A72" }, { id: "dawn", title: "سپیده", bgColor: "#F7E0C8", textColor: "#9A6430" }, { id: "lilac", title: "یاس", bgColor: "#DDD4F2", textColor: "#5C4890" }, { id: "studio", title: "استودیو", bgColor: "#D8E8F8", textColor: "#3A5A8A" }, ]; const CARD_WIDTH = 240; const CARD_HEIGHT = 360; const CARD_OFFSET = 56; const HOVER_SPREAD = 80; const TILT_ANGLE = 24; const POP_HEIGHT = 100; // Settling spring: low bounce so hover does not keep oscillating const HOVER_SPRING = { type: "spring" as const, stiffness: 420, damping: 34, mass: 0.85, bounce: 0, }; export default function PopTiltCards() { const [hoveredIndex, setHoveredIndex] = useState(null); const containerWidth = CARD_WIDTH + (CARDS.length - 1) * CARD_OFFSET + HOVER_SPREAD; const containerHeight = CARD_HEIGHT + POP_HEIGHT + 40; return (

setHoveredIndex(null)} >

{CARDS.map((card, index) => { let targetX = index * CARD_OFFSET; let targetY = 0; let targetRotate = 0; let targetScale = 1; let zIndex = index + 1; if (hoveredIndex !== null) { if (index < hoveredIndex) { targetRotate = TILT_ANGLE; targetX = index * CARD_OFFSET; } else if (index === hoveredIndex) { targetRotate = 0; targetY = -POP_HEIGHT; targetScale = 1.02; targetX = index * CARD_OFFSET; zIndex = 50; } else { targetRotate = -TILT_ANGLE; targetX = index * CARD_OFFSET + HOVER_SPREAD; } } const isHovered = hoveredIndex === index; return ( // Hit target stays put; visual layer moves. Prevents hover thrash when the card pops up.

setHoveredIndex(index)} onClick={() => setHoveredIndex(index)} >

{card.title}

); })}

); }