Surface study no. 04
A studio for identities that move. We cast brands in liquid metal, then let them settle into something you can hold.
A live WebGL length of silk hanging from a few pins along its top edge: real cloth physics (a mass-spring weave with shear and bending) lets it fall into deep folds and swell in a slow breeze, shaded with an anisotropic sheen that runs along the weave, a soft rim and occlusion in the folds. Sweeping the cursor across stirs the air: the silk ripples and swings in the direction of the movement, then settles; a still cursor leaves it alone. The fabric is far wider than the frame, so its edges never show however it gathers. Silk and background colors, sheen, light angle, stiffness, wind, pins and mesh detail are all props. It grows softly out of the background on load, the resolution adapts to the device, it pauses offscreen, hangs still for reduced motion and falls back to a CSS drape without WebGL.
The import and the props worth knowing about, in one place.
import { SilkDrape } from "@/components/beste/component/silk-drape";
// As a layer behind content
<section className="relative min-h-[40rem]">
<SilkDrape className="absolute inset-0" />
<div className="relative">...</div>
</section>
<SilkDrape
className="min-h-[32rem]"
color="#d9c3a0" // champagne; any CSS color, tokens included
backgroundColor="#1a140d"
sheen={0.9} // brighter highlights along the weave, 0 to 1
lightAngle={60} // light from the upper right
wind={0.7} // a stronger breeze
pins={7} // shallower swags along the top
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | — | Color of the silk. Any CSS color, tokens included. |
backgroundColor | string | — | Color behind the fabric, seen only where the silk lifts away. |
sheen | number | — | Strength of the sheen along the weave, 0 to 1. |
lightAngle | number | — | Direction the light comes from, in degrees (0 = right, 90 = top). |
stiffness | number | — | How firmly the fabric holds its shape, 0 (liquid) to 1 (crisp). |
wind | number | — | Strength of the breeze moving the fabric, 0 to 1. |
pins | number | — | Pins along the top edge the silk hangs from, 2 to 9. |
detail | number | — | Mesh detail, 0 to 1. Higher is smoother folds and more work. |
interactive | boolean | — | Sweeping the cursor across stirs the air, so the silk ripples and swings with the movement. |
paused | boolean | — | Freeze the fabric where it hangs. |
className | string | — | |
children | ReactNode | — |