MagicBento
magic-bento魔法便当卡片网格 · 光标跟随径向聚光 + 描边光呼吸 + 可选 3D 倾斜(零依赖·token·reduced-motion)
用法
基础用法
传入卡片数据，光标移入卡片时浮现径向聚光 + 描边光；colSpan 控制跨列拼出大小不一的 bento 布局。
数据洞察
追踪用户行为与漏斗
总览面板
集中式数据视图
团队协作
无缝实时协同
自动化
精简重复工作流
安全防护
企业级权限与审计
<MagicBento
items={[
{ label: "Insights", title: "数据洞察", description: "追踪用户行为与漏斗", colSpan: 2 },
{ label: "Overview", title: "总览面板", description: "集中式数据视图" },
{ label: "Teamwork", title: "团队协作", description: "无缝实时协同" },
]}
/>3D 倾斜
enableTilt 让卡片随光标位置轻微 tilt，增强立体反馈。
数据洞察
追踪用户行为与漏斗
总览面板
集中式数据视图
团队协作
无缝实时协同
自动化
精简重复工作流
安全防护
企业级权限与审计
<MagicBento items={items} enableTilt />自定义发光色
glowColor 喂给光晕 / 描边光，须用带 --color- 前缀的 token；spotlightRadius 调聚光范围。
数据洞察
追踪用户行为与漏斗
总览面板
集中式数据视图
团队协作
无缝实时协同
自动化
精简重复工作流
安全防护
企业级权限与审计
<MagicBento
items={items}
glowColor="var(--color-chart-2)"
spotlightRadius={420}
/>关闭交互
disableAnimations 渲染静态网格（等价 reduced-motion），无任何光标反馈。
数据洞察
追踪用户行为与漏斗
总览面板
集中式数据视图
团队协作
无缝实时协同
自动化
精简重复工作流
安全防护
企业级权限与审计
<MagicBento items={items} disableAnimations />何时用
落地页/控制台首屏要一组大小不一、带光标聚光高光的特性卡网格（bento 布局）时用。要的是"成组网格 + 聚光/描边光"用本组件；只对单张卡做指针 3D 倾斜用 TiltedCard，要悬停像素波纹用 PixelCard。
导入
import { MagicBento } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| items | MagicBentoItem[] | 内置示例 | 卡片数据数组，不传时渲染一组内置示例卡 |
| columns | number | 4 | 网格列数（grid-template-columns 份数），各卡再用 colSpan/rowSpan 跨格 |
| glowColor | string | var(--color-primary) | 发光主色，喂给径向光晕/描边光；须用带 --color- 前缀的 token（裸 var(--primary) 不解析） |
| spotlightRadius | number | 280 | 聚光半径（px），越大光斑越大越柔 |
| enableSpotlight | boolean | true | 是否开启跟随光标的径向聚光 |
| enableBorderGlow | boolean | true | 是否开启描边光（边框随光标接近点亮） |
| enableTilt | boolean | false | 是否开启 3D 倾斜（卡片随光标轻微 tilt） |
| disableAnimations | boolean | false | 强制关闭所有动画/交互（等价 reduced-motion）；组件也自动尊重系统 prefers-reduced-motion |
| className | string | — | 透传到根网格容器的额外 className |
| style | CSSProperties | — | 透传到根网格容器的内联样式 |
MagicBentoItem：{ label?, title?, description?: ReactNode; children?: ReactNode; colSpan?: number; rowSpan?: number } —— 传 children 即覆盖 label/title/description 默认布局，自定义卡内结构。
禁忌 / 坑
- [[hulian-token-color-var-needs-color-prefix]]：
glowColor必须用var(--color-primary)/var(--color-chart-2)这类带--color-前缀的真名，裸var(--primary)在 Tailwind v4 下不解析、光晕变黑或不显。 colSpan/rowSpan受columns约束，单卡 colSpan 大于 columns 会溢出错位。- 纯交互动效，无 WebGL；reduced-motion 或
disableAnimations下退化为静态网格。
相关
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
数据洞察
追踪用户行为与漏斗
总览面板
集中式数据视图
团队协作
无缝实时协同
自动化
精简重复工作流
安全防护
企业级权限与审计
<MagicBento
columns={4}
spotlightRadius={280}
enableSpotlight={true}
enableBorderGlow={true}
enableTilt={false}
disableAnimations={false}
items={[
{ label: "Insights", title: "数据洞察", description: "追踪用户行为", colSpan: 2 },
{ label: "Overview", title: "总览面板", description: "集中式数据视图" },
// …
]}
/>