Aurora
aurora极光渐变背景 · 双层 repeating-linear-gradient 横移干涉 + 径向 mask 聚焦 + chart token(纯 CSS·RSC)
用法
基础用法
放进 relative + overflow-hidden 容器，Aurora 以 absolute inset-0 铺底，children 自动层叠在极光之上。
Aurora
tsx
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<Aurora className="absolute inset-0 opacity-80">
<div className="flex h-full items-center justify-center text-sm font-medium text-white/80">
Aurora
</div>
</Aurora>
</div>自定义色带
通过 colors 传任意 CSS 颜色（支持 chart token / oklch），切换成暖橙调。
tsx
<Aurora
colors={["var(--color-chart-3)", "var(--color-chart-1)", "oklch(0.72 0.22 30)"]}
blur={40}
speed={25}
className="absolute inset-0 opacity-75"
/>模糊与速度
blur 越大色带越柔，speed 越大动画越慢，组合出壁纸级的细腻流动。
瑚琏组件库
企业级 · 高质量 · 原生适配
tsx
<Aurora blur={60} speed={45} className="absolute inset-0 opacity-90">
<div className="flex h-full flex-col items-center justify-center gap-2">
<p className="text-lg font-semibold text-white">瑚琏组件库</p>
<p className="text-xs text-white/60">企业级 · 高质量 · 原生适配</p>
</div>
</Aurora>关闭径向 mask
showRadialMask={false} 时极光铺满整个容器，不再向四角渐隐。
tsx
<Aurora showRadialMask={false} className="absolute inset-0 opacity-70" />何时用
需要柔和流动的彩色渐变背景（Hero / 登录页 / 营销区块）时用。纯 CSS 实现、可作为 RSC 直接服务端渲染、无 canvas/WebGL 开销，是首选的低成本动态背景；若要逐颗粒子或鼠标交互，用 Particles；若要质感更强的丝绸/虹彩光泽，用 Silk / Iridescence（但它们依赖 WebGL）。
导入
ts
import { Aurora } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| colors | string[] | ["var(--color-chart-1)","var(--color-chart-2)","var(--color-chart-4)"] | 极光色带，任意 CSS 颜色字符串（hex/oklch/var）。默认吃 chart token 自动明暗适配 |
| blur | number | 30 | 极光层模糊半径（px），建议 10–80；过小边缘硬，过大效果消散 |
| speed | number | 20 | 完整一轮动画时长（秒），越大越慢越细腻 |
| showRadialMask | boolean | true | 径向渐隐 mask（聚焦中部四角淡出），关闭则铺满容器无渐隐 |
| className | string | — | 透传到极光层 div（可调透明度/混合模式） |
| style | CSSProperties | — | 透传到根容器的内联样式 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 覆盖在极光上方的内容（relative 层叠） |
禁忌 / 坑
- 父容器需
relative+overflow-hidden，否则横移的渐变层会溢出。 - 极光透明度建议靠
className上的opacity-*控制（showcase 全用opacity-60~90）；直接铺满不透明会盖死下层内容。
相关
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
Aurora
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<Aurora
blur={30}
speed={20}
showRadialMask={true}
className="absolute inset-0 opacity-80"
/>
</div>