Documentation

GuidesComponents

Fog

Fog that fills the screen and interacts with the mouse

Props

colorAstring
Default:#e0e0e0
Primary fog color
colorBstring
Default:#888888
Secondary fog color — creates variation across the field
seednumber
Default:0
Deterministic starting pattern — different seeds produce different fog configurations
speednumber
Default:1
Simulation speed multiplier
turbulencenumber
Default:1
Ambient motion strength
detailnumber
Default:15
Fine-scale swirling structure — higher values produce more intricate wisps and vortices
blendingnumber
Default:0.3
How much the two colors blend together — 0 behaves like oil & water (colors stay distinct with sharp boundaries), 1 behaves like food coloring (colors fully mix)
mouseInfluencenumber
Default:0.1
Strength of cursor influence — move the cursor to push fog
mouseRadiusnumber
Default:0.1
Radius of cursor influence area
colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
Default:linear
Color space for color interpolation

Usage

<Shader>
  <Fog />
</Shader>
Previous
FlowingGradient
Next
Form3D