"use client"; import { useEffect, useRef, type RefObject } from "react"; import { motion, useScroll, useTransform, type MotionValue, } from "motion/react"; import Lenis from "lenis"; import "lenis/dist/lenis.css"; import { cn } from "@/lib/utils"; export interface ProjectItem { id: string | number; tabTitle: string; title: string; description: string; image: string; link?: string; color: string; textColor?: string; } export const DEFAULT_PROJECTS: ProjectItem[] = [ { id: 1, tabTitle: "۰۱ · لوم", title: "لوم: فضای کاری آرام برای تیم‌های متمرکز", description: "مجموعهٔ همکاری بدون شلوغی، با چیدمان آرام، سطوح نرم و فضای خالی هدفمند تا تیم بدون نویز بصری فکر کند.", image: "/unsplash/1497366216548-37526070297c.webp", color: "#B9D6F2", }, { id: 2, tabTitle: "۰۲ · مریدین", title: "مریدین: نگاشت سیستم برند که مقیاس می‌گیرد", description: "کتابخانهٔ زندهٔ توکن و کیت کامپوننت که محصول، مارکتینگ و داکس را روی یک زبان بصری نگه می‌دارد.", image: "/unsplash/1526170375885-4d8ecf77b99f.webp", color: "#B4E2C9", }, { id: 3, tabTitle: "۰۳ · دریفت", title: "دریفت: روایت سرمقاله‌ای برای لیبل‌های مدرن", description: "تجربهٔ مجلهٔ اسکرولی برای هنرمندان مستقل. مصاحبهٔ بلند، تایپوگرافی نرم و عکسی مثل گوش‌دادن نیمه‌شب.", image: "/unsplash/1511379938547-c1f69419868d.webp", color: "#E9C5D7", }, { id: 4, tabTitle: "۰۴ · هاربر", title: "هاربر: رزروی که حس مهمان‌نوازی دارد", description: "جریان رزرو بازطراحی‌شده حول نشانه‌های اعتماد، رنگ نرم و سلسله‌مراتب روشن تا مهمان قبل از رسیدن احساس خوشامد کند.", image: "/unsplash/1531123897727-8f129e1688ce.webp", color: "#EDD2B3", }, { id: 5, tabTitle: "۰۵ · نورث‌لاین", title: "نورث‌لاین: آنالیتیکس بدون غرق‌شدن", description: "داشبورد متریک با نمودارهای روایی و تأکید ملایم؛ اپراتور بدون ویجت‌زدگی می‌بیند چه چیزی مهم است.", image: "/unsplash/1531746020798-e6953c6e8e04.webp", color: "#D2C6EC", }, ]; interface AnimatedCardProps { project: ProjectItem; index: number; totalCards: number; smoothProgress: MotionValue; } function buildCardKeyframes(index: number, totalCards: number) { const steps: number[] = []; const yValues: number[] = []; const scaleValues: number[] = []; const opacityValues: number[] = []; const numTransitions = Math.max(totalCards - 1, 1); for (let step = 0; step <= numTransitions; step++) { const progress = step / numTransitions; steps.push(progress); if (step < index) { // Park below the stage — keep travel short so a progress blip can't whip cards. yValues.push(640); scaleValues.push(1); opacityValues.push(1); } else if (step === index) { yValues.push(0); scaleValues.push(1); opacityValues.push(1); } else { const stackDepth = step - index; yValues.push(-stackDepth * 42); scaleValues.push(1 - stackDepth * 0.042); opacityValues.push(Math.max(0.55, 1 - stackDepth * 0.12)); } } if (index === 0) { return { steps, y: yValues, scale: scaleValues, opacity: opacityValues, }; } const entryStart = (index - 1) / numTransitions; const entryEnd = index / numTransitions; const fullSteps: number[] = []; const fullY: number[] = []; const fullScale: number[] = []; const fullOpacity: number[] = []; for (let i = 0; i < steps.length; i++) { if (steps[i]! < entryStart) { fullSteps.push(steps[i]!); fullY.push(640); fullScale.push(1); fullOpacity.push(1); } } fullSteps.push(entryStart); fullY.push(640); fullScale.push(1); fullOpacity.push(1); for (let i = 0; i < steps.length; i++) { if (steps[i]! >= entryEnd) { fullSteps.push(steps[i]!); fullY.push(yValues[i]!); fullScale.push(scaleValues[i]!); fullOpacity.push(opacityValues[i]!); } } return { steps: fullSteps, y: fullY, scale: fullScale, opacity: fullOpacity, }; } function AnimatedCard({ project, index, totalCards, smoothProgress, }: AnimatedCardProps) { const keyframes = buildCardKeyframes(index, totalCards); const y = useTransform(smoothProgress, keyframes.steps, keyframes.y); const scale = useTransform(smoothProgress, keyframes.steps, keyframes.scale); const opacity = useTransform( smoothProgress, keyframes.steps, keyframes.opacity, ); return (

{project.title}

{project.description}

{/* eslint-disable-next-line @next/next/no-img-element */} {project.title}

); } export interface ScrollStackDeckProps { projects?: ProjectItem[]; title?: string; subtitle?: string; scrollIndicatorText?: string; className?: string; showFooter?: boolean; enableLenis?: boolean; /** Nested overflow parent. Omit on a full-page landing (window + Lenis). */ container?: RefObject; } export function ScrollStackDeck({ projects = DEFAULT_PROJECTS, title = "کارهای برگزیده", subtitle = "پنج ساخت اخیر: رابط‌های نرم، سیستم‌های روشن، و داستان محصولی که با اسکرول آرام دوام می‌آورد.", scrollIndicatorText = "اسکرول کنید", className = "", showFooter = true, enableLenis = true, container, }: ScrollStackDeckProps) { const containerRef = useRef(null); const nested = Boolean(container); const showIntro = Boolean(title || subtitle || scrollIndicatorText); useEffect(() => { if (!enableLenis || container) return; const lenis = new Lenis({ duration: 1.2, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), orientation: "vertical", gestureOrientation: "vertical", smoothWheel: true, wheelMultiplier: 1, touchMultiplier: 2, }); let animationFrameId = 0; const raf = (time: number) => { lenis.raf(time); animationFrameId = requestAnimationFrame(raf); }; animationFrameId = requestAnimationFrame(raf); return () => { cancelAnimationFrame(animationFrameId); lenis.destroy(); }; }, [enableLenis, container]); // No useSpring — springing scroll progress makes the whole deck whip on mount // when the nested scroller/ref finishes measuring. const { scrollYProgress } = useScroll({ target: containerRef, offset: ["start start", "end end"], ...(container ? { container } : {}), }); return (

{/* Lead-in clears open chrome; keep modest so progress starts near 0. */}

{showIntro ? (

{title}

{subtitle}

{scrollIndicatorText}

) : null}

{projects.map((project, index) => ( ))}

{showFooter ? ( ) : null}

); } export default ScrollStackDeck;