شبکه‌ی بنتو با درخششِ لبه‌ی دنبال‌کننده، نورافکنِ سطح، کجی و آهن‌رباییِ فنری، موجِ کلیک و ذره‌های ستاره‌ای — با شش ویژوالِ درونی از نمودار تا هابِ یکپارچه‌سازی.

وابستگی‌ها

نوع تعامل

نور نزدیکِ کارت، لبه‌اش رو با فامِ درخشش روشن می‌کنه و روی خودِ کارت نورافکن می‌افته؛ با کجی و آهن‌ربایی کارت زیرِ نشانگر زنده می‌شه و با کلیک یه موج از نقطه‌ی کلیک پخش می‌شه و انیمیشن‌های درونیِ همون کارت دوباره پخش می‌شن. با صفحه‌کلید هم Enter/Space همون کلیک رو می‌زنه. هندسه آینه نشده: نور و کجی فیزیکِ نشانگرن و محورِ زمانِ نمودار عمداً چپ‌به‌راست مونده (قراردادِ نمودار).

پراپ‌ها

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

نصب

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

نمونه

"use client";

import MagicBento from "@/components/farsify/magic-bento";

export function ProductBento() {
  return (
    <MagicBento
      glowColor="#38bdf8"
      enableTilt
      enableMagnetism
      enableStars
      items={[
        { title: "تحلیل", description: "رفتارِ کاربر را دنبال کنید", visual: "analytics" },
        { title: "امنیت", description: "حفاظتِ سازمانی", visual: "security" },
        {
          title: "همکاری",
          description: "با هم، بی‌درز",
          visual: "collaboration",
          colSpan: 2,
          rowSpan: 2,
          href: "/docs",
        },
      ]}
    />
  );
}

// محتوای کاملاً خودی با content
<MagicBento items={[{ title: "هر چیزی", content: <MyChart /> }]} />

نکته‌ها

• موتور فقط وقتی rAF می‌چرخد که چیزی در حرکت باشد — در سکون صفر کارِ CPU؛ و با `prefers-reduced-motion` همه‌چیز بی‌درنگ می‌نشیند.
• فامِ `glowColor` دو کار می‌کنه: لبه‌ی کارت‌ها و accentِ ویژوال‌های درونی (خطِ نمودار، میله‌ی اوج، ریلِ جریان) — یک رنگ، کلِ بنتو رو هم‌خانواده می‌کنه.
• ذره‌های ستاره‌ای (`enableStars`) عمداً فقط داخلِ شعاعِ نورافکن دیده می‌شن — با نورافکنِ خاموش مرده‌ان؛ جفتِ هم بده.
• شش ویژوالِ درونی با `visual` می‌آن و با `content` می‌تونی محتوای کاملاً خودت رو بذاری؛ `colSpan`/`rowSpan` چیدمانِ نامنظمِ بنتو رو می‌سازه.
• توی تمِ روشن فام‌های روشنِ پریست‌ها تیره‌تر می‌شن (نارنجی→#ea580c و…) — اگه رنگِ سفارشی می‌دی، برای هر دو تم بسنج.
• متنِ روی کارت‌ها موقعِ تعامل خودش محو می‌شه (`textAutoHide`) تا ویژوال‌ها نفس بکشن — برای کارت‌های فقط-متن خاموشش کن.

مجوز

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