PixelSnow

pixel-snow

像素化体素雪场 WebGL 背景 · 光线步进逐格哈希生雪 + 景深淡出 · 方块/圆点/六臂雪花三变体（ogl 去 three.js·token 着色·reduced-motion 静态点阵降级）

用法

基础用法

放进 relative overflow-hidden 容器即可；默认方块像素雪，颜色按身后底色亮度自适应（深底亮雪 / 浅底暗雪）。

PixelSnow

tsx

<div className="relative h-56 overflow-hidden rounded-xl bg-neutral-950">
  <PixelSnow />
  <div className="relative z-10 flex h-full items-center justify-center text-white/80">
    PixelSnow
  </div>
</div>

形状变体

variant 支持 square（方块）/ round（圆点）/ snowflake（六臂雪花）三种雪花形状。

tsx

<>
  <PixelSnow variant="snowflake" density={0.45} speed={1.6} />
  <PixelSnow variant="round" pixelResolution={90} density={0.4} />
</>

复古大马赛克

调小 pixelResolution（横向被切成的「大像素」数）让马赛克块更大，复古感更强。

tsx

<PixelSnow variant="round" pixelResolution={90} density={0.4} />

自定义冷蓝 · 慢速壁纸

color 接任意 CSS 颜色锁定雪花色调；慢速 + 适中密度作为标题区雪景背景。

瑚琏组件库

像素雪 · 明暗自适应

tsx

<div className="relative h-56 overflow-hidden rounded-xl bg-neutral-950">
  <PixelSnow color="oklch(0.85 0.08 230)" speed={0.7} density={0.3} />
  <div className="relative z-10 flex h-full flex-col items-center justify-center gap-1">
    <p className="text-lg font-semibold text-white">瑚琏组件库</p>
    <p className="text-xs text-white/60">像素雪 · 明暗自适应</p>
  </div>
</div>

何时用

需要一层「飘雪」氛围背景（节日页、冬季活动、登录页）时用它，自带景深纵深感与明暗自适应取色。要规则点阵选 DotPattern，要通用复古点阵翻涌选 PixelBlast；本组件专做体素雪场，有飘落方向、密度和层次纵深。

导入

import { PixelSnow } from "@hulianui/ui"

Props

名称	类型	默认	说明
variant	`"square" \| "round" \| "snowflake"`	`"square"`	雪花形状：方块像素 / 圆点 / 六臂雪花
color	`string`	自适应（`--color-foreground`，撞色时取反）	雪花主色；默认按身后底色亮度自适应取色，保证深底亮雪、浅底暗雪
flakeSize	`number`	`0.01`	雪花基准尺寸（屏幕空间比例）；越大越粗
minFlakeSize	`number`	`1.25`	远处雪花最小投影尺寸，防止亚像素消失
pixelResolution	`number`	`200`	像素化分辨率（横向切多少「大像素」）；越小马赛克越大越复古
speed	`number`	`1.25`	飘落速度因子；越大穿越视野越快
depthFade	`number`	`8`	景深淡出强度；越大远雪衰减越快纵深越强
farPlane	`number`	`20`	光线步进最远裁剪距离；越大可见层数越多（性能成本越高）
brightness	`number`	`1`	整体亮度倍率
gamma	`number`	`0.4545`	伽马校正指数（≈1/2.2 sRGB 近似）
density	`number`	`0.3`	雪花密度（每格出雪概率阈值）；越大越密。建议 0.05–0.6
direction	`number`	`125`	风向角度（度），决定横向漂移方向
className	`string`	—	透传到根容器（或 reduced-motion fallback div）

Slots

插槽	类型	说明
fallback	`ReactNode`	reduced-motion / 无 WebGL 时的静态替代内容；默认白点 + difference 混合静态点阵雪

禁忌 / 坑

组件满铺画布，父容器须 `relative`，叠加内容用 `relative z-10`，否则盖住内容 [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]]。
color 缺省会按身后实际底色自适应取色，但若把组件放进与全局主题相反的容器（如亮色主题下塞深色盒子），自适应是按 token 推断的——撞色时显式传 color 更稳。
WebGL 客户端组件（"use client"）；SSR 阶段只渲染 fallback。
headless 截图常拍到静止/空白帧（rAF 动画被饿死），真机或 Playwright 实测才能看到飘落 [[recharts-headless-screenshot-blank-clippath-animation-starved]]。

Playground

雪花形状密度 0–0.6飘落速度像素分辨率风向角度°

