Silk

silk

丝绸流动背景 · WebGL/ogl 懒加载 shader(复刻 react-bits) + chart token 主色 + reduced-motion 渐变兜底

用法

基础用法

放进 relative 容器，Silk 自带 absolute inset-0 z-0；内容用 relative z-10 层叠在丝绸之上。默认吃 chart-1 token。

Silk

丝绸流动 WebGL 背景

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <Silk />
  <div className="relative z-10 flex h-full flex-col items-center justify-center gap-3">
    <p className="text-2xl font-bold tracking-tight text-white/90">Silk</p>
    <p className="text-sm text-white/50">丝绸流动 WebGL 背景</p>
  </div>
</div>

速度与缩放

speed 控制流动快慢，scale 控制纹理密度，低速大 scale 更细腻。

speed=2 · scale=1.5

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <Silk speed={2} scale={1.5} />
</div>

自定义颜色

color 接受任意 CSS 颜色（hex / oklch / rgb），定制丝绸主色调。

暖金丝绸

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <Silk color="oklch(0.78 0.18 55)" speed={4} scale={1.2} />
</div>

颗粒强度

noiseIntensity 控制颗粒质感，0 为纯净丝绸，调高获得磨砂胶片感。

纯净丝绸（无颗粒）

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <Silk noiseIntensity={0} speed={5} />
</div>

纹理旋转

rotation（弧度）旋转丝绸纹理方向，Math.PI / 4 即 45° 斜向。

rotation = π/4

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <Silk rotation={Math.PI / 4} speed={4} />
</div>

何时用

需要高质感的流动丝绸光泽背景时用，视觉档次高于纯 CSS 背景。基于 WebGL/ogl（懒加载），有 GPU 开销，但自带 reduced-motion / 无 WebGL 时的渐变 fallback；若不愿引入 WebGL，退而求其次用纯 CSS 的 Aurora；想要虹彩光谱质感用 Iridescence，想要丝线网格用 Threads。

导入

import { Silk, silkShowcase } from "@hulianui/ui"

Props

名称	类型	默认	说明
speed	number	5	动画速度因子，映射 GLSL uniform uSpeed，越大越快
scale	number	1	噪声/纹理缩放，越大细节越密，越小越宏观
color	string	`--color-chart-1`	丝绸主色，CSS 颜色字符串（hex/oklch/rgb/var）。默认吃主题 token
noiseIntensity	number	1.5	颗粒噪声强度，0=无颗粒（纯色带）
rotation	number	0	纹理旋转角度（弧度），如 `Math.PI/4`=45°
className	string	—	透传到 canvas（或 fallback div）

Slots

插槽	类型	说明
fallback	ReactNode	reduced-motion / 无 WebGL 时渲染的静态替代内容（默认 chart token 渐变 div）

禁忌 / 坑

WebGL 组件，须客户端渲染；color 支持 var(--…)/oklch，组件内部负责解析后喂 shader。
自带 absolute inset-0 z-0，叠加内容须用 relative z-10，父容器需 relative + overflow-hidden。
ogl shader 在 StrictMode 双挂载或 cleanup 时易踩 context 复用毒化坑——若改源码勿在 cleanup 调 loseContext 后复用同一 canvas（参见 [[webgl-canvas-loseContext-poisons-strictmode-remount]]）；headless 截图可能因 WebGL 不可用而走 fallback，验证视觉用真实浏览器。

Playground

速度缩放颗粒强度旋转（弧度）自定义色（留空=chart-1）

Silk · WebGL 背景

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <Silk
    speed={5}
    scale={1}
    noiseIntensity={1.5}
    rotation={0}
  />
  <div className="relative z-10">内容</div>
</div>

用法

基础用法

放进 relative 容器，Silk 自带 absolute inset-0 z-0；内容用 relative z-10 层叠在丝绸之上。默认吃 chart-1 token。

Silk

丝绸流动 WebGL 背景

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <Silk />
  <div className="relative z-10 flex h-full flex-col items-center justify-center gap-3">
    <p className="text-2xl font-bold tracking-tight text-white/90">Silk</p>
    <p className="text-sm text-white/50">丝绸流动 WebGL 背景</p>
  </div>
</div>

速度与缩放

speed 控制流动快慢，scale 控制纹理密度，低速大 scale 更细腻。

speed=2 · scale=1.5

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <Silk speed={2} scale={1.5} />
</div>

自定义颜色

color 接受任意 CSS 颜色（hex / oklch / rgb），定制丝绸主色调。

暖金丝绸

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <Silk color="oklch(0.78 0.18 55)" speed={4} scale={1.2} />
</div>

颗粒强度

noiseIntensity 控制颗粒质感，0 为纯净丝绸，调高获得磨砂胶片感。

纯净丝绸（无颗粒）

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <Silk noiseIntensity={0} speed={5} />
</div>

纹理旋转

rotation（弧度）旋转丝绸纹理方向，Math.PI / 4 即 45° 斜向。

rotation = π/4

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <Silk rotation={Math.PI / 4} speed={4} />
</div>

何时用

Props

名称	类型	默认	说明
speed	number	5	动画速度因子，映射 GLSL uniform uSpeed，越大越快
scale	number	1	噪声/纹理缩放，越大细节越密，越小越宏观
color	string	`--color-chart-1`	丝绸主色，CSS 颜色字符串（hex/oklch/rgb/var）。默认吃主题 token
noiseIntensity	number	1.5	颗粒噪声强度，0=无颗粒（纯色带）
rotation	number	0	纹理旋转角度（弧度），如 `Math.PI/4`=45°
className	string	—	透传到 canvas（或 fallback div）

插槽

类型

说明

fallback

ReactNode

reduced-motion / 无 WebGL 时渲染的静态替代内容（默认 chart token 渐变 div）

禁忌 / 坑

WebGL 组件，须客户端渲染；color 支持 var(--…)/oklch，组件内部负责解析后喂 shader。

自带 absolute inset-0 z-0，叠加内容须用 relative z-10，父容器需 relative + overflow-hidden。

ogl shader 在 StrictMode 双挂载或 cleanup 时易踩 context 复用毒化坑——若改源码勿在 cleanup 调 loseContext 后复用同一 canvas（参见 [[webgl-canvas-loseContext-poisons-strictmode-remount]]）；headless 截图可能因 WebGL 不可用而走 fallback，验证视觉用真实浏览器。

Playground

速度缩放颗粒强度旋转（弧度）自定义色（留空=chart-1）

Silk · WebGL 背景

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <Silk
    speed={5}
    scale={1}
    noiseIntensity={1.5}
    rotation={0}
  />
  <div className="relative z-10">内容</div>
</div>

Silk

用法

基础用法

速度与缩放

自定义颜色

颗粒强度

纹理旋转

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground

Silk

用法

基础用法

速度与缩放

自定义颜色

颗粒强度

纹理旋转

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground