Silk Gradient

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

7.5 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
Fluid CrossfadeShader

A dual-pass WebGL shader fluid simulation with chromatic wave refraction and Bayer 4x4 matrix ordered dither crossfading.

View
Fluid Distortion ImageShader

An interactive WebGL shader image component with cover UV mapping and dynamic cursor fluid-distortion ripples using data textures.

View
Heat ShadeSilk Flare
pnpm dlx shadcn@latest add @spaceui/components-spaceui-ui
pnpm dlx shadcn@latest add @spaceui/components-shader-silk-gradient