WebGPU single-pass composite shader fusing silky mesh warp gradients and rising thermodynamic heat flares.
pnpm dlx shadcn@latest add @spaceui/components-shader-silk-flareDepends on vgpu. WebGPU required.
import { SilkFlare } from '@/components/shader/silk-flare'
export default function SpaceUI() {
return (
<SilkFlare
className="h-96 w-full"
color1="#7c3aed"
color2="#6366f1"
color3="#a855f7"
hotColor="#38bdf8"
heatOpacity={0.5}
from="bottom"
speed={0.8}
animate
grain
/>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
color1 | string | required | First silk mesh base color |
color2 | string | required | Mid warp mesh color |
color3 | string | required | Dark silk blend color |
hotColor | string | color3 | Peak flame/flare heat color |
heatOpacity | number | 0.5 | Intensity/opacity of the thermodynamic flare layer |
from | bottom|top | bottom | Direction of rising heat licks |
speed | number | 0.8 | Animation velocity |
animate | boolean | true | Play / pause animation |
grain | boolean | true | Film grain overlay |
dpr | number | devicePixelRatio | Target device pixel ratio cap |
className | string | — | Canvas class name |
Interactive volumetric cloud material rendered as a full-bleed shader surface.
ViewA dual-pass WebGL shader fluid simulation with chromatic wave refraction and Bayer 4x4 matrix ordered dither crossfading.
ViewAn interactive WebGL shader image component with cover UV mapping and dynamic cursor fluid-distortion ripples using data textures.
Viewpnpm dlx shadcn@latest add @spaceui/components-spaceui-uipnpm dlx shadcn@latest add @spaceui/components-shader-silk-flare