Silk Cascade

What is Silk Cascade?

Silk Cascade stacks several layers of translucent fabric and gives them anisotropic specular highlights — the sheen stretches along the direction of the fold instead of forming a round hotspot, which is what makes cloth read as cloth rather than plastic. Folds come from domain-warped fbm noise, and the layers are offset slightly against each other to create parallax depth as they drift. Flow speed and sheen intensity are the live parameters. Unusually for this library it renders at 1x CSS pixels instead of device pixels: soft folds survive upscaling almost unchanged, so on a 2x display it costs roughly a quarter of the fill rate of a device-pixel shader. It pauses when scrolled off-screen. Best for fashion, beauty and any page that wants slow, expensive-looking motion.

Silk Cascade is a free WebGL web effect in the TappyPrism library. Flowing layered silk fabric with anisotropic specular highlights, parallax depth, and warm translucent overlap. It is rendered on the GPU by a fragment shader, so it costs almost nothing on the CPU and works well as a full-screen background. It ships as a single self-contained HTML file (silk-cascade.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Flow Speed, Sheen Intensity — adjustable in the browser or at runtime.

Parameters

How to add Silk Cascade to your page

1. Download the standalone file silk-cascade.html and copy its source into your project.
2. Or embed it as a background iframe:

   <iframe src="https://prism.tappypotato.com/fx/silk-cascade.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Silk Cascade"></iframe>

3. Tune it at runtime with postMessage:

   iframe.contentWindow.postMessage({ type: 'param', name: 'FLOW_SPEED', value: 0.4 }, '*');

Frequently asked questions

What is Silk Cascade?

Silk Cascade stacks several layers of translucent fabric and gives them anisotropic specular highlights — the sheen stretches along the direction of the fold instead of forming a round hotspot, which is what makes cloth read as cloth rather than plastic. Folds come from domain-warped fbm noise, and the layers are offset slightly against each other to create parallax depth as they drift. Flow speed and sheen intensity are the live parameters. Unusually for this library it renders at 1x CSS pixels instead of device pixels: soft folds survive upscaling almost unchanged, so on a 2x display it costs roughly a quarter of the fill rate of a device-pixel shader. It pauses when scrolled off-screen. Best for fashion, beauty and any page that wants slow, expensive-looking motion. Silk Cascade is a free WebGL web effect in the TappyPrism library. Flowing layered silk fabric with anisotropic specular highlights, parallax depth, and warm translucent overlap. It is rendered on the GPU by a fragment shader, so it costs almost nothing on the CPU and works well as a full-screen background. It ships as a single self-contained HTML file (silk-cascade.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Flow Speed, Sheen Intensity — adjustable in the browser or at runtime.

How do I add Silk Cascade to my website?

Download the standalone file at https://prism.tappypotato.com/fx/silk-cascade.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/silk-cascade.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Silk Cascade"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'FLOW_SPEED', value: 0.4 }, '*').