Silk Cloth

"use client";

import { ShaderSurface, type ShaderBackgroundProps } from "../_shader-background/ShaderSurface";

// A sheet of satin, rippling as if in a light breeze.
//
// The cloth is a height field of long folds: a broad wave and a finer one running across the
// threads, bent by slow noise so the folds wander, merge and split the way draped fabric does. Here
// and there a soft crease crosses them, where the cloth bunches up.
//
// It's lit like a studio shot: a key light from the top left gives the folds their body, and a dim
// fill from the opposite side keeps the shadow side from going dead. What makes it satin is the
// sheen: a tight highlight that stretches along the threads, so every crest carries a long bright
// streak, wrapped in a broader glow. Slopes turned away from the viewer catch a soft rim of light,
// the valleys fall into a coloured shadow (satin lets a little light through), and a faint weave runs
// through the highlights.
//
// The shading runs through the palette, from the deepest shadow to the brightest sheen.
const SHADER = /* glsl */ `
uniform float u_angle;  // direction of the folds, degrees
uniform float u_folds;  // how many folds fit across the frame
uniform float u_depth;  // how deep the folds are
uniform float u_flow;   // how much the folds wander
uniform float u_creases; // soft creases across the folds