Halftone Wave 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 HalftoneWave from "./HalftoneWave";

export default function Example() {
  return (
    <HalftoneWave
      color={"#abb9d9"}
      background={"#12151f"}
      columns={26}
      rows={15}
      speed={4}
      dotSize={3}
      minHeight={400}
      children={"In a different rhythm."}
      style={{
        "color": "#e8eafa",
        "fontSize": 35,
        "letterSpacing": "-.05em"
      }}
    />
  );
}

Using Halftone Wave

Use columns and rows to choose the density of the halftone field. dotSize determines how much of each cell the dots occupy.

Place foreground content in children and reserve space with minHeight. Lower-density fields suit smaller previews and quieter backgrounds.

Props

Name	Type	Required	Default	Description
color	string	No	"#b4bfdc"	Dot colour.
background	string	No	"#12151f"	Background colour.
columns	number	No	26	Column count, clamped to 4–50.
rows	number	No	15	Row count, clamped to 4–30.
speed	number	No	4	Wave cycle duration in seconds.
dotSize	number	No	3	Dot radius in SVG units.
minHeight	number \| string	No	360	Minimum container height in pixels or a CSS length.
children	ReactNode	No	undefined	Optional content above the halftone pattern.
className	string	No	""	Additional classes merged with component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing, typography, and appearance.