Satin Waves React component
A silky satin fabric shader of slow, overlapping folds with real lighting: soft diffuse shading, a sharp specular highlight and a broad sheen on the turning edges; the light follows the pointer so highlights slide across the cloth.
About the Satin Waves component
Satin Waves is a background that looks like a sheet of satin moving in a slow breeze. The folds are lit properly: shadows gather in the dips, a sharp highlight runs along the crests and a soft sheen glows where the fabric turns away.
The light follows your pointer, so moving across it slides the highlights over the cloth. It's a WebGL shader and pauses when it isn't visible.
When to use it
Use it for fashion, beauty, jewellery and hospitality heroes, luxury product launches, invitations or any page that should feel soft and premium.
Dark, saturated colour sets look the richest; very light palettes need a darker text colour on top.
Installation
Add the Satin Waves component to your project with the shadcn CLI. It lands in components/satin-waves.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/satin-wavesOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<SatinWaves /> accepts 8 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| children Content shown on top of the background. | React.ReactNode | — |
| colors Satin colours: shadows in the folds, the fabric, the specular highlight and the soft sheen. | [string, string, string, string] | DEFAULT_COLORS |
| background Base colour behind the effect. | string | DEFAULT_BACKGROUND |
| speed Animation speed multiplier. | number | 1 |
| intensity Overall brightness of the effect. | number | 1 |
| interactive The light moves with the pointer, sliding the highlights across the folds. | boolean | true |
| resolution Render scale: 1 is full resolution, lower values are cheaper on very large screens. | number | 1 |
| paused Freeze the animation on its current frame. | boolean | false |
- children
Content shown on top of the background.
React.ReactNode - colors
Satin colours: shadows in the folds, the fabric, the specular highlight and the soft sheen.
[string, string, string, string]Default: DEFAULT_COLORS - background
Base colour behind the effect.
stringDefault: DEFAULT_BACKGROUND - speed
Animation speed multiplier.
numberDefault: 1 - intensity
Overall brightness of the effect.
numberDefault: 1 - interactive
The light moves with the pointer, sliding the highlights across the folds.
booleanDefault: true - resolution
Render scale: 1 is full resolution, lower values are cheaper on very large screens.
numberDefault: 1 - paused
Freeze the animation on its current frame.
booleanDefault: false
npm dependencies
Installed for you by the shadcn CLI.
Satin Waves FAQ
- How do I put content on top?
- Pass it as children. SatinWaves is a relative container with the effect drawn behind its children, so give it a height (or make it absolute inset-0 inside a section) and lay your content out inside.
- Can I change the colours?
- Pass colors with four colours: the shadow in the folds, the fabric itself, the sharp highlight and the soft sheen. Champagne, emerald or midnight blue sets all work well.
- Is it heavy on performance?
- It's one small WebGL shader. It only animates while it's on screen and the tab is visible, caps the pixel density at 1.5x, and resolution={0.6} renders it smaller and scales it up on very large screens.
- What about reduced motion?
- With reduced motion turned on, or paused set, it draws a single still frame instead of animating. Without WebGL it falls back to a soft CSS gradient in the same colours.
