Silk Background

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

The inline script is not optional. The layer carries a baked still of the satin for visitors without JavaScript or WebGL and for anyone who prefers reduced motion. Without this probe every visitor would download that image and see it for the half second three.js takes to arrive, then watch it swap for the canvas. The probe runs before first paint and stamps html.gl when a canvas is coming; the stylesheet drops the still under that class, so it is never even requested. The effect removes the class again if it cannot build a renderer after all.

2. Put the layer inside any positioned container, before your content:

Code snippet omitted: it ships with the download.

data-silk-calm marks content that should sit on a quieter stretch of cloth. Put it on the box that holds your text (up to four elements per layer).

3. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

Why the import map rather than a plain <script src> for three.js: three ships as ES modules only, and its old UMD build logs a deprecation warning on every page load. The shim imports it as a module (dynamically, so a blocked CDN falls back to the still instead of a blank layer), puts it on window, and then loads script.js as an ordinary script, so the effect itself stays a plain file you can drop into any build (or none).

Already using three.js as a module? Skip the shim and make sure window.THREE is set before script.js runs:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

What the effect needs from your markup: a positioned container (relative, absolute or fixed) holding the [data-silk] layer and your content. The layer fills the container with position: absolute; inset: 0, at any size, so it works on a full-viewport hero or a single card. Your content needs position: relative (or any z-index context) to sit above it. The layer takes no pointer events; the container listens for the pointer instead, so the light follows the cursor over your text and buttons too.

What is only the demo's styling: everything under DEMO in style.css: the .stage box and the cue line. Replace it wholesale.

CSS the effect depends on:

• The container must have a real size. The canvas is sized from the layer, which takes the container's box. A container with no height gives a canvas of no height.
• The .silk block (position: absolute; inset: 0, overflow: hidden, pointer-events: none), .silk__canvas, and the .gl .silk rule that drops the still.
• The two still images in img/, referenced from .silk and its portrait media query.
• On touch screens the container needs touch-action: pan-y so vertical swipes still scroll the page. The script sets it inline while it runs if you have not.

Colours are custom properties on .silk, read once at start and handed to the shader, so a restyle never touches the script:

Code snippet omitted: it ships with the download.

Any CSS colour works (hex, rgb(), oklch(), color-mix()). Deep, saturated colours look most like satin: emerald, navy, oxblood, aubergine, charcoal. The derived sheen is the base colour taken most of the way to white, and the derived shadow is the base at a fifth of its brightness, which is why a navy or oxblood silk still gets convincing highlights without any other setting. A pale silk (champagne, ivory) works too; its highlight is held back automatically so it does not blow out.

If you change the colour, re-bake the still. The still images are a frame of the emerald satin. Screenshot your restyled layer with the content hidden (a landscape frame around 2400 x 1350 and a portrait one around 780 x 1690) and save them over img/silk-still.webp and img/silk-still-portrait.webp. Until you do, reduced-motion and no-WebGL visitors see the emerald still; the layer's background colour underneath is always your --silk-color.

Contrast. Behind data-silk-calm content the folds flatten, the sheen dims and the cloth is held at or below a fixed brightness (relative luminance 0.13, or the base colour's own if that is brighter), so chalk-white body copy keeps 4.5:1 at the brightest moment. The cap is designed for light text on a deep silk. With a pale silk use dark text and measure again.

Options

Attribute	Values	Default	Description
data-silk	(present)		Marks the layer
data-silk-flow	0 and up	1	Speed of the drifting folds. 0 freezes the folds; the light and ripples still work
data-silk-drift	0	on	0 stops the light moving on its own. With no pointer it rests high on the left
data-silk-fold	0.4 to 3	1	Fold size. 2 gives folds twice as large, 0.6 a finer, busier cloth
data-silk-intensity	0 to 1	1	Scales the whole response: how far the light follows the pointer, the ripples and the sheen
data-silk-calm	(present)		On content in the same container: quiets the cloth behind it (up to four elements)
data-silk-keys	(present)		On a focusable ancestor: enables the keyboard controls below

With both data-silk-flow="0" and data-silk-drift="0" the canvas stops drawing as soon as the light settles, and only wakes for input.

Behaviour

• Load: the cloth fades up out of its own shadow while the light swings in from beyond the top left corner, over about 1.6 seconds.
• Pointer: the light follows the cursor with weight, a little behind it, raking the sheen across the folds. When the pointer leaves the container the light drifts on its own again (or returns to rest, with drift off).
• Press and hold: a ripple lifts from the pointer and rolls outward across the whole sheet, fading as it travels, while the cloth swells gently under the pointer. Holding sends another ripple every 0.85 seconds. Up to six ripples run at once; quick presses stack. Release and the swell settles in 0.9 seconds. Presses on links, buttons and form fields are ignored.
• Touch: the light drifts on its own; drag to move it, and it returns to its drift 2.5 seconds after your finger lifts. Tap to send one ripple.
• Calm zones: behind marked content the folds flatten and the sheen dims, and the transition into them is soft, so the cloth reads as one sheet.

Accessibility

• Reduced motion: no canvas at all. The layer shows the baked still of the satin, a designed frame at its best light. No autonomous motion of any kind.
• Without JavaScript, or without WebGL: the same still. It is never hidden until a canvas actually exists.
• Keyboard: with data-silk-keys on a focusable ancestor, arrow keys jump the light a step across the cloth (it does not glide), and Space or Enter sends a ripple from the light. The light returns to its drift six seconds after the last key.
• Screen readers: the layer and its canvas are aria-hidden; nothing in them is content.

Dependencies

Dependency	Version	Required
three.js	0.180.0	Yes, as an ES module (see Quick Start)
GSAP core	3.12+ (the demo is built against 3.15.0)	Yes: the load reveal, each ripple's lift, travel and decay, the swell under a held press, the ticker the frame loop runs on, matchMedia branching and teardown

No GSAP plugins. GSAP plays the timed values; the frame loop owns the continuous ones (the drifting folds and the light's chase of the pointer); the shader turns both into satin each frame. Everything used from three.js (WebGLRenderer, ShaderMaterial, PlaneGeometry, OrthographicCamera) is long-stable API, so pinning a different version is a one-line change in the import map.

Browser Support

Anything with WebGL, which is every current browser. Support is probed before three.js is asked for a renderer: three logs its own failure to the console as errors before it throws, so a visitor with WebGL disabled would otherwise get a console full of red on a page that had quietly fallen back. Probed first, that visitor gets the still and a clean console. In a browser too old for import maps the module never runs, and the still is again what shows.

Performance

One draw call per frame: a single full-screen pass. The loop runs only while the layer is on screen and the tab is visible. Pixel ratio is capped at 2 (1.5 on touch devices). The satin is smooth, so it holds up well at lower resolution.

To buy back frames on low-end hardware, set data-silk-flow="0" and data-silk-drift="0": the canvas then draws only while the light or a ripple is moving, instead of continuously.