Silk Waves React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import SilkWaves from "./SilkWaves";

export default function Example() {
  return (
    <SilkWaves
      color={"#b68e86"}
      highlightColor={"#f1d8ba"}
      background={"#21191e"}
      speed={12}
      intensity={0.8}
      angle={-18}
      children={"A softer kind of motion."}
      minHeight={400}
      style={{
        "fontSize": 36,
        "letterSpacing": "-.045em",
        "color": "#f5e9de"
      }}
    />
  );
}

Using Silk Waves

Use color and highlightColor to define the folds of light. angle sets their direction across the background.

Place foreground content in children and reserve the section with minHeight. A modest intensity gives text more room to stand out.

Props

Name	Type	Required	Default	Description
color	string	No	"#b68e86"	Colour of the fabric folds.
highlightColor	string	No	"#f1d8ba"	Brightest colour along each fold.
background	string	No	"#21191e"	Container background.
speed	number	No	12	Base animation cycle length in seconds.
intensity	number	No	0.8	Opacity of the wave layer, from 0 to 1.
angle	number	No	-18	Overall fabric angle in degrees.
children	ReactNode	No	undefined	Optional foreground React content.
minHeight	number \| string	No	380	Minimum height in pixels or a CSS length. The component can fill a taller parent.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.