Black Hole
Gravitational particle effect with color cycling
black-hole-tw
Customize
Animation
1
1.8
13
0.75
1
Visual
0.08
3
0.35
2
1
Color
-6
-6
-6
0.2
Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | string | number | "100%" | Container width |
| height | string | number | "100%" | Container height |
| className | string | "" | Additional CSS classes for styling |
| children | ReactNode | undefined | Content rendered above the effect |
| speed | number | 1 | Animation speed multiplier (0.1–3.0) |
| zoom | number | 1.8 | Field of view scale (0.5–5.0) |
| particleCount | number | 13 | Number of orbiting particles (1–30) |
| orbSize | number | 0.75 | Orb radius scale (0.1–2.0) |
| glow | number | 0.08 | Glow intensity per particle (0.01–0.5) |
| contrast | number | 3 | Final contrast exponent (0.5–10) |
| mirrorSplits | number | 2 | Kaleidoscope mirror segments (1–8) |
| warpEnabled | boolean | true | Enable kaleidoscope warp effect |
| distanceFade | number | 0.35 | Distance-based brightness multiplier (0.05–1.0) |
| colorShiftR | number | -6 | Color cycle phase for red channel (-10–10) |
| colorShiftG | number | -6 | Color cycle phase for green channel (-10–10) |
| colorShiftB | number | -6 | Color cycle phase for blue channel (-10–10) |
| colorSpeed | number | 0.2 | Per-particle color cycle speed (0.01–2.0) |
| backgroundColor | string | "#000000" | Background color in hex format |
| opacity | number | 1 | Master opacity (0–1) |
| cursorInteraction | boolean | false | Enable cursor interaction for gravitational pull effect near pointer |
| cursorIntensity | number | 1 | Cursor effect strength multiplier (0–3) |