Black Hole

Smoky light bending around a black hole and its photon ring

black-hole-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Impossible to look away

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

9:41

Impossible to look away

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

Impossible to look away

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedLearn more

Customize

Background

Tint

Core Color

Edge Color

Speed

1.0

Zoom

1.8

Particles

Orb Size

0.75

Glow

0.08

Contrast

3.0

Distance Fade

0.35

Mirror Splits

Warp

Color Shift R

-6.0

Color Shift G

-6.0

Color Shift B

-6.0

Color Speed

0.20

Bloom

1.00

Photon Ring

1.00

Opacity

1.00

Cursor Interaction

Cursor Intensity

1.0

IntroPaused

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Width of the component.
`height`	string \| number	`"100%"`	Height of the component.
`speed`	number	`1`	Speed of the orbiting light.
`zoom`	number	`1.8`	Field of view. Higher values show more of the field and a smaller hole.
`particleCount`	number	`13`	Number of orbiting particles, from 1 to 30.
`orbSize`	number	`0.75`	Radius of the particle orbits.
`glow`	number	`0.08`	Brightness of each particle.
`contrast`	number	`3`	Curve applied to the light. Higher values give tighter, brighter bands.
`mirrorSplits`	number	`2`	Number of mirrored segments in the warp.
`warpEnabled`	boolean	`true`	Bends the light into the mirrored lensing warp.
`distanceFade`	number	`0.35`	How quickly the light gathers away from the centre.
`colorShiftR`	number	`-6`	Phase of the red channel in the colour cycle.
`colorShiftG`	number	`-6`	Phase of the green channel in the colour cycle.
`colorShiftB`	number	`-6`	Phase of the blue channel in the colour cycle.
`colorSpeed`	number	`0.2`	Speed of the colour cycle.
`colors`	[string, string]	`undefined`	Tints the light from the brightest core to the faint edges. Replaces the colour cycle when set.
`backgroundColor`	string	`"#000000"`	Background colour. Use transparent to show the page behind. Light backgrounds switch to an ink rendering.
`opacity`	number	`1`	Overall opacity, from 0 to 1.
`bloom`	number	`1`	Soft glow around the brightest light, from 0 to 4.
`ringIntensity`	number	`1`	Brightness of the thin photon ring at the sphere's edge. It glows brightest where the light passes behind.
`cursorInteraction`	boolean	`true`	Hovering quickens the orbits. A click makes the hole gulp: the orbits contract and spring back.
`cursorIntensity`	number	`1`	Strength of the hover and the gulp, from 0 to 3.
`intro`	boolean	`true`	Fades the light in and spins the orbits into place.
`paused`	boolean	`false`	Stops the motion. Reduced-motion users get a still frame.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`children`	ReactNode	`undefined`	Content rendered above the effect.
`ref`	{ gulp, replay }	`undefined`	gulp(strength?) triggers a gulp from code. replay() plays the intro again.
`className`	string	`undefined`	Classes for the root element.
`style`	CSSProperties	`undefined`	Inline styles for the root element.

widthstring | number

Width of the component.

Default"100%"

heightstring | number

Height of the component.

Default"100%"

speednumber

Speed of the orbiting light.

Default1

zoomnumber

Field of view. Higher values show more of the field and a smaller hole.

Default1.8

particleCountnumber

Number of orbiting particles, from 1 to 30.

Default13

orbSizenumber

Radius of the particle orbits.

Default0.75

glownumber

Brightness of each particle.

Default0.08

contrastnumber

Curve applied to the light. Higher values give tighter, brighter bands.

Default3

mirrorSplitsnumber

Number of mirrored segments in the warp.

Default2

warpEnabledboolean

Bends the light into the mirrored lensing warp.

Defaulttrue

distanceFadenumber

How quickly the light gathers away from the centre.

Default0.35

colorShiftRnumber

Phase of the red channel in the colour cycle.

Default-6

colorShiftGnumber

Phase of the green channel in the colour cycle.

Default-6

colorShiftBnumber

Phase of the blue channel in the colour cycle.

Default-6

colorSpeednumber

Speed of the colour cycle.

Default0.2

colors[string, string]

Tints the light from the brightest core to the faint edges. Replaces the colour cycle when set.

Defaultundefined

backgroundColorstring

Background colour. Use transparent to show the page behind. Light backgrounds switch to an ink rendering.

Default"#000000"

opacitynumber

Overall opacity, from 0 to 1.

Default1

bloomnumber

Soft glow around the brightest light, from 0 to 4.

Default1

ringIntensitynumber

Brightness of the thin photon ring at the sphere's edge. It glows brightest where the light passes behind.

Default1

cursorInteractionboolean

Hovering quickens the orbits. A click makes the hole gulp: the orbits contract and spring back.

Defaulttrue

cursorIntensitynumber

Strength of the hover and the gulp, from 0 to 3.

Default1

introboolean

Fades the light in and spins the orbits into place.

Defaulttrue

pausedboolean

Stops the motion. Reduced-motion users get a still frame.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

childrenReactNode

Content rendered above the effect.

Defaultundefined

ref{ gulp, replay }

gulp(strength?) triggers a gulp from code. replay() plays the intro again.

Defaultundefined

classNamestring

Classes for the root element.

Defaultundefined

styleCSSProperties

Inline styles for the root element.

Defaultundefined

Name

Type

Default

Description

width

string | number

"100%"

Width of the component.

height

string | number

"100%"

Height of the component.

speed

number

1

Speed of the orbiting light.

zoom

number

1.8

Field of view. Higher values show more of the field and a smaller hole.

particleCount

number

13

Number of orbiting particles, from 1 to 30.

orbSize

number

0.75

Radius of the particle orbits.

glow

number

0.08

Brightness of each particle.

contrast

number

3

Curve applied to the light. Higher values give tighter, brighter bands.

mirrorSplits

number

2

Number of mirrored segments in the warp.

warpEnabled

boolean

true

Bends the light into the mirrored lensing warp.

distanceFade

number

0.35

How quickly the light gathers away from the centre.

colorShiftR

number

-6

Phase of the red channel in the colour cycle.

colorShiftG

number

-6

Phase of the green channel in the colour cycle.

colorShiftB

number

-6

Phase of the blue channel in the colour cycle.

colorSpeed

number

0.2

Speed of the colour cycle.

colors

[string, string]

undefined

Tints the light from the brightest core to the faint edges. Replaces the colour cycle when set.

backgroundColor

string

"#000000"

Background colour. Use transparent to show the page behind. Light backgrounds switch to an ink rendering.

opacity

number

1

Overall opacity, from 0 to 1.

bloom

number

1

Soft glow around the brightest light, from 0 to 4.

ringIntensity

number

1

Brightness of the thin photon ring at the sphere's edge. It glows brightest where the light passes behind.

cursorInteraction

boolean

true

Hovering quickens the orbits. A click makes the hole gulp: the orbits contract and spring back.

cursorIntensity

number

1

Strength of the hover and the gulp, from 0 to 3.

intro

boolean

true

Fades the light in and spins the orbits into place.

paused

boolean

false

Stops the motion. Reduced-motion users get a still frame.

dpr

number

2

Maximum device pixel ratio for the canvas.

children

ReactNode

undefined

Content rendered above the effect.

ref

{ gulp, replay }

undefined

gulp(strength?) triggers a gulp from code. replay() plays the intro again.

className

string

undefined

Classes for the root element.

style

CSSProperties

undefined

Inline styles for the root element.