پشته‌ی کارت

card-stackانیمیشن

کارت‌هایی روی هم که هر چند ثانیه کارت جلویی به ته صف میره، مناسب نظرات مشتری.

«مهاجرت یک بعدازظهر طول کشید و تقویم شمسی از روز اول درست بود.»

م

مریم احمدی

مدیر محصول

نصب

  1. با CLI

    اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.

    $ npx vibefarsi add card-stack
  2. نصب دستی

    محتوای تب «کد» را در components/animations/card-stack.tsx بگذارید.

    $ npm i lucide-react
    کپی کل فایلregistry json

استفاده

usage.tsx
1import { CardStack } from "@/components/animations/card-stack"23<CardStack className="h-44" items={reviews.map((r) => <Review key={r.id} {...r} />)} />

پراپ‌ها

پراپنوعپیش‌فرضتوضیح
itemsReactNode[]-کارت‌ها به ترتیب اولیه.
intervalnumber3200میلی‌ثانیه بین جابه‌جایی‌ها.
offset / scalenumber12 / 0.05جابه‌جایی و کوچک‌شدن هر لایه.