Wave Lattice 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 WaveLattice from "./WaveLattice";

export default function Example() {
  return (
    <WaveLattice
      color={"#a7bfd2"}
      background={"#141d26"}
      density={22}
      amplitude={35}
      speed={12}
      paused={false}
      height={420}
    />
  );
}

Using Wave Lattice

Use Wave Lattice as a bounded section background and pass foreground content through children. Height reserves the layout before the SVG renders.

Density changes the number of mesh lines and amplitude changes the surface shape. Use paused for a still composition; reduced motion also stops the drift.

Props

Name	Type	Required	Default	Description
color	string	No	"#a7bfd2"	Mesh and foreground colour.
background	string	No	"#141d26"	Surface background.
density	number	No	22	Lines along each mesh axis, from 6 to 40.
amplitude	number	No	35	Wave height in SVG units, from 0 to 80.
speed	number	No	12	Duration of each drift direction in seconds.
children	ReactNode	No	undefined	Optional foreground content.
height	number \| string	No	420	Reserved height of the effect.
paused	boolean	No	false	Pause the decorative animation.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.