Flowing satin folds catching soft highlights
| Name | Type | Default | Description |
|---|---|---|---|
colors | [string, string] | ["#2A2A30", "#A1A1B5"] | Two fabric colours: the body of the satin, then the sheen that tints its lit edges and highlights. |
backgroundColor | string | "#050505" | Colour of the deepest folds, where the fabric falls into shadow. |
angle | number | -20 | Direction the folds run, in degrees. 0 gives vertical folds. |
scale | number | 1 | Number of folds across the frame. Larger values give finer fabric. |
depth | number | 1 | How deep the folds are. Deeper folds catch more highlights. |
warp | number | 1 | How much the folds bend and meander. |
detail | number | 1 | Small ripples layered over the main folds. |
gloss | number | 0.4 | Sharpness of the highlights, 0 to 1. Higher values give crisper, thinner glints. |
highlight | number | 1 | Brightness of the highlights. |
sheen | number | 0.5 | Strength of the tinted sheen along the steep sides of the folds. |
lightAngle | number | 10 | Direction the light comes from, in degrees. 0 lights the fabric from the top. |
flow | number | 1 | How fast the folds roll and shift. |
speed | number | 1 | Overall animation speed. 0 holds the current frame. |
interactive | boolean | true | A soft swell follows the pointer beneath the fabric, and the highlights sweep around it. |
swell | number | 1 | Height of the swell under the pointer. 0 disables it. |
swellRadius | number | 0.22 | Width of the swell, relative to the height. |
clickRipples | boolean | true | Each click sends a ripple rolling through the fabric. Rapid clicks stack. |
seed | number | 0 | Changes the arrangement of the folds. |
paused | boolean | false | Freezes the animation. |
dpr | number | 1.5 | Upper bound for the device pixel ratio. |
className | string | — | Classes for the root element. Give it a height. |
style | CSSProperties | — | Inline styles for the root element. |
children | ReactNode | — | Content layered above the fabric. |
colors[string, string]Two fabric colours: the body of the satin, then the sheen that tints its lit edges and highlights.
["#2A2A30", "#A1A1B5"]backgroundColorstringColour of the deepest folds, where the fabric falls into shadow.
"#050505"anglenumberDirection the folds run, in degrees. 0 gives vertical folds.
-20scalenumberNumber of folds across the frame. Larger values give finer fabric.
1depthnumberHow deep the folds are. Deeper folds catch more highlights.
1warpnumberHow much the folds bend and meander.
1detailnumberSmall ripples layered over the main folds.
1glossnumberSharpness of the highlights, 0 to 1. Higher values give crisper, thinner glints.
0.4highlightnumberBrightness of the highlights.
1sheennumberStrength of the tinted sheen along the steep sides of the folds.
0.5lightAnglenumberDirection the light comes from, in degrees. 0 lights the fabric from the top.
10flownumberHow fast the folds roll and shift.
1speednumberOverall animation speed. 0 holds the current frame.
1interactivebooleanA soft swell follows the pointer beneath the fabric, and the highlights sweep around it.
trueswellnumberHeight of the swell under the pointer. 0 disables it.
1swellRadiusnumberWidth of the swell, relative to the height.
0.22clickRipplesbooleanEach click sends a ripple rolling through the fabric. Rapid clicks stack.
trueseednumberChanges the arrangement of the folds.
0pausedbooleanFreezes the animation.
falsedprnumberUpper bound for the device pixel ratio.
1.5classNamestringClasses for the root element. Give it a height.
—styleCSSPropertiesInline styles for the root element.
—childrenReactNodeContent layered above the fabric.
—