Silk
silkProduces a flowing fabric-like WebGL surface with theme-aware color.
Usage
Basic usage
Placed into the relative container, Silk comes with absolute inset-0 z-0; the contents are layered on top of the silk with relative z-10. The default is chart-1 token.
Silk
Silk flow WebGL background
<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">Silk flow WebGL background</p>
</div>
</div>Speed and Zoom
speed controls the flow speed, scale controls the texture density, and the low speed scale is more delicate.
speed=2 · scale=1.5
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.12 0.02 270)" }}>
<Silk speed={2} scale={1.5} />
</div>Custom color
color accepts any CSS color (hex / oklch / rgb), customized silk main color.
Warm golden silk
<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>Particle strength
noiseIntensity Controls the grainy texture, 0 is pure silk, increase it to obtain a matte film feel.
Pure silk (no particles)
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.12 0.02 270)" }}>
<Silk noiseIntensity={0} speed={5} />
</div>Texture rotation
rotation (radian) rotates the silk texture direction, Math.PI / 4 is 45° oblique.
rotation = π/4
<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>When to Use
Use it when you need a high-quality flowing silk glossy background, which has a higher visual quality than a pure CSS background. Based on WebGL/ogl (lazy loading), there is GPU overhead, but it comes with reduced-motion / gradient fallback without WebGL; if you do not want to introduce WebGL, the next best option is to use pure CSS Aurora; if you want an iridescence spectrum texture, use Iridescence, if you want a silk grid, use Threads.
Import
import { Silk, silkShowcase } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| speed | number | 5 | Animation-speed factor mapped to GLSL uSpeed; higher values move faster |
| scale | number | 1 | Noise scale; higher values create denser detail, while lower values create broader forms |
| color | string | --color-chart-1 | Silk main color, CSS color string (hex/oklch/rgb/var). Default theme token |
| noiseIntensity | number | 1.5 | Particle noise intensity, 0 = no particles (pure color band) |
| rotation | number | 0 | Texture rotation angle (radians), such as Math.PI/4=45° |
| className | string | — | Additional class name for the canvas or fallback div |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | reduced-motion / static alternative content rendered without WebGL (default chart token gradient div) |
Usage Guidelines
- WebGL components must be rendered on the client side;
colorsupportsvar(--…)/oklch, and the component is responsible for parsing and feeding to the shader. - Comes with
absolute inset-0 z-0, overlay content must userelative z-10, parent container must userelative+overflow-hidden. - The ogl shader is easy to step into the context reuse poison pit when double mounting in StrictMode or cleanup - if you change the source code, do not reuse the same canvas after calling
loseContextin cleanup (see [[webgl-canvas-loseContext-poisons-strictmode-remount]]); headless screenshots may fallback due to the unavailability of WebGL, use a real browser to verify the vision.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
Silk · WebGL Background
<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">Content</div>
</div>