Silk

Draws a sheet of fabric drifting in slow folds, lit from one side: a warped height field on the GPU, normals from finite differences, a diffuse body in the colour and a narrow sheen in a second tone. The troughs keep a trace of the colour and let the page's ground through, so it reads on either theme. The pointer presses a soft dent into the cloth. Every constant is a custom property re-read when the element's style changes. Without WebGL2 or JavaScript a still diagonal sheen stands in. Fills its positioned parent.

Silk.

move your cursor

Live, from the library itself: scroll, hover, navigate away and back. The demo is never gated.

Measured

JavaScript with its libs

10.6 kB raw

1.1 kB raw of its own, 683 B gzip. The rest is the runtime, the shader runner, the canvas helper and the GL core, loaded once for every effect on the page.

CSS 5.1 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.

Browser support

Baseline · widely available

Chrome 56 · Firefox 51 · Safari 15; needs webgl2. Elsewhere: without WebGL2, a still repeating diagonal sheen in the colour at the fold angle.

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

terminal

npx shadcn@latest add @moonarc-pro/silk

src/pages/index.astro

<section class="relative min-h-[60vh] bg-background">
  <Silk color="var(--primary)" />
  <h1 class="relative">Silk background</h1>
</section>

Without a key the registry answers 401 with an upgrade message. Related free primitives: aurora.

Props

Prop	Type	Default	Description
`color`	`string`	`'oklch(0.55 0.16 280)'`	Fabric colour; any CSS colour, theme tokens included.
`sheen`	`string`	`color lifted 65 % toward white`	The second tone: the highlight on the crests.
`scale`	`number`	`1.6`	Folds across the short side.
`speed`	`number`	`1`	Drift speed multiplier; accumulated, so a change never jumps.
`depth`	`number`	`1`	How deep the folds are: 0.5 is a flat sheet, 2 is deep drapery.
`angle`	`number`	`-24`	Rotation of the folds, in degrees.
`press`	`number`	`0.6`	How hard the pointer dents the cloth; 0 turns the pointer off.

Reduced motion

No loop: one frame at a fixed moment, drawn once; the pointer does not dent it.

With `ClientRouter`

Bound through the shared runtime: loop, observers and pointer listener are released before the swap and the WebGL context is lost on purpose after it; five round trips leave one context. Under transition:persist the canvas keeps its context and starts again on the next page.

Why it is built this way

Lighting, not colour cycling: the folds are a height field and the shader lights it, so the silk reads as cloth, with a body in the colour and a Blinn sheen in the second tone.
Normals from two extra samples of the same function (finite differences) instead of derivatives, which would break into 2 × 2 blocks.
Premultiplied with colour clamped to alpha, and a byte of noise scaled by alpha against banding in the long gradients.
The troughs carry a sixth of the colour and let the ground through: deep on a dark page, airy on a light one, from the same tokens.
The pointer lowers the height field under it and the lighting shades the dent, so nothing is painted on.

Replaces: Silk (React Bits) · Satin / fabric shader backgrounds. See the migration table.

Aurora Background

Backgrounds

Ambient gradient field: three soft colour fields drifting at three coprime speeds, a slow hue rotation so the colours themselves move, and a film-grain layer stepped at 12 fps.

every browseralways

Fluid Field

Pro

Draws smoke that follows the cursor.

every browserpointeralways

Liquid Chrome

Pro

Draws a pool of liquid metal.

every browseralwayspointer

Plasma

Pro

Draws glowing ribbons of light drifting through each other: four sine fields interfere on the GPU, the sum folds into soft bands, and each band glows in a colour sliding between two tones with a hot core at its peak.