بقعة الضوء (Spotlight)

يضيف تأثير بقعة الضوء (Spotlight) ضوءًا خفيفًا يتبع مؤشر الفأرة داخل القسم.

التثبيت

bash

npx @smicolon/cli add spotlight

قبل إضافة أي مكوّن، شغّل الأمر init مرة واحدة في مشروعك. التفاصيل في صفحة التثبيت.

معاينة

تعرّف إلى تشكيلة الخريف

حرّك مؤشر الفأرة فوق هذه اللوحة.

بطاقة ببقعة ضوء

الجزء SpotlightCard بطاقة تضيء تحت مؤشر الفأرة أثناء التمرير فوقها.

توصيل مجاني

لكل الطلبات داخل الرياض هذا الأسبوع.

إتاحة الوصول (accessibility)

يتبع الضوء الفأرة أو لوحة اللمس فقط، فلا يراه من يستخدم لوحة المفاتيح أو شاشة اللمس. لا تضع فيه شيئًا يحتاجون إليه.
إذا فعّل المستخدم إعداد prefers-reduced-motion، لا يظهر الضوء أبدًا.

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`	لا يوجد	المحتوى فوق الضوء.
`color`	`string`	`"color-mix(in oklch, var(--primary) 15%, transparent)"`	لون الضوء.
`size`	`number`	`400`	قطر الضوء بالبكسل.
`blur`	`number`	`80`	نعومة الحافة بالبكسل.
`opacity`	`number`	`1`	الشدة، من 0 إلى 1.
`SpotlightCard`	`{ spotlightColor, spotlightSize }`	لا يوجد	بطاقة تضيء تحت مؤشر الفأرة.
`className`	`string`	لا يوجد	أصناف (class) إضافية للمكوّن.

الاستخدام

tsx

import { Spotlight, SpotlightCard } from "@/components/ui/spotlight"

<Spotlight className="h-64 rounded-lg border bg-card" size={300}>
  <h3>تعرّف إلى تشكيلة الخريف</h3>
</Spotlight>

<SpotlightCard>
  <p>توصيل مجاني</p>
</SpotlightCard>