Specter Orb

A ghostly raymarched orb wrapped in drifting smoke

specter-orb-tw

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