Chroma Mesh 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 ChromaMesh from "./ChromaMesh";

export default function Example() {
  return (
    <ChromaMesh
      colors={[
        "#251648",
        "#e27669",
        "#a798ed",
        "#f1cfa0"
      ]}
      duration={18}
      blur={60}
      grain={0.12}
      paused={false}
      minHeight={420}
    />
  );
}

Using Chroma Mesh

Use a small palette of related colours for a soft background behind text. minHeight reserves the section's vertical space.

Increase blur for broader colour transitions and lower grain for a smoother finish. Use paused when the surrounding interface needs to remain still.

Props

Name	Type	Required	Default	Description
colors	string[]	No	["#251648", "#e27669", "#a798ed", "#f1cfa0"]	Colour palette for the four overlapping clouds. Empty palettes use a single dark fallback.
duration	number	No	18	Length of each animation cycle in seconds.
blur	number	No	60	Blur radius in pixels.
grain	number	No	0.12	Texture opacity from 0 to 1.
minHeight	number \| string	No	340	Minimum height in pixels or a CSS length. The component can fill a taller parent.
paused	boolean	No	false	Pause the clouds at their current position.
children	ReactNode	No	undefined	Optional content layered above the background.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.