Specter Orb

A ghostly orb wrapped in drifting smoke

specter-orb-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

A little magic in the dark

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

Get startedBrowse library

9:41

A little magic in the dark

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

Get startedBrowse library

A little magic in the dark

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

Get startedLearn more

Customize

Radius

0.35

Turbulence

0.30

Noise Scale

1.00

Flow Speed

0.30

Octaves

Roughness

0.50

Steps

Stride

1.00

Zoom

1.00

Mask Radius

1.00

Mask Feather

0.020

Rim Strength

0.75

Rim Power

3.0

Specular Strength

1.00

Specular Sharpness

Glow Strength

1.00

Glow Falloff

Gamma

1.25

Brightness

1.00

Opacity

1.00

Cursor Light

0.35

Key Color

Fill Color

Ambient Color

Specular A

Specular B

Background

Cursor InteractionAdaptive QualityPaused

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Width of the container.
`height`	string \| number	`"100%"`	Height of the container.
`className`	string	`-`	Extra classes for the container.
`children`	ReactNode	`-`	Content stacked above the orb.
`radius`	number	`0.35`	Radius of the smooth core before displacement.
`turbulence`	number	`0.3`	How far the noise pushes the surface outward.
`noiseScale`	number	`1`	Frequency of the displacement field.
`flowSpeed`	number	`0.3`	Speed the field drifts through the orb.
`octaves`	number	`3`	Octaves baked into the displacement field.
`roughness`	number	`0.5`	Amplitude falloff between octaves.
`lacunarity`	number	`2`	Frequency gain between octaves.
`steps`	number	`32`	Maximum ray march iterations.
`stride`	number	`1`	Fraction of each distance estimate to advance. Lower is safer, higher is faster.
`zoom`	number	`1`	Scales the orb inside the frame.
`maskRadius`	number	`1`	Radius of the circular cutout.
`maskFeather`	number	`0.02`	Softness of the circular cutout.
`colorA`	string	`"#4da6ff"`	Key light color.
`colorB`	string	`"#9959ff"`	Fill light color.
`colorC`	string	`"#6680ff"`	Ambient wrap color.
`rimStrength`	number	`0.75`	Strength of the two opposing rim lights.
`rimPower`	number	`3`	Tightness of the rim falloff.
`specularColorA`	string	`"#669fff"`	Color of the primary highlight.
`specularColorB`	string	`"#998fff"`	Color of the secondary highlight.
`specularStrength`	number	`1`	Strength of both highlights.
`specularSharpness`	number	`12`	Tightness of the highlights.
`glowStrength`	number	`1`	Strength of the halo around the silhouette.
`glowFalloff`	number	`32`	Tightness of the halo falloff.
`gamma`	number	`1.25`	Contrast curve applied at the end.
`brightness`	number	`1`	Overall gain.
`opacity`	number	`1`	Master alpha of the canvas.
`backgroundColor`	string	`"#0a0a0a"`	Fill behind the orb. Accepts "transparent".
`cursorInteraction`	boolean	`true`	Let the pointer swing the lighting.
`cursorLight`	number	`0.35`	How far the pointer swings the lighting.
`adaptiveQuality`	boolean	`true`	Drop resolution when the frame rate falls short.
`targetFps`	number	`60`	Frame rate the adaptive pass aims for.
`dpr`	number	`2`	Upper bound on device pixel ratio.
`paused`	boolean	`false`	Hold the animation still.

widthstring | number

Width of the container.

Default"100%"

heightstring | number

Height of the container.

Default"100%"

classNamestring

Extra classes for the container.

Default-

childrenReactNode

Content stacked above the orb.

Default-

radiusnumber

Radius of the smooth core before displacement.

Default0.35

turbulencenumber

How far the noise pushes the surface outward.

Default0.3

noiseScalenumber

Frequency of the displacement field.

Default1

flowSpeednumber

Speed the field drifts through the orb.

Default0.3

octavesnumber

Octaves baked into the displacement field.

Default3

roughnessnumber

Amplitude falloff between octaves.

Default0.5

lacunaritynumber

