شعاع الإطار (BorderBeam)
يرسم تأثير شعاع الإطار (BorderBeam) شعاعًا من الضوء يدور حول إطار البطاقة أو الحاوية.
التثبيت
bash
npx @smicolon/cli add border-beamقبل إضافة أي مكوّن، شغّل الأمر init مرة واحدة في مشروعك. التفاصيل في صفحة التثبيت.
معاينة
تخفيضات الخريف تنتهي الليلة
خصم حتى 30% على الكتان والصوف.
إطار متوهج ثابت
إذا أردت إبراز البطاقة دون حركة، فاستخدم الجزء GlowingBorder بدل الشعاع. يرسم إطارًا ملوّنًا ثابتًا، حوله توهّج خفيف قريب منه.
تخفيضات الخريف تنتهي الليلة
خصم حتى 30% على الكتان والصوف.
إتاحة الوصول (accessibility)
- الشعاع زخرفي ولا يستجيب لمؤشر الفأرة، ويعمل المحتوى داخله كالمعتاد.
- إذا فعّل المستخدم إعداد
prefers-reduced-motion، يحلّ محل الشعاع إطار ثابت بنصف الشدة.
الخصائص (props)
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
children | ReactNode | لا يوجد | المحتوى داخل الإطار. |
duration | number | 4 | مدة الدورة الواحدة بالثواني. |
borderWidth | number | 2 | عرض الشعاع بالبكسل. |
colorFrom | string | "var(--primary)" | لون رأس الشعاع. |
colorTo | string | "transparent" | اللون الذي يتلاشى إليه الشعاع. |
delay | number | 0 | الثواني قبل بدء الحركة. |
GlowingBorder | { glowColor, borderRadius, intensity: "sm" | "md" | "lg" } | لا يوجد | إطار ملوّن ثابت حوله توهّج قريب. |
className | string | لا يوجد | أصناف (class) إضافية للمكوّن. |
الاستخدام
tsx
import { BorderBeam, GlowingBorder } from "@/components/ui/border-beam"
<BorderBeam className="rounded-xl" duration={3}>
<div className="p-6">تخفيضات الخريف تنتهي الليلة</div>
</BorderBeam>
<GlowingBorder glowColor="var(--chart-2)" intensity="lg">
<div className="p-6">تخفيضات الخريف تنتهي الليلة</div>
</GlowingBorder>