Preferences

Half Tone

Customize

Speed0.7

Scale1.3

Wave Freq1

Dot Size0.45

Opacity1

Angle45

Property	Type	Default	Description
`color`	string	`"#d35af8"`	Hex color of the dots.
`bgColor`	string	`"transparent"`	Background color. Pass "transparent" to render dots only (useful for overlays).
`speed`	number	`0.7`	Animation speed multiplier. 0 = frozen, 3 = very fast.
`direction`	"diagonal" \| "horizontal" \| "vertical" \| "radial" \| "angled" \| "spiral" \| "checker" \| "ripple"	`"angled"`	Wave propagation direction. "angled" uses the angle prop for a custom degree.
`angle`	number	`45`	Rotation in degrees. Only takes effect when direction="angled".
`scale`	number	`1.0`	Grid density. Higher values = more, smaller dots. Range: 0.3–3.
`dotSize`	number	`0.5`	Maximum dot size at wave peak. Range: 0.1–1.0.
`shape`	"circle" \| "square" \| "diamond" \| "triangle" \| "star" \| "cross" \| "ring" \| "hexagon"	`"cross"`	Shape rendered at each grid cell.
`waveFreq`	number	`1.0`	Wave spatial frequency. Higher = tighter wave pattern. Range: 0.1–4.
`opacity`	number	`1.0`	Overall opacity of the effect. Range: 0.1–1.0.

colorstring

Hex color of the dots.

Default"#d35af8"

bgColorstring

Background color. Pass "transparent" to render dots only (useful for overlays).

Default"transparent"

speednumber

Animation speed multiplier. 0 = frozen, 3 = very fast.

Default0.7

Wave propagation direction. "angled" uses the angle prop for a custom degree.

Default"angled"

anglenumber

Rotation in degrees. Only takes effect when direction="angled".

Default45

scalenumber

Grid density. Higher values = more, smaller dots. Range: 0.3–3.

Default1.0

dotSizenumber

Maximum dot size at wave peak. Range: 0.1–1.0.

Default0.5

Shape rendered at each grid cell.

Default"cross"

waveFreqnumber

Wave spatial frequency. Higher = tighter wave pattern. Range: 0.1–4.

Default1.0

opacitynumber

Overall opacity of the effect. Range: 0.1–1.0.

Default1.0

@react-three/fiber 8.0.0three 0.160.0

Crafted withbyMohammad Tasin