Fog Sphere

A soft, swirling sphere of fog

fog-sphere-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

A little mystery goes a long way

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

Get startedBrowse library

9:41

A little mystery goes a long way

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

Get startedBrowse library

A little mystery goes a long way

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

Get startedLearn more

Customize

Speed

1.0

Rotation Speed

0.10

Ray-March Steps

Opacity

1.00

Turbulence Iters

Turbulence Amp

2.50

Turbulence Freq

7.5

Turbulence Exp

2.10

Sphere Radius

2.9

Passthrough

0.05

Brightness

0.0005

Core Color

Glow Color

Color Mix

0.50

Background

Invert For Light

Blur

1.0

Blur Resolution

1.00

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`	Global animation speed multiplier (0.1–3.0)
`rotationSpeed`	number	`0.1`	Camera-orbit speed in radians/second at speed=1 (0–1)
`rayMarchSteps`	number	`20`	Ray-march steps per pixel; lower is faster (8–32)
`turbulenceIters`	number	`10`	Turbulence iterations folded into the warp field (2–10)
`turbulenceAmplitude`	number	`2.5`	Amplitude of each turbulence octave (0–3)
`turbulenceFrequency`	number	`7.5`	Initial turbulence frequency (1–10)
`turbulenceExponent`	number	`2.1`	Per-octave frequency multiplier (1.1–3)
`sphereRadius`	number	`2.9`	Sphere shell radius in world units (0.5–6)
`passthrough`	number	`0.05`	Empty-space density bias (0.01–0.5)
`brightness`	number	`0.0005`	Final brightness multiplier (0.0001–0.005)
`coreColor`	string	`"#D946EF"`	Inner / dense color in hex format
`glowColor`	string	`"#F472B6"`	Outer / glow color in hex format
`colorMix`	number	`0.5`	Mix factor between core and glow colors (0–1)
`backgroundColor`	string	`"#0A0A0A"`	Background fill color in hex format
`invertForLight`	boolean	`false`	Invert the rendered luminance: set true on light backgrounds
`opacity`	number	`1`	Master alpha (0–1)
`dpr`	number	`1.5`	Maximum device pixel ratio (caps GPU work) (1–3)
`blur`	number	`1`	Post-process Gaussian blur in pixels; 0 disables the off-screen pass (0–12)
`blurResolution`	number	`1`	Off-screen render scale used by the blur pass (0.25–1)

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

Defaultundefined

speednumber

Global animation speed multiplier (0.1–3.0)

Default1

rotationSpeednumber

Camera-orbit speed in radians/second at speed=1 (0–1)

Default0.1

rayMarchStepsnumber

Ray-march steps per pixel; lower is faster (8–32)

Default20

turbulenceItersnumber

Turbulence iterations folded into the warp field (2–10)

Default10

turbulenceAmplitudenumber

Amplitude of each turbulence octave (0–3)

Default2.5

turbulenceFrequencynumber

Initial turbulence frequency (1–10)

Default7.5

turbulenceExponentnumber

Per-octave frequency multiplier (1.1–3)

Default2.1

sphereRadiusnumber

Sphere shell radius in world units (0.5–6)

Default2.9

passthroughnumber

Empty-space density bias (0.01–0.5)

Default0.05

brightnessnumber

Final brightness multiplier (0.0001–0.005)

Default0.0005

coreColorstring

Inner / dense color in hex format

Default"#D946EF"

glowColorstring

Outer / glow color in hex format

Default"#F472B6"

colorMixnumber

Mix factor between core and glow colors (0–1)

Default0.5

backgroundColorstring

Background fill color in hex format

Default"#0A0A0A"

invertForLightboolean

Invert the rendered luminance: set true on light backgrounds

Defaultfalse

opacitynumber

Master alpha (0–1)

Default1

dprnumber

Maximum device pixel ratio (caps GPU work) (1–3)

Default1.5

blurnumber

Post-process Gaussian blur in pixels; 0 disables the off-screen pass (0–12)

Default1

blurResolutionnumber

Off-screen render scale used by the blur pass (0.25–1)

Default1

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

Global animation speed multiplier (0.1–3.0)

rotationSpeed

number

0.1

Camera-orbit speed in radians/second at speed=1 (0–1)

rayMarchSteps

number

20

Ray-march steps per pixel; lower is faster (8–32)

turbulenceIters

number

10

Turbulence iterations folded into the warp field (2–10)

turbulenceAmplitude

number

2.5

Amplitude of each turbulence octave (0–3)

turbulenceFrequency

number

7.5

Initial turbulence frequency (1–10)

turbulenceExponent

number

2.1

Per-octave frequency multiplier (1.1–3)

sphereRadius

number

2.9

Sphere shell radius in world units (0.5–6)

passthrough

number

0.05

Empty-space density bias (0.01–0.5)

brightness

number

0.0005

Final brightness multiplier (0.0001–0.005)

coreColor

string

"#D946EF"

Inner / dense color in hex format

glowColor

string

"#F472B6"

Outer / glow color in hex format

colorMix

number

0.5

Mix factor between core and glow colors (0–1)

backgroundColor

string

"#0A0A0A"

Background fill color in hex format

invertForLight

boolean

false

Invert the rendered luminance: set true on light backgrounds

opacity

number

1

Master alpha (0–1)

dpr

number

1.5

Maximum device pixel ratio (caps GPU work) (1–3)

blur

number

1

Post-process Gaussian blur in pixels; 0 disables the off-screen pass (0–12)

blurResolution

number

1

Off-screen render scale used by the blur pass (0.25–1)