## Silk Shader (S—039)

Flowing silk from a single WebGL fragment shader, with sheen highlights, film grain and gentle pointer drift.

- URL: https://sundaeui.dev/components/silk-shader
- Category: Backgrounds & effects · Art direction: Expressive
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/silk-shader.json`
- Tags: gradient, webgl, hero, animated, background, react, shader

Layered sine domain-warping folds the plane into soft creases of fabric, and a narrow sheen band rolls across the folds like light on satin. A touch of film grain stops gradient banding on large screens. The surface leans subtly toward the pointer with heavy damping, so it feels like air moving the cloth.
It is built to be a good citizen. It draws one full-screen triangle with no textures and no dependencies, caps pixel ratio at 1.5, pauses offscreen and in background tabs, and is safe under React StrictMode remounts. Without WebGL, or with reduced motion, it renders a matching radial gradient or a single still frame.
Use it for luxurious hero sections, launch pages and event sites. Pick three colours from deep to highlight.

### Usage

```tsx
import { SilkShader } from '@/components/sundae/silk-shader'

<SilkShader className="min-h-[80vh]" colors={['#0b1020', '#2a3f8f', '#c9d6ff']} speed={0.8}>
  <Hero />
</SilkShader>
```

### Props

- `colors` (`[deep, mid, highlight]`, default `['#140d0b', '#7a2e1d', '#f2b27a']`): Hex colours.
- `speed` (`number`, default `1`): Flow speed.
- `scale` (`number`, default `2.2`): Fold frequency.
- `grain` (`number`, default `0.6`): Film grain, from 0 to 1.
- `children` (`ReactNode`): Content above the surface.

### Accessibility

- The canvas is aria-hidden. Check text contrast against the highlight colour.
- Reduced motion renders a single still frame.