Fog Sphere

A soft, swirling sphere of fog

fog-sphere-tw

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