مواره
moireپسزمینهدو دسته حلقهی ریز که مرکزشون میلغزه و تداخلشون نوارهای بزرگ و آرام میسازه.
متن روی پسزمینه
در همهی تمها باید خوانا بمونه.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add moireنصب دستی
محتوای تب «کد» را در
components/backgrounds/moire.tsxبگذارید. پیشنیاز: shader.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { MoireBackground } from "@/components/backgrounds/moire"23<section className="relative overflow-hidden">4 <MoireBackground />5 <div className="relative">…</div>6</section>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| gap | number | 7 | فاصلهی حلقهها به px. |
| speed | number | 1 | ضریب سرعت زمان. |
| opacity | number | 0.3 | بیشترین شفافیت لایه. کم نگهش دارید تا متن خوانا بمونه. |