Site

Black Hole

Gravitational particle effect with color cycling

black-hole-tw

Customize

Tweak the props live

Animation

Speed1

Zoom1.8

Particle Count13

Orb Size0.75

Opacity1

Visual

Glow0.08

Contrast3

Distance Fade0.35

Mirror Splits2

Warp Enabled

Cursor Interaction

Cursor Intensity1

Background

#0a0a0a

Color

Color Shift R-6

Color Shift G-6

Color Shift B-6

Color Speed0.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)

widthstring | number

Container width

Default:"100%"

heightstring | number

Container height

Default:"100%"

classNamestring

Additional CSS classes for styling

Default:""

childrenReactNode

Content rendered above the effect

Default:undefined

speednumber

Animation speed multiplier (0.1–3.0)

Default:1

zoomnumber

Field of view scale (0.5–5.0)

Default:1.8

particleCountnumber

Number of orbiting particles (1–30)

Default:13

orbSizenumber

Orb radius scale (0.1–2.0)

Default:0.75

glownumber

Glow intensity per particle (0.01–0.5)

Default:0.08

contrastnumber

Final contrast exponent (0.5–10)

Default:3

mirrorSplitsnumber

Kaleidoscope mirror segments (1–8)

Default:2

warpEnabledboolean

Enable kaleidoscope warp effect

Default:true

distanceFadenumber

Distance-based brightness multiplier (0.05–1.0)

Default:0.35

colorShiftRnumber

Color cycle phase for red channel (-10–10)

Default:-6

colorShiftGnumber

Color cycle phase for green channel (-10–10)

Default:-6

colorShiftBnumber

Color cycle phase for blue channel (-10–10)

Default:-6

colorSpeednumber

Per-particle color cycle speed (0.01–2.0)

Default:0.2

backgroundColorstring

Background color in hex format

Default:"#000000"

opacitynumber

Master opacity (0–1)

Default:1

cursorInteractionboolean

Enable cursor interaction for gravitational pull effect near pointer

Default:false

cursorIntensitynumber

Cursor effect strength multiplier (0–3)

Default:1