Silk Flare

WebGPU single-pass composite shader fusing silky mesh warp gradients and rising thermodynamic heat flares.

11.1 KB

•

Updated on September 19, 2026

Active on Canvas Stage

Installation

Bash

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

Depends on vgpu. WebGPU required.

Usage

Code

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
    />
  )
}

API Reference

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

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.

Silk Gradient

Paper Shader

pnpm dlx shadcn@latest add @spaceui/components-spaceui-ui