PixelSnow

<div className="relative h-56 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.13 0.02 255)" }}>
  <PixelSnow
    variant="square"
    density={0.3}
    speed={1.25}
    pixelResolution={200}
    direction={125}
  />
</div>

用法

基础用法

放进 relative overflow-hidden 容器即可；默认方块像素雪，颜色按身后底色亮度自适应（深底亮雪 / 浅底暗雪）。

PixelSnow

tsx

<div className="relative h-56 overflow-hidden rounded-xl bg-neutral-950">
  <PixelSnow />
  <div className="relative z-10 flex h-full items-center justify-center text-white/80">
    PixelSnow
  </div>
</div>

形状变体

variant 支持 square（方块）/ round（圆点）/ snowflake（六臂雪花）三种雪花形状。

tsx

<>
  <PixelSnow variant="snowflake" density={0.45} speed={1.6} />
  <PixelSnow variant="round" pixelResolution={90} density={0.4} />
</>

复古大马赛克

调小 pixelResolution（横向被切成的「大像素」数）让马赛克块更大，复古感更强。

tsx

<PixelSnow variant="round" pixelResolution={90} density={0.4} />

自定义冷蓝 · 慢速壁纸

color 接任意 CSS 颜色锁定雪花色调；慢速 + 适中密度作为标题区雪景背景。

瑚琏组件库

像素雪 · 明暗自适应

tsx

<div className="relative h-56 overflow-hidden rounded-xl bg-neutral-950">
  <PixelSnow color="oklch(0.85 0.08 230)" speed={0.7} density={0.3} />
  <div className="relative z-10 flex h-full flex-col items-center justify-center gap-1">
    <p className="text-lg font-semibold text-white">瑚琏组件库</p>
    <p className="text-xs text-white/60">像素雪 · 明暗自适应</p>
  </div>
</div>

Props

名称	类型	默认	说明
variant	`"square" \| "round" \| "snowflake"`	`"square"`	雪花形状：方块像素 / 圆点 / 六臂雪花
color	`string`	自适应（`--color-foreground`，撞色时取反）	雪花主色；默认按身后底色亮度自适应取色，保证深底亮雪、浅底暗雪
flakeSize	`number`	`0.01`	雪花基准尺寸（屏幕空间比例）；越大越粗
minFlakeSize	`number`	`1.25`	远处雪花最小投影尺寸，防止亚像素消失
pixelResolution	`number`	`200`	像素化分辨率（横向切多少「大像素」）；越小马赛克越大越复古
speed	`number`	`1.25`	飘落速度因子；越大穿越视野越快
depthFade	`number`	`8`	景深淡出强度；越大远雪衰减越快纵深越强
farPlane	`number`	`20`	光线步进最远裁剪距离；越大可见层数越多（性能成本越高）
brightness	`number`	`1`	整体亮度倍率
gamma	`number`	`0.4545`	伽马校正指数（≈1/2.2 sRGB 近似）
density	`number`	`0.3`	雪花密度（每格出雪概率阈值）；越大越密。建议 0.05–0.6
direction	`number`	`125`	风向角度（度），决定横向漂移方向
className	`string`	—	透传到根容器（或 reduced-motion fallback div）

插槽

类型

说明

fallback

ReactNode

reduced-motion / 无 WebGL 时的静态替代内容；默认白点 + difference 混合静态点阵雪

禁忌 / 坑

组件满铺画布，父容器须 `relative`，叠加内容用 `relative z-10`，否则盖住内容 [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]]。

color 缺省会按身后实际底色自适应取色，但若把组件放进与全局主题相反的容器（如亮色主题下塞深色盒子），自适应是按 token 推断的——撞色时显式传 color 更稳。

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

headless 截图常拍到静止/空白帧（rAF 动画被饿死），真机或 Playwright 实测才能看到飘落 [[recharts-headless-screenshot-blank-clippath-animation-starved]]。

Playground

雪花形状密度 0–0.6飘落速度像素分辨率风向角度°

PixelSnow

<div className="relative h-56 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.13 0.02 255)" }}>
  <PixelSnow
    variant="square"
    density={0.3}
    speed={1.25}
    pixelResolution={200}
    direction={125}
  />
</div>

PixelSnow

用法

基础用法

形状变体

复古大马赛克

自定义冷蓝 · 慢速壁纸

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground

PixelSnow

用法

基础用法

形状变体

复古大马赛克

自定义冷蓝 · 慢速壁纸

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground