Dot 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 DotField from "./DotField";

export default function Example() {
  return (
    <DotField
      color={"#887e9c"}
      activeColor={"#f1bd98"}
      background={"#131019"}
      spacing={20}
      dotSize={1.5}
      radius={150}
      strength={32}
      speed={0.6}
      minHeight={420}
    />
  );
}

Using Dot Field

Use spacing and dotSize together to balance density and contrast. minHeight defines the area in which the dot field responds.

radius changes the pointer's area of influence, while strength changes how far dots move. Start with a modest strength behind readable foreground content.

Props

Name	Type	Required	Default	Description
color	string	No	"#77708d"	Resting dot colour.
activeColor	string	No	"#edbb98"	Dot colour inside the pointer radius.
background	string	No	"#131019"	CSS background behind the dots.
spacing	number	No	22	Distance between dots in pixels; very large canvases use a capped dot count.
dotSize	number	No	1.4	Dot radius in pixels.
radius	number	No	150	Pointer influence radius in pixels.
strength	number	No	28	Maximum displacement in pixels.
speed	number	No	.6	Idle wave speed; 0 keeps the wave still.
minHeight	number \| string	No	340	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.