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

وابستگی‌ها

نوع تعامل

رانشِ ستون‌ها خودگردان و دائمیـه؛ با `pauseOnHover` با ورودِ نشانگر می‌ایسته و ستونِ کاشیِ زیرِ نشانگر همیشه می‌ایسته. حرکتِ نشانگر صفحه رو با پارالاکس کج می‌کنه و کاشیِ زیرِ نشانگر با `lift` جلو می‌آد، از پرده بیرون می‌آد و رنگی می‌شه. کاشی‌ها با Tab هم قابلِ فوکوسن.

پراپ‌ها

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

نصب

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

نمونه

"use client";

import DriftWall from "@/components/farsify/drift-wall";

const tiles = [
  { image: "/images/tile-1.jpg", title: "قله" },
  { image: "/images/tile-2.jpg", title: "جنگل" },
  { image: "/images/tile-3.jpg", title: "آبشار" },
];

export function DriftingWall() {
  return (
    <div style={{ height: 520 }}>
      <DriftWall items={tiles} />
    </div>
  );
}

// دیوارِ پس‌زمینه: با هاور بایستد و لبه‌ها بیشتر محو شوند
<DriftWall items={tiles} pauseOnHover fade={0.4} columns={6} />

// دیوارِ ایستای سه‌بعدی که فقط با نشانگر نفس می‌کشد
<DriftWall items={tiles} speed={0} parallax={0.9} depth={180} />

// رانشِ تندِ پرانرژی به سمتِ پایین
<DriftWall items={tiles} speed={95} direction="down" variance={0.3} />

// کاشی‌های سیاه‌وسفید که زیرِ نشانگر رنگ می‌گیرند
<DriftWall items={tiles} grayscale dim={0.7} lift={96} />

نکته‌ها

• بدونِ هیچ وابستگی: حلقه‌ی rAFِ خودکافه با میراییِ نمایی برای پارالاکس و ایستِ نرمِ ستون‌ها.
• برای پس‌زمینه‌ی بخش‌ها خوبه: `pauseOnHover` رو روشن کن تا متنِ روی دیوار خوانا بمونه و `fade` رو کم کن تا لبه‌ها بیشتر محو شن.
• با `speed: 0` و `parallax` روشن، دیوارِ ایستای سه‌بعدی می‌سازی که فقط با نشانگر نفس می‌کشه.
• توی `prefers-reduced-motion` رانش کامل می‌ایسته (کاشی‌ها روی آفستشون می‌مونن) و پارالاکس خاموشه؛ هاور و فوکوس سرِ جاشونن.

مجوز

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