Spotlight
spotlight径向辉光背景 · token 驱动 radial-gradient + 明暗自适应 + RSC
用法
基础用法
父容器 relative，Spotlight 作背景层，内容以 relative z-10 叠加其上。默认顶部品牌辉光。
内容叠加其上
tsx
<div className="relative ...">
<Spotlight />
<div className="relative z-10">…内容…</div>
</div>辉光位置
x/y 定位辉光中心，intensity 调亮度——左上角强辉光即 x="20%"、加大 intensity。
内容叠加其上
tsx
<div className="relative ...">
<Spotlight x="20%" intensity={18} />
<div className="relative z-10">…内容…</div>
</div>语义色辉光
color 接任意 CSS 颜色/变量，换成成功色即可作正向反馈的 hero/空状态背景。
内容叠加其上
tsx
<div className="relative ...">
<Spotlight color="var(--color-success)" y="50%" size="100%" intensity={16} />
<div className="relative z-10">…内容…</div>
</div>聚拢辉光
fade 越小辉光越聚拢——配合居中位置可作弹窗/卡片的局部强调光。
内容叠加其上
tsx
<div className="relative ...">
<Spotlight y="50%" size="80%" intensity={20} fade={40} />
<div className="relative z-10">…内容…</div>
</div>何时用
给 Hero/卡片加柔和径向辉光（聚焦视线、营造氛围）。要辉光晕染用本组件；要规整纹理用 DotPattern / GridPattern / StripedPattern。
导入
ts
import { Spotlight } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| color | string | var(--color-primary) | 辉光色；可传任意 CSS 颜色/变量（如 var(--color-success)） |
| intensity | number | 14 | 辉光强度：辉光中心与底色 color-mix 的百分比，越大越亮 |
| x | string | "50%" | 辉光中心 X 位置 |
| y | string | "0%" | 辉光中心 Y 位置（顶部） |
| size | string | "125%" | 辉光椭圆尺寸（径向渐变范围） |
| fade | number | 55 | 渐隐到底色的位置百分比，越小辉光越聚拢 |
继承 ComponentPropsWithoutRef<"div">。禁忌 / 坑
- 内部
absolute inset-0铺满父级，必须放在relative（且通常overflow-hidden）定位容器内；叠加内容须relative z-10才能盖在辉光之上。 - 自定义
color用 token 变量（var(--color-*)，须带--color-前缀）而非裸var(--primary)，否则 color-mix 不解析。
相关
DotPattern · GridPattern · StripedPattern · RetroGrid · Ripple · Meteors
Playground
内容叠加其上
<div className="relative">
<Spotlight intensity={14} fade={55} />
<div className="relative z-10">…内容…</div>
</div>