PrismaticBurst
prismatic-burst棱镜光爆 WebGL 背景 · 从中心放射的体积步进光谱射线(可弯曲扭曲/N 瓣梳理/三维翻滚/hover 跟随) · 默认色带吃 --color-chart-1..5 token(明暗自适应) + 懒加载 ogl 复用 useGlCanvas(StrictMode 安全·reduced-motion 降级静态径向光爆)
用法
基础用法
默认连续光晕 + 主题 chart token 光谱；放在 relative 容器里自带 absolute inset-0 z-0。
PrismaticBurst
tsx
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.13 0.02 275)" }}>
<PrismaticBurst className="opacity-90" />
</div>射线瓣数
rayCount>0 按角度梳理出 N 条对称射线，6 = 六芒星式爆发。
tsx
<PrismaticBurst rayCount={6} intensity={2.4} className="opacity-95" />三维翻滚 + 扭曲
animationType=rotate3d 立体翻滚，distort 把射线像引力透镜般扭弯，noiseAmount 弱化条带。
tsx
<PrismaticBurst
animationType="rotate3d"
distort={18}
speed={1.4}
noiseAmount={0.4}
className="opacity-90"
/>自定义色带
colors 传 CSS 颜色数组（支持 var token）烘焙成渐变纹理；hover 模式跟随指针倾斜。
tsx
<PrismaticBurst
animationType="hover"
colors={[
"oklch(0.72 0.22 30)",
"var(--color-chart-3)",
"oklch(0.78 0.16 90)",
]}
intensity={2.2}
className="opacity-90"
/>何时用
需要一个「从中心爆发的光谱射线」作为强视觉焦点（产品发布页、活动 Hero）时用它，放射感和色谱跨度最大。要单体棱锥分光选 Prism，要满铺流动纹理选 Plasma / PlasmaWave；本组件是中心放射光爆，可调瓣数做六芒星/星爆，叠加底图常配 mixBlendMode。
导入
ts
import { PrismaticBurst } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| intensity | number | 2 | 整体亮度增益（直接乘最终颜色）；0=全黑 |
| speed | number | 1 | 体积步进动画速度因子；越大翻涌越快 |
| animationType | "rotate" | "rotate3d" | "hover" | "rotate" | rotate=单轴平面旋转（最克制）/ rotate3d=三维欧拉旋转 / hover=跟随指针倾斜 |
| colors | string[] | --color-chart-1..5 | 色带（烘焙成一维渐变纹理按 march 进度采样）；任意 CSS 颜色串，默认 chart token 明暗自适应 |
| distort | number | 0 | 光线弯曲扭曲量 0–50（shader 内夹紧）；越大射线越像被引力透镜扭弯 |
| noiseAmount | number | 0 | 颗粒抖动噪声量 0–1；弱化条带感 |
| rayCount | number | 0 | 放射光束瓣数；0=连续光晕，>0 按角度梳理 N 条对称射线（6=六芒星） |
| offset | { x?: number; y?: number } | { x: 0, y: 0 } | 爆发中心相对画面中心的偏移（CSS 像素），x 正向右、y 正向下 |
| mixBlendMode | string | "none" | 透传到 canvas 的 mix-blend-mode；常用 "lighten" / "screen" 叠底更通透 |
| className | string | — | 合并到 root 容器（或 reduced 降级 div） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| fallback | ReactNode | reduced-motion / 无 WebGL 时的静态替代内容；默认 chart token 径向光爆渐变 |
禁忌 / 坑
- 组件满铺画布，父容器须 `relative` + `overflow-hidden`，叠加内容用 `absolute inset-0` / `relative z-10`，否则盖住内容 [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]]。
- WebGL 客户端组件（
"use client"），ogl 懒加载、复用 useGlCanvas 对 React StrictMode 双挂载安全；SSR 阶段只渲染 fallback。 colors传var(--color-…)时经离屏 canvas 解析，须带 `--color-` 前缀，裸var(--primary)解析失败 [[oklch-css-var-color-must-parse-via-offscreen-canvas]]。- headless 截图常拍到静止/空白帧（rAF 动画被饿死），真机或 Playwright 实测才能看到爆发 [[recharts-headless-screenshot-blank-clippath-animation-starved]]。
相关
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.13 0.02 275)" }}>
<PrismaticBurst
intensity={2}
speed={1}
animationType="rotate"
rayCount={0}
distort={0}
className="opacity-90"
/>
</div>