سطحِ کارت زیرِ نشانگر روشن می‌شه؛ نورِ نرمِ دایره‌ای دنبالت می‌آد، لبه‌ی کارت جلوی نور می‌گیره و با فشردن، نور انبساط پیدا می‌کنه.

وابستگی‌ها

نوع تعامل

نور با نزدیک‌شدنِ نشانگر از بیرونِ کارت (تا «بردِ بیرونِ کارت» پیکسل) بیدار می‌شه و داخلِ کارت دنبالِ نشانگر می‌آد؛ با فشردن انبساط و روشن‌تر می‌شه. با صفحه‌کلید هم زنده‌ست: هر عنصرِ فوکوس‌پذیرِ داخلِ کارت با `:focus-visible` نور رو به سمتِ خودش می‌بره. با `prefers-reduced-motion` نور بی‌درنگ می‌نشینه و سوسوی محیطی خاموش می‌شه.

پراپ‌ها

گزینه‌هایی که می‌تونی به کامپوننت بدی؛ ستاره‌دارها اجباری‌اند.

نصب

{
  "registries": {
    "@farsify": "https://farsify.ir/r/{name}.json"
  }
}

نمونه

"use client";

import SpotlightCard from "@/components/farsify/spotlight-card";

export function SpeakerCard() {
  return (
    <SpotlightCard className="w-[330px] p-6" spotlightColor="#007bff" proximity={80}>
      <div className="flex items-start justify-between">
        <img src="/jadi-avatar.jpg" alt="جادی میرمیرانی" className="h-[60px] w-[60px] rounded-full object-cover" />
      </div>
      <div className="mt-4 text-[1.45rem] font-medium leading-[1.3]">جادی میرمیرانی</div>
      <div className="mt-1 text-[15px] opacity-60">برنامه‌نویس و مدرس</div>
      <div className="mt-3.5 flex gap-2">
        <span className="rounded-lg bg-white/8 px-[10px] py-[5px] text-xs font-medium leading-none">لینوکس</span>
        <span className="rounded-lg bg-white/8 px-[10px] py-[5px] text-xs font-medium leading-none">پایتون</span>
      </div>
      <button className="mt-6 h-12 w-full rounded-full bg-white/8 text-[15px] font-medium">در ارتباط باش</button>
    </SpotlightCard>
  );
}

// نورِ مشترک: ردیفی از کارت‌ها با همان proximity یک نور می‌گیرند
<SpotlightCard proximity={80}>کارتِ اول</SpotlightCard>
<SpotlightCard proximity={80}>کارتِ دوم</SpotlightCard>

نکته‌ها

• این پورت **راست‌به‌چپ نمی‌شه و لازم هم نداره**: جای نور مختصاتِ فیزیکیِ نشانگره و توی RTL همون معنا رو می‌ده؛ متنِ فارسیِ داخلِ کارت خودبه‌خود RTL می‌نشینه.
• جادوی `proximity` توی ردیف‌هاست: چند کارتِ کنارِ هم با همون پیش‌فرض‌ها یه نورِ مشترک می‌گیرن — نشانگرِ یه‌بار، همه‌ی همسایه‌ها رو بیدار می‌کنه؛ مثلِ ویترینی که با نزدیک‌شدن روشن می‌شه.
• `ambient` برای کارت‌هایی‌ه که لمس‌پذیر نیستن (موبایل و پیش‌نمایش‌های بی‌تعامل): نور خودش آروم سرگردان می‌شه تا کارت مرده به‌نظر نرسه.
• روی گرادیانت‌های بزرگ و نرم، مقدارِ کمی `grain` (۰٫۳ تا ۰٫۴) نواربندیِ رنگ رو می‌گیره؛ `softness` صفر هم قرصِ تیز می‌ده که با `grain` حالتِ سینمایی می‌شه.
• دسترس‌پذیریِ صفحه‌کلید توی خودشه: هر چیزی داخلِ کارت که `:focus-visible` بگیره نور به سمتش می‌ره — کاربرِ کیبورد هم مسیرِ نور رو می‌بینه.
• رنگِ نورِ پیش‌فرض تم‌آگاهه: روی کارتِ تیره سفید و روی کارتِ روشن جوهرِ تیره؛ اگه رنگِ سفارشی دادی و توی تمِ روشن کم‌جان شد، یادت باشه نور روی سطحِ سفید ضربِ ۰٫۲۸ می‌خوره و ملایم‌تر دیده می‌شه.

مجوز

کد بعد از نصب مالِ خودته؛ هر تغییری خواستی بده و توی پروژه‌ی خودت نگهش دار. برای پروژه‌های شخصی و تجاری آزاده، حتی اگه کدت بسته باشه. فقط اسم و لینک فارسی‌فای رو یه جا توی پروژه نگه دار.