Silk Gradient

WebGPU silk mesh. Three colors, warp, grain. Animation on by default.

7.4 KB
•
Updated on September 17, 2026
Active on Canvas Stage

Installation

Bash
pnpm dlx shadcn@latest add @spaceui/components-shader-silk-gradient

Depends on vgpu. WebGPU required.

Usage

Code
import { SilkGradient } from '@/components/shader/silk-gradient'

export default function SpaceUI() {
  return <SilkGradient className="h-96 w-full" color1="#4c9bff" color2="#1f4fd8" color3="#0a1a4a" animate grain />
}

API Reference

PropTypeDefaultDescription
color1
string
requiredLight silk
color2
string
requiredMid warp
color3
string
requiredDark blend
speed
number
1Animation speed
animate
boolean
truePlay / pause
grain
boolean
trueFilm grain
className
string
—Canvas class

Keep in mind

  • MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
  • Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
  • Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.

Related Components

CloudShader

Interactive volumetric cloud material rendered as a full-bleed shader surface.

View
Heat ShadeShader

WebGPU fbm heat field with ember and hot tints along a moving boundary.

View
Paper ShaderShader

Paper Shaders WebGL2 canvas driven by a fragment shader and live uniforms.

View
Heat Shade
Silk Flare
pnpm dlx shadcn@latest add @spaceui/components-spaceui-ui