Fog Sphere

A soft, swirling sphere of fog

fog-sphere-tw

Customize

Tweak the props live

Animation

Speed1

Rotation Speed0.1

Ray-March Steps20

Opacity1

Volume

Turbulence Iters10

Turbulence Amp2.5

Turbulence Freq7.5

Turbulence Exp2.1

Sphere Radius2.9

Passthrough0.05

Brightness0.0005

Color

Core Color

#D946EF

Glow Color

#F472B6

Color Mix0.5

Background

#FFFFFF

Invert For Light

Blur1

Blur Resolution1

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

Default:undefined

speednumber

Global animation speed multiplier (0.1–3.0)

Default:1

rotationSpeednumber

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

Default:0.1

rayMarchStepsnumber

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

Default:20

turbulenceItersnumber

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

Default:10

turbulenceAmplitudenumber

Amplitude of each turbulence octave (0–3)

Default:2.5

turbulenceFrequencynumber

Initial turbulence frequency (1–10)

Default:7.5

turbulenceExponentnumber

Per-octave frequency multiplier (1.1–3)

Default:2.1

sphereRadiusnumber

Sphere shell radius in world units (0.5–6)

Default:2.9

passthroughnumber

Empty-space density bias (0.01–0.5)

Default:0.05

brightnessnumber

Final brightness multiplier (0.0001–0.005)

Default:0.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)

Default:0.5

backgroundColorstring

Background fill color in hex format

Default:"#0A0A0A"

invertForLightboolean

Invert the rendered luminance — set true on light backgrounds

Default:false

opacitynumber

Master alpha (0–1)

Default:1

dprnumber

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

Default:1.5

blurnumber

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

Default:1

blurResolutionnumber

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

Default:1