Silk

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

Silk

丝绸流动 WebGL 背景

全状态

Silk

丝绸流动 WebGL 背景

default（深色底·chart-1 token）

speed = 12

高速流动（speed=12）

speed=2 · scale=1.5

低速·细腻（speed=2·scale=1.5）

暖金丝绸

自定义暖金色

极光蓝紫

自定义极光蓝紫

rotation = π/4

45°旋转（rotation=π/4）

纯净丝绸（无颗粒）

无颗粒（noiseIntensity=0）

高颗粒质感

高颗粒（noiseIntensity=4）

CMCodemarker

码尺・代码度量平台

可视化代码质量 · 智能追踪技术债 · 团队效能洞察

作品详情 Hero（码尺 Codemarker）

浅色底 · 自定义色

浅色底（亮色主题）

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

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

Silk

丝绸流动 WebGL 背景

全状态

Silk

丝绸流动 WebGL 背景

default（深色底·chart-1 token）

speed = 12

高速流动（speed=12）

speed=2 · scale=1.5

低速·细腻（speed=2·scale=1.5）

暖金丝绸

自定义暖金色

极光蓝紫

自定义极光蓝紫

rotation = π/4

45°旋转（rotation=π/4）

纯净丝绸（无颗粒）

无颗粒（noiseIntensity=0）

高颗粒质感

高颗粒（noiseIntensity=4）

CMCodemarker

码尺・代码度量平台

可视化代码质量 · 智能追踪技术债 · 团队效能洞察

作品详情 Hero（码尺 Codemarker）

浅色底 · 自定义色

浅色底（亮色主题）

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>