جرقه‌ی هاورGlare Hover

پوسته‌ای که یه نوارِ نورِ مورب از روی محتواش رد می‌کنه: با هاور جارو می‌زنه، با نشانگر حرکت می‌کنه، توی لوپ تکرار می‌شه یا با کلیک می‌آد — با سه نیم‌رخِ نور و لبه‌ی قابی که خودش هم می‌درخشه.

محمدجواد

ساخته شده توسط محمدجواد

سازنده فارسی‌فای، بچه دولوپر

وابستگی‌ها

بدون وابستگی

نوع تعامل

با `mode: hover` ورودِ نشانگر یه جارو توی جهتِ ورود می‌زنه و خروج برمی‌گردونه (با `playOnce` فقط یه‌بار). با `follow` نوار با فنر زیرِ نشانگر می‌مونه. با `loop` هر `interval` ثانیه خودش می‌زنه و با `click` با کلیک. فوکوسِ صفحه‌کلید هم جارو می‌زنه.

پراپ‌ها

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

children
ReactNodeپیش‌فرض: —

محتوای کارت — معمولاً یک تصویر تمام‌قاب؛ نور روی آن با blend می‌نشیند.

width
stringپیش‌فرض: 'auto'

پهنای پوسته؛ هر مقدارِ CSS (مثل `'300px'`).

height
stringپیش‌فرض: 'auto'

بلندی پوسته؛ هر مقدارِ CSS.

background
stringپیش‌فرض: 'transparent'

پس‌زمینه‌ی پوسته زیرِ محتوا.

borderRadius
stringپیش‌فرض: '10px'

گردیِ گوشه‌ی پوسته و نور و لبه‌ی درخشان.

borderColor
stringپیش‌فرض: 'transparent'

رنگِ حاشیه‌ی یک‌پیکسلیِ پوسته.

نصب

۱. این آدرس رو یک‌بار توی components.json بذار تا shadcn مخزن فارسی‌فای رو بشناسه.

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

۲. بعد با دستورِ زیر کامپوننت رو نصب کن.

npx shadcn@latest add @farsify/glare-hover

پیش‌نیاز: Tailwind CSS v4 و صفحهٔ راست‌به‌چپ dir="rtl".

نمونه

glare-hover.tsxtsx
"use client";

import GlareHover from "@/components/farsify/glare-hover";

export function GlareCard() {
  return (
    <GlareHover width="300px" height="390px" borderRadius="14px">
      <img src="/images/poster.jpg" alt="پوستر" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
    </GlareHover>
  );
}

// نوارِ نور زیرِ نشانگر با فنر برود — حسِ شیشه‌ی صیقلی
<GlareHover width="300px" height="390px" mode="follow" softness={0.9} />

// در لوپِ آرام خودش بدرخشد — برای بج و کارتِ کوچک
<GlareHover width="220px" height="80px" mode="loop" interval={4} glareSize={18} />

// جفتِ خطِ نورِ پرکنتراست با لبه‌ی تیز
<GlareHover width="300px" height="390px" variant="twin" glareOpacity={0.8} glareSize={55} borderRadius="6px" />

// نورِ رنگیِ خودتان با ترکیبِ نرم روی محتوای روشن
<GlareHover glareColor="#f5b400" blendMode="soft-light" glareOpacity={0.7} />

نکته‌ها

  • بدونِ هیچ وابستگی: نیم‌رخِ نور با ۳۳ توقفِ color-mix ساخته می‌شه و حلقه‌ی rAF فقط موقعِ حرکت بیداره.
  • برای کارت‌های محصول، `mode: follow` با `softness` بالا حسِ شیشه‌ی صیقلی می‌ده؛ برای بج‌ها و کارت‌های کوچیک `loop` با `interval` بلند آروم‌تره.
  • روی تصویرِ تیره `blendMode: screen` می‌درخشه؛ روی محتوای روشن `overlay` یا `soft-light` رو امتحان کن.
  • توی `prefers-reduced-motion` جاروها کلاً خاموشن؛ فوکوسِ صفحه‌کلید همچنان بازخورد می‌ده.

مجوز

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