Caustic Surface 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 CausticSurface from "./CausticSurface";

export default function Example() {
  return (
    <CausticSurface
      color={"#8acde2"}
      background={"#102b40"}
      speed={18}
      intensity={0.6}
      scale={90}
      paused={false}
      height={420}
    />
  );
}

Using Caustic Surface

Use Caustic Surface as a bounded section background, with foreground content passed through children. Each instance receives a unique SVG filter ID.

Increase scale for broader reflections and reduce intensity behind text. Pause the effect when its section is hidden to avoid unnecessary animation.

Props

Name	Type	Required	Default	Description
color	string	No	"#8acde2"	Colour of the moving light.
background	string	No	"#102b40"	Base surface colour.
speed	number	No	18	Drift cycle duration in seconds.
intensity	number	No	0.6	Light opacity from zero to one.
scale	number	No	90	Approximate cell size in pixels.
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.