دکمه‌ی براقSpecular Button

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

محمدجواد

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

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

وابستگی‌ها

بدون وابستگی

نوع تعامل

نور روی محیطِ دکمه حرکت می‌کنه، نه داخلِ اون: با نزدیک‌شدنِ نشانگر به نزدیک‌ترین نقطه‌ی لبه می‌چسبه و با فاصله کم‌رنگ می‌شه؛ داخلِ دکمه کمی به سمتِ نشانگر می‌لغزه و با کلیک یه درخششِ کوتاه می‌زنه. با `autoAnimate` وقتی نشانگر دوره خودش دورِ لبه می‌گرده. نور توی WebGL2 کشیده می‌شه؛ اگه مرورگر پشتیبانی نکنه، بدنه و متنِ شیشه‌ای با CSS سرِ جاشون می‌مونن.

پراپ‌ها

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

children
ReactNodeپیش‌فرض: "Get Started"

برچسب یا محتوای دکمه.

href
string

اگه بدی دکمه یه پیوند (`<a>`) می‌شه؛ بدونش `<button>`.

size
"sm" | "md" | "lg"پیش‌فرض: "md"sm · md · lg

اندازه؛ پدینگ و قلم با هم عوض می‌شن.

radius
numberپیش‌فرض: 12

شعاعِ گوشه، پیکسل. بالاتر از نصفِ ارتفاع یعنی قرص.

tint
stringپیش‌فرض: var(--brand)

رنگِ بدنه‌ی شیشه؛ هر قالبِ رنگِ CSS.

tintOpacity
numberپیش‌فرض: 1

چگالیِ رنگِ بدنه، ۰ تا ۱. صفر برای گذاشتنِ گرادیانتِ پشتِ دکمه.

نصب

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

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

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

npx shadcn@latest add @farsify/specular-button

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

نمونه

specular-button.tsxtsx
"use client";

import { SpecularButton } from "@/components/farsify/specular-button";

export function HeroActions() {
  return (
    <SpecularButton href="/start" size="lg" radius={18}>
      شروع کنید
    </SpecularButton>
  );
}

// روی گرادیانت: بدنه‌ی شیشه خاموش تا رنگِ پشت دیده شود
<SpecularButton
  href="/components"
  tint="var(--brand)"
  tintOpacity={0}
  className="bg-gradient-to-b from-blue-500 to-blue-600"
  textColor="#ffffff"
  lineColor="#ffffff"
  radius={12}
>
  دیدن کامپوننت‌ها
</SpecularButton>

// نورِ خودگردان روی سطحِ تیره
<SpecularButton autoAnimate speed={0.5} idleIntensity={0.6}>
  ادامه
</SpecularButton>

نکته‌ها

  • بهترین نمایش روی سطحِ تیره‌ست؛ برای تمِ روشن شیشه و متن رو تیره بده (پیش‌فرضِ دمو همین کار رو می‌کنه).
  • `href` یه `<a>`ِ خالص می‌ده تا کد توی هر پروژه‌ای کار کنه؛ اگه ناوبریِ نرمِ Next می‌خوای، توی `onClick` با `router.push` مقصد رو باز کن.
  • رنگِ جسم رو از `tint` بگیر، نه `background`. اگه `bg-brand-grad` می‌دی `tintOpacity={0}` بذار تا رنگِ تخت روی گرادیانت ننشینه.
  • برای دکمه‌های ریز `thickness` و `glow` رو کم کن — نورِ پهن روی ارتفاعِ کوتاه مثلِ خطا دیده می‌شه.
  • حلقه فقط تا وقتی می‌چرخه که چیزی در حالِ تغییر باشه؛ توی سکون و تبِ پنهان صفر کار می‌کنه.

مجوز

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