Background Patternv1.0.0
چهار لایهٔ تزئینیِ absolute-fill برای پشتِ یک بخشِ هیرو یا بنرِ تبلیغاتی: GridPattern (خطوطِ شطرنجی)، DotPattern (نقطه‌چین)، SpotlightPattern (دایرهٔ نورِ دنبال‌کنندهٔ ماوس) و NoisePattern (بافتِ زبرِ ظریف با فیلترِ SVG). حتی با utility CSSِ ساده هم نمی‌شد این‌ها را یک‌خطی ساخت — اینجا هرکدام یک کامپوننتِ آماده‌اند.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/background-pattern.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/background-pattern.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/background-pattern.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/background-pattern.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import {
GridPattern,
DotPattern,
SpotlightPattern,
NoisePattern,
} from "@/components/ui/background-pattern"این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
هر چهار کامپوننت absolute inset-0 و pointer-events-none هستند (به‌جز SpotlightPattern که برای گرفتنِ رویدادِ ماوس نیاز به pointer-events دارد)؛ والدشان باید position: relative و overflow-hidden داشته باشد، و خودِ محتوای واقعیِ بخش باید relative یا z-10 باشد تا رویِ پترن بنشیند.
SpotlightPattern موقعیتِ ماوس را با element.style.setProperty مستقیم روی خودِ عنصر می‌نویسد، نه با useState؛ یعنی حرکتِ ماوس باعثِ رندرِ دوبارهٔ درختِ ری‌اکت نمی‌شود و کاملاً روان می‌ماند.
NoisePattern از فیلترِ SVGِ feTurbulence استفاده می‌کند، نه یک فایلِ تصویرِ نویزِ از‌پیش‌ساخته؛ یعنی بدونِ درخواستِ شبکه و با هر اندازه‌ای کیفیتش یکسان می‌ماند.
دسترس‌پذیری
- همهٔ چهار پترن aria-hidden="true" دارند؛ کاملاً تزئینی‌اند و نباید چیزی از محتوای واقعی را جایگزین کنند.
- SpotlightPattern روی pointer-events فعال کار می‌کند اما هیچ عنصرِ قابل‌فوکوس/کلیک ندارد، پس در چرخهٔ تب صفحه‌کلید ظاهر نمی‌شود.
- کنتراستِ متنِ رویِ این پترن‌ها را جدا از خودِ پترن بسنجید؛ به‌خصوص SpotlightPattern و NoisePattern روی برخی رنگ‌های پس‌زمینه ممکن است کنتراست را کم کنند.
مرجع API
GridPattern / DotPattern
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| size | number | — | اندازهٔ تکرارِ الگو بر حسب پیکسل. |
| radius | number | — | (فقط DotPattern) قطرِ هر نقطه بر حسب پیکسل. |
| fade | boolean | true | محوشدنِ لبه‌ها با گرادیانِ ماسک. |
SpotlightPattern
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| spotlightSize | number | 500 | قطرِ دایرهٔ نور بر حسب پیکسل. |
| color | string | — | رنگِ خودِ نور؛ هر مقدارِ معتبرِ CSS. |
NoisePattern
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| opacity | number | 0.08 | میزانِ دیدپذیریِ بافت. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
GridPattern
خطوطِ شطرنجی با محوشدنِ شعاعیِ لبه‌ها؛ رایج‌ترین پترنِ پس‌زمینهٔ هیرو.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
DotPattern
نقطه‌چینِ ظریف؛ کمتر از گرید چشم را می‌گیرد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
SpotlightPattern
موس را رویِ کادرِ زیر ببرید؛ دایرهٔ نور دنبالش می‌کند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
NoisePattern
بافتِ زبرِ ظریف؛ معمولاً روی یک گرادیانِ رنگیِ تخت گذاشته می‌شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| GridPattern | خطوطِ شطرنجی با محوشدنِ شعاعیِ لبه‌ها؛ رایج‌ترین پترنِ پس‌زمینهٔ هیرو. |
| DotPattern | نقطه‌چینِ ظریف؛ کمتر از گرید چشم را می‌گیرد. |
| SpotlightPattern | هیرویی که می‌خواهد کمی تعاملی حس شود |
| NoisePattern | بافتِ زبرِ ظریف؛ معمولاً روی یک گرادیانِ رنگیِ تخت گذاشته می‌شود. |
دستورالعمل استفاده
تزئین، نه رقیبِ محتوا
عنوانِ هیرو
انجام بده
پترن کم‌رنگ و در پس‌زمینه بماند؛ opacity/fade را طوری تنظیم کنید که چشم اول متن را ببیند.
عنوانِ هیرو
انجام نده
پترنِ پررنگ و بدونِ fade با متنِ روی خودش رقابت می‌کند و خوانایی را کم می‌کند.