Menu
Half Tone
Customize
Speed0.7
Scale1.3
Wave Freq1
Dot Size0.45
Opacity1
Angle45
Props
| 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. |
colorTypestring
Default
"#d35af8"Hex color of the dots.
bgColorTypestring
Default
"transparent"Background color. Pass "transparent" to render dots only (useful for overlays).
speedTypenumber
Default
0.7Animation speed multiplier. 0 = frozen, 3 = very fast.
directionType"diagonal" | "horizontal" | "vertical" | "radial" | "angled" | "spiral" | "checker" | "ripple"
Default
"angled"Wave propagation direction. "angled" uses the angle prop for a custom degree.
angleTypenumber
Default
45Rotation in degrees. Only takes effect when direction="angled".
scaleTypenumber
Default
1.0Grid density. Higher values = more, smaller dots. Range: 0.3–3.
dotSizeTypenumber
Default
0.5Maximum dot size at wave peak. Range: 0.1–1.0.
shapeType"circle" | "square" | "diamond" | "triangle" | "star" | "cross" | "ring" | "hexagon"
Default
"cross"Shape rendered at each grid cell.
waveFreqTypenumber
Default
1.0Wave spatial frequency. Higher = tighter wave pattern. Range: 0.1–4.
opacityTypenumber
Default
1.0Overall opacity of the effect. Range: 0.1–1.0.
Dependencies
@react-three/fiber 8.0.0three 0.160.0
Crafted withbyMohammad Tasin