کاروسلِ عمقDepth Carousel

ریلِ سه‌بعدیِ کارت‌های تصویر: کارتِ جلو وسطـه و کارت‌های بعدی به عمق می‌رن، کج می‌شن و تار و تیره‌تر می‌شن. با کشیدن، چرخِ ماوس، فلش‌ها یا گردشِ خودکار می‌چرخه و پرتابِ کشیدن با شتاب، می‌بردت به کارتِ بعدی.

محمدجواد

ساخته شده توسط محمدجواد

سازنده فارسی‌فای، بچه دولوپر

وابستگی‌ها

بدون وابستگی

نوع تعامل

صحنه رو بکش و رها کن — پرتاب با سرعتِ لحظه‌ی رها، روی نزدیک‌ترین کارت می‌نشینه. چرخِ ماوس حرکتِ پیوسته می‌ده و فلش‌های چپ/راست (یا کلیدهای همون جهت وقتی فوکوس روی صحنه‌ست) کارت‌به‌کارت می‌رن. فلش‌های کنارِ صفحه و نقطه‌های پایین هم راهِ مستقیمن؛ با `autoplay` صحنه هر `autoplayDelay` میلی‌ثانیه یه گام خودش می‌ره و با هاور موقتاً می‌ایسته.

پراپ‌ها

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

items
Array<string | { image: string; alt?: string }>پیش‌فرض: ۶ عکسِ نمونه

تصویرهای کاروسل؛ رشته‌ی ساده هم قبول است. `alt` متنِ جایگزینِ تصویر است.

cardWidth
numberپیش‌فرض: 300

پهنای هر کارت بر حسبِ پیکسل؛ صحنه‌ی باریک خودش کوچک‌نمایی می‌کنه تا جا شود.

cardHeight
numberپیش‌فرض: 380

بلندی هر کارت بر حسبِ پیکسل.

radius
numberپیش‌فرض: 18

شعاعِ گردیِ گوشه‌ی کارت‌ها.

tint
stringپیش‌فرض: '#05060a'

رنگِ پرده‌ای که با mix-blend-mode: multiply روی کارت‌های عقب می‌نشیند و هرچه عقب‌تر پررنگ‌تر است؛ روی کارتِ جلو صفر است.

depth
numberپیش‌فرض: 220

عمقِ هر گام روی محورِ Z؛ عددِ بیشتر یعنی کارت‌های عقب تُنُک‌تر و دورتر.

نصب

۱. این آدرس رو یک‌بار توی components.json بذار تا shadcn مخزن فارسی‌فای رو بشناسه.

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

۲. بعد با دستورِ زیر کامپوننت رو نصب کن.

npx shadcn@latest add @farsify/depth-carousel

پیش‌نیاز: Tailwind CSS v4 و صفحهٔ راست‌به‌چپ dir="rtl".

نمونه

depth-carousel.tsxtsx
"use client";

import DepthCarousel from "@/components/farsify/depth-carousel";

const shots = [
  { image: "/images/peak.jpg", alt: "قله" },
  { image: "/images/forest.jpg", alt: "جنگل" },
  { image: "/images/lake.jpg", alt: "دریاچه" },
  { image: "/images/desert.jpg", alt: "کویر" },
];

export function DepthRail() {
  return (
    <div style={{ height: 480 }}>
      <DepthCarousel items={shots} />
    </div>
  );
}

// ریلِ عمیقِ تند: عمقِ زیاد، دیدِ نزدیک و تاریِ سنگین
<DepthCarousel items={shots} depth={300} perspective={1100} blur={10} />

// ریلِ تخت و آرام: بدونِ خم، گردگوشه و گذارِ کشیده
<DepthCarousel
  items={shots}
  tilt={0}
  radius={28}
  duration={1200}
  falloff={0.35}
/>

// گردشِ خودکار هر ۴ ثانیه — با هاور موقتاً می‌ایستد
<DepthCarousel items={shots} autoplay autoplayDelay={4000} />

// بدونِ فلش و نقطه؛ فقط کشیدن و چرخِ ماوس
<DepthCarousel items={shots} showControls={false} showIndicators={false} />

نکته‌ها

  • بدونِ هیچ وابستگی: مرجع gsap داشت؛ این‌جا همان تویینِ عددی با یک حلقه‌ی rAF و منحنی‌های معادل بازسازی شده و حجمِ صفر اضافه می‌آورد.
  • کارتِ عقب رو روشن‌تر می‌خوای؟ `tint` رو روشن کن یا `falloff` رو بیار پایین؛ پرده با multiply می‌نشینه، پس رنگِ روشن تقریباً بی‌اثره.
  • برای «ویترینِ عمق»ِ تند: `perspective` رو کم و `depth` رو زیاد کن؛ برای ریلِ آرومِ خوانا همین پیش‌فرض‌ها کافی‌ان.
  • توی `prefers-reduced-motion` گذارها بی‌درنگ می‌شن و خودکار خاموشه؛ کشیدنِ دستی سرِ جاشه.

مجوز

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