PixelBlast

pixel-blast

抖动点阵翻涌的 WebGL 背景 · FBM 噪声 + 8×8 Bayer 有序抖动量化成方块/圆/三角/菱形像素 + 四周渐隐（ogl·token·reduced-motion 降级静态点阵）

用法

基础用法

放进 relative overflow-hidden 容器，组件自带 absolute inset-0 z-0；默认方块点阵，主色读 --color-primary 明暗自适应。

PixelBlast

tsx

<div className="relative h-64 overflow-hidden rounded-xl bg-neutral-950">
  <PixelBlast />
  <div className="relative z-10 flex h-full items-center justify-center">
    <p className="text-2xl font-bold text-white/90">PixelBlast</p>
  </div>
</div>

形状变体

variant 支持 square / circle / triangle / diamond 四种像素单元形状，pixelSize 控制单格大小。

circle · 网点印刷感

triangle · 织纹

diamond · 参差颗粒

tsx

<>
  <PixelBlast variant="circle" pixelSize={6} />
  <PixelBlast variant="triangle" patternDensity={1.3} />
  <PixelBlast variant="diamond" pixelSize={5} />
</>

自定义色 + 强渐隐

color 接任意 CSS 颜色；edgeFade 调大让四角淡出更柔和，便于把点阵当作内容背景。

极光蓝紫 · 慢速壁纸

tsx

<PixelBlast
  variant="square"
  color="oklch(0.65 0.26 285)"
  speed={0.25}
  patternScale={1.5}
  edgeFade={0.7}
/>

无渐隐铺满

edgeFade={0} 取消四周渐隐，点阵硬边铺满整个容器。

edgeFade = 0 · 铺满

tsx

<PixelBlast variant="circle" color="oklch(0.74 0.18 55)" edgeFade={0} pixelSize={5} />

何时用

需要一层「复古点阵 / 网点印刷」质感的氛围背景时用它，自带四周渐隐便于叠内容。要静态规则点阵选 DotPattern，要 8-bit 复古网格透视选 RetroGrid，要扫光聚焦选 Spotlight；本组件是噪声驱动的动态点阵，有抖动颗粒感和翻涌运动。

导入

import { PixelBlast, pixelBlastShowcase } from "@hulianui/ui"

Props

名称	类型	默认	说明
variant	`"square" \| "circle" \| "triangle" \| "diamond"`	`"square"`	像素单元形状：方块（锐利复古）/ 圆点（网点印刷感）/ 三角（织纹）/ 菱形（菱形网点）
pixelSize	`number`	`4`	单个像素方块边长（CSS px）；越小越密越细腻。建议 2–12
color	`string`	`--color-primary`	像素主色，CSS 颜色串；默认取 primary token 明暗自适应
patternScale	`number`	`2`	噪声纹理缩放；越大斑块越细碎闪烁越密。建议 0.5–6
patternDensity	`number`	`1`	像素填充密度；越大亮起像素越多越「满」。建议 0.4–1.6
pixelSizeJitter	`number`	`0`	每个方块尺寸的随机抖动幅度 0–1；越大越参差颗粒感越强
speed	`number`	`0.5`	动画速度因子；0=静止画面（仍渲一帧静态点阵）
edgeFade	`number`	`0.5`	四周渐隐宽度 0–1（相对短边）；0=硬边铺满，越大四角越柔和
className	`string`	—	透传到根容器 div（或 reduced-motion 兜底 div）
style	`CSSProperties`	—	透传到根容器的内联样式

Slots

插槽	类型	说明
fallback	`ReactNode`	reduced-motion / 无 WebGL 时的静态替代内容；默认 primary token radial-gradient 点阵（CSS mask 模拟网点）

禁忌 / 坑

组件自带 absolute inset-0 z-0，父容器必须 `relative`，叠加内容用 `relative z-10`，否则盖住内容 [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]]。
WebGL 客户端组件（"use client"）；SSR 阶段只渲染 fallback。
color 传 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]]。

Playground

形状像素尺寸噪声缩放填充密度尺寸抖动速度边缘渐隐自定义色（留空=primary）

PixelBlast · WebGL 背景

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 285)" }}>
  <PixelBlast
    variant="square"
    pixelSize={4}
    patternScale={2}
    patternDensity={1}
    pixelSizeJitter={0}
    speed={0.5}
    edgeFade={0.5}
  />
  <div className="relative z-10">内容</div>
</div>

用法

基础用法

放进 relative overflow-hidden 容器，组件自带 absolute inset-0 z-0；默认方块点阵，主色读 --color-primary 明暗自适应。

PixelBlast

tsx

<div className="relative h-64 overflow-hidden rounded-xl bg-neutral-950">
  <PixelBlast />
  <div className="relative z-10 flex h-full items-center justify-center">
    <p className="text-2xl font-bold text-white/90">PixelBlast</p>
  </div>
</div>

形状变体

variant 支持 square / circle / triangle / diamond 四种像素单元形状，pixelSize 控制单格大小。

circle · 网点印刷感

triangle · 织纹

diamond · 参差颗粒

tsx

<>
  <PixelBlast variant="circle" pixelSize={6} />
  <PixelBlast variant="triangle" patternDensity={1.3} />
  <PixelBlast variant="diamond" pixelSize={5} />
</>

自定义色 + 强渐隐

color 接任意 CSS 颜色；edgeFade 调大让四角淡出更柔和，便于把点阵当作内容背景。

极光蓝紫 · 慢速壁纸

tsx

<PixelBlast
  variant="square"
  color="oklch(0.65 0.26 285)"
  speed={0.25}
  patternScale={1.5}
  edgeFade={0.7}
/>

无渐隐铺满

edgeFade={0} 取消四周渐隐，点阵硬边铺满整个容器。

edgeFade = 0 · 铺满

tsx

<PixelBlast variant="circle" color="oklch(0.74 0.18 55)" edgeFade={0} pixelSize={5} />

何时用

Props

名称	类型	默认	说明
variant	`"square" \| "circle" \| "triangle" \| "diamond"`	`"square"`	像素单元形状：方块（锐利复古）/ 圆点（网点印刷感）/ 三角（织纹）/ 菱形（菱形网点）
pixelSize	`number`	`4`	单个像素方块边长（CSS px）；越小越密越细腻。建议 2–12
color	`string`	`--color-primary`	像素主色，CSS 颜色串；默认取 primary token 明暗自适应
patternScale	`number`	`2`	噪声纹理缩放；越大斑块越细碎闪烁越密。建议 0.5–6
patternDensity	`number`	`1`	像素填充密度；越大亮起像素越多越「满」。建议 0.4–1.6
pixelSizeJitter	`number`	`0`	每个方块尺寸的随机抖动幅度 0–1；越大越参差颗粒感越强
speed	`number`	`0.5`	动画速度因子；0=静止画面（仍渲一帧静态点阵）
edgeFade	`number`	`0.5`	四周渐隐宽度 0–1（相对短边）；0=硬边铺满，越大四角越柔和
className	`string`	—	透传到根容器 div（或 reduced-motion 兜底 div）
style	`CSSProperties`	—	透传到根容器的内联样式

插槽

类型

说明

fallback

ReactNode

reduced-motion / 无 WebGL 时的静态替代内容；默认 primary token radial-gradient 点阵（CSS mask 模拟网点）

禁忌 / 坑

组件自带 absolute inset-0 z-0，父容器必须 `relative`，叠加内容用 `relative z-10`，否则盖住内容 [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]]。

WebGL 客户端组件（"use client"）；SSR 阶段只渲染 fallback。

color 传 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]]。

Playground

形状像素尺寸噪声缩放填充密度尺寸抖动速度边缘渐隐自定义色（留空=primary）

PixelBlast · WebGL 背景

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 285)" }}>
  <PixelBlast
    variant="square"
    pixelSize={4}
    patternScale={2}
    patternDensity={1}
    pixelSizeJitter={0}
    speed={0.5}
    edgeFade={0.5}
  />
  <div className="relative z-10">内容</div>
</div>

PixelBlast

用法

基础用法

形状变体

自定义色 + 强渐隐

无渐隐铺满

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground

PixelBlast

用法

基础用法

形状变体

自定义色 + 强渐隐

无渐隐铺满

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground