دسته‌ی کارت‌های سه‌بعدی که با کشیدن، کلیک یا پخشِ خودکار عوض می‌شه: کارتِ روبه‌رو با جهش می‌پره، بقیه با فنرِ پنج‌محوره جابه‌جا می‌شن و هاله‌ی تاری عمق می‌سازه.

وابستگی‌ها

نوع تعامل

کارتِ روبه‌رو رو بکش و رها کن: مسیرِ پرتاب، جهتِ ورودِ کارتِ بعدی و کج‌شدگی‌اش رو تعیین می‌کنه. کلیک روی کارت‌های عقب اون‌ها رو به رو می‌آره و فلش‌ها/کلیدهای جهت هم عوض می‌کنن. موقعِ هاور، دسته کمی باز می‌شه و کارت‌های عقب تارتر دیده می‌شن. هندسه آینه نشده: پشته به راست‌وبالا باز می‌شه و کشیدن فیزیکِ انگشته؛ کلیدها منطقی‌ان (راست/پایین = بعدی).

پراپ‌ها

گزینه‌هایی که می‌تونی به کامپوننت بدی؛ ستاره‌دارها اجباری‌اند.

نصب

{
  "registries": {
    "@farsify": "https://farsify.ir/r/{name}.json"
  }
}

نمونه

"use client";

import CardSwap, { Card } from "@/components/farsify/card-swap";

const decks = [
  { title: "جادهٔ مه", image: "/photos/mist.jpg" },
  { title: "فیوردِ آبی", image: "/photos/fjord.jpg" },
  { title: "کمپِ برفی", image: "/photos/camp.jpg" },
];

export function TravelDeck() {
  return <CardSwap items={decks} width={460} height={340} />;
}

// کارتِ سفارشی با <Card>
<CardSwap>
  <Card>
    <div className="grid h-full place-items-center text-2xl">هر چیزی</div>
  </Card>
  <Card>...</Card>
</CardSwap>

نکته‌ها

• ریشه توی هر جعبه‌ای خودش رو جا می‌ده: `fit()` نسبتِ عرض/ارتفاعِ ظرف رو می‌سنجه و کلِ دسته رو مقیاس می‌کنه — توی کارتِ فهرست و بنتو بدونِ هیچ تنظیمی میزبانه.
• مسیرِ کشیدن جهتِ ورودِ کارتِ بعدی رو می‌سازه: از پایین بکش تا کارتِ بعد از پایین بیاد — همون حسِ دسته‌ی کاغذِ واقعی.
• `hoverSpread` رو صفر بده و `dim` رو بالا ببر تا دسته‌ی ساکت و عمیق شه؛ برای ویترینِ محصولات `hoverSpread` بالا و `skewAmount` منفی حسِ قفسه می‌ده.
• پشته به راست‌وبالا باز می‌شه — عینِ مرجع و بدونِ آینه؛ عنوانِ روی کارت فارسی و RTL می‌نشینه. اگه روزی خواستی پشته به چپ باز شه، علامتِ `cardDistance` رو منفی کن نه این‌که کلِ موتور رو آینه کنی.
• با `children` و `<Card>` هر محتوایی می‌سازی؛ `onCardClick` حتی برای کارت‌های عقب صدا زده می‌شه.

مجوز

کد بعد از نصب مالِ خودته؛ هر تغییری خواستی بده و توی پروژه‌ی خودت نگهش دار. برای پروژه‌های شخصی و تجاری آزاده، حتی اگه کدت بسته باشه. فقط اسم و لینک فارسی‌فای رو یه جا توی پروژه نگه دار.