Ripple Field 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 RippleField from "./RippleField";

export default function Example() {
  return (
    <RippleField
      children={"Make a ripple."}
      color={"#cbb5e7"}
      background={"#19151e"}
      duration={1800}
      size={360}
      spacing={65}
      maxRipples={8}
      autoPlay={true}
      minHeight={400}
      style={{
        "fontSize": 38,
        "letterSpacing": "-.05em"
      }}
    />
  );
}

Using Ripple Field

Set size and duration to control how far each ring spreads and how long it remains visible.

Use maxRipples to limit overlapping rings and autoPlay for movement without pointer input. Place any foreground content in children.

Props

Name	Type	Required	Default	Description
color	string	No	"#cbb5e7"	Colour of the concentric rings.
background	string	No	"#19151e"	Container background colour.
duration	number	No	1800	Ripple lifetime in milliseconds.
size	number	No	360	Maximum ripple diameter in pixels.
spacing	number	No	65	Pointer travel before creating another ripple, in pixels.
maxRipples	number	No	8	Maximum simultaneous ripples, capped at 20.
autoPlay	boolean	No	false	Create ripples automatically while visible. Disabled by default.
children	ReactNode	No	undefined	Optional foreground content.
minHeight	number \| string	No	360	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.