Frequency gain between octaves.

Default2

stepsnumber

Maximum ray march iterations.

Default32

stridenumber

Fraction of each distance estimate to advance. Lower is safer, higher is faster.

Default1

zoomnumber

Scales the orb inside the frame.

Default1

maskRadiusnumber

Radius of the circular cutout.

Default1

maskFeathernumber

Softness of the circular cutout.

Default0.02

colorAstring

Key light color.

Default"#4da6ff"

colorBstring

Fill light color.

Default"#9959ff"

colorCstring

Ambient wrap color.

Default"#6680ff"

rimStrengthnumber

Strength of the two opposing rim lights.

Default0.75

rimPowernumber

Tightness of the rim falloff.

Default3

specularColorAstring

Color of the primary highlight.

Default"#669fff"

specularColorBstring

Color of the secondary highlight.

Default"#998fff"

specularStrengthnumber

Strength of both highlights.

Default1

specularSharpnessnumber

Tightness of the highlights.

Default12

glowStrengthnumber

Strength of the halo around the silhouette.

Default1

glowFalloffnumber

Tightness of the halo falloff.

Default32

gammanumber

Contrast curve applied at the end.

Default1.25

brightnessnumber

Overall gain.

Default1

opacitynumber

Master alpha of the canvas.

Default1

backgroundColorstring

Fill behind the orb. Accepts "transparent".

Default"#0a0a0a"

cursorInteractionboolean

Let the pointer swing the lighting.

Defaulttrue

cursorLightnumber

How far the pointer swings the lighting.

Default0.35

adaptiveQualityboolean

Drop resolution when the frame rate falls short.

Defaulttrue

targetFpsnumber

Frame rate the adaptive pass aims for.

Default60

dprnumber

Upper bound on device pixel ratio.

Default2

pausedboolean

Hold the animation still.

Defaultfalse

Name

Type

Default

Description

width

string | number

"100%"

Width of the container.

height

string | number

"100%"

Height of the container.

className

string

-

Extra classes for the container.

children

ReactNode

-

Content stacked above the orb.

radius

number

0.35

Radius of the smooth core before displacement.

turbulence

number

0.3

How far the noise pushes the surface outward.

noiseScale

number

1

Frequency of the displacement field.

flowSpeed

number

0.3

Speed the field drifts through the orb.

octaves

number

3

Octaves baked into the displacement field.

roughness

number

0.5

Amplitude falloff between octaves.

lacunarity

number

2

Frequency gain between octaves.

steps

number

32

Maximum ray march iterations.

stride

number

1

Fraction of each distance estimate to advance. Lower is safer, higher is faster.

zoom

number

1

Scales the orb inside the frame.

maskRadius

number

1

Radius of the circular cutout.

maskFeather

number

0.02

Softness of the circular cutout.

colorA

string

"#4da6ff"

Key light color.

colorB

string

"#9959ff"

Fill light color.

colorC

string

"#6680ff"

Ambient wrap color.

rimStrength

number

0.75

Strength of the two opposing rim lights.

rimPower

number

3

Tightness of the rim falloff.

specularColorA

string

"#669fff"

Color of the primary highlight.

specularColorB

string

"#998fff"

Color of the secondary highlight.

specularStrength

number

1

Strength of both highlights.

specularSharpness

number

12

Tightness of the highlights.

glowStrength

number

1

Strength of the halo around the silhouette.

glowFalloff

number

32

Tightness of the halo falloff.

gamma

number

1.25

Contrast curve applied at the end.

brightness

number

1

Overall gain.

opacity

number

1

Master alpha of the canvas.

backgroundColor

string

"#0a0a0a"

Fill behind the orb. Accepts "transparent".

cursorInteraction

boolean

true

Let the pointer swing the lighting.

cursorLight

number

0.35

How far the pointer swings the lighting.

adaptiveQuality

boolean

true

Drop resolution when the frame rate falls short.

targetFps

number

60

Frame rate the adaptive pass aims for.

dpr

number

2

Upper bound on device pixel ratio.

paused

boolean

false

Hold the animation still.