نشانگر رو به مرزِ کارت نزدیک کن: از همون سمت، مخروطی از نورِ رنگی روی لبه می‌نشینه، مِشِ چندفام روی قاب می‌چرخه و هاله‌ای بیرونِ کارت می‌تابه.

وابستگی‌ها

نوع تعامل

نزدیکیِ نشانگر به مرزِ کارت و زاویه‌اش نسبت به مرکز، دو متغیرِ CSS زنده می‌سازن و خودِ درخشش کلاً توی CSS رخ می‌ده — بدونِ حلقه‌ی رندرِ مداوم. هاله فقط تا «حساسیتِ لبه» از مرز دورتر بیدار نمی‌شه؛ «ورودِ متحرک» یه جاروی یک‌باره‌ی چهارثانیه‌ای می‌ده. هندسه آینه نشده: زاویه و نزدیکی فیزیکِ نشانگرن و توی RTL همون معنا رو می‌دن.

پراپ‌ها

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

نصب

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

نمونه

"use client";

import BorderGlow from "@/components/farsify/border-glow";

export function GlowNotice() {
  return (
    <BorderGlow className="w-[330px]" glowColor="40 80 80" colors={["#c084fc", "#f472b6", "#38bdf8"]}>
      <div className="flex min-h-[200px] flex-col items-start px-7 py-8">
        <strong className="text-lg font-semibold">نشانگر را به لبه‌ها نزدیک کنید</strong>
        <p className="mt-2 text-sm opacity-60">
          درخشش از همان سمتِ لبه‌ای روشن می‌شود که نشانگر به آن نزدیک است.
        </p>
      </div>
    </BorderGlow>
  );
}

// اگر رنگ‌تان هگز است، درون‌خطی به «H S L» ترجمه کنید
<BorderGlow glowColor={hexToHsl("#f5daa3")} />

// کارتِ لمس‌نپذیر (پیش‌نمایشِ فهرست) با جاروی تکرارشونده زنده می‌ماند
<BorderGlow animated sweepLoop />

نکته‌ها

• کلِ جادو توی CSSـه: جاوااسکریپت فقط دو متغیر (`--edge-proximity` و `--cursor-angle`) رو سرِ حرکتِ نشانگر می‌نویسه؛ پس کارت گرون نیست و می‌شه ده‌ها تا ازش رو کنارِ هم گذاشت.
• هاله فقط موقعِ هاور یا جارو دیده می‌شه — توی سکونِ کامل لبه آروم خاموشه، عینِ مرجع. اگه کارتِ لمس‌نپذیری داری (پیش‌نمایشِ فهرست و بنتو)، `animated` + `sweepLoop` جای نورِ محیطی رو می‌گیره.
• مِشِ رنگی بین هفت نقطه‌ی ثابتِ قاب پخش می‌شه: سه رنگِ تو با نقشه‌ی [۰،۱،۲،۰،۱،۲،۱] تکرار می‌شن — پس با سه فامِ خوب، هفت لکه‌ی متفاوت می‌بینی.
• پیش‌فرضِ رنگ‌ها تم‌آگاهه: کارتِ تیره با درخششِ طلایی و کارتِ روشن با درخششِ بنفش (شدتِ بیشتر و پرشدگیِ کمتر) — همون جفتِ `useColorModeValue` مرجع.
• روی متنِ داخلِ کارت `letter-spacing` نذار و برای خطِ فارسی ارتفاعِ خطِ دستِ‌کم ۱٫۶ بده؛ قابِ نور مستقل از جهتِ متنه و هیچ آینه‌سازی نمی‌خواد.

مجوز

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