Fog

Fog that fills the screen and interacts with the mouse

Props

  • colorA

    Primary fog color

    Type
    string
    Default
    #e0e0e0

  • colorB

    Secondary fog color — creates variation across the field

    Type
    string
    Default
    #888888

  • seed

    Deterministic starting pattern — different seeds produce different fog configurations

    Type
    number
    Default
    0

  • speed

    Simulation speed multiplier

    Type
    number
    Default
    1

  • turbulence

    Ambient motion strength

    Type
    number
    Default
    1

  • detail

    Fine-scale swirling structure — higher values produce more intricate wisps and vortices

    Type
    number
    Default
    15

  • blending

    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)

    Type
    number
    Default
    0.3

  • mouseInfluence

    Strength of cursor influence — move the cursor to push fog

    Type
    number
    Default
    0.1

  • mouseRadius

    Radius of cursor influence area

    Type
    number
    Default
    0.1

  • colorSpace

    Color space for color interpolation

    Type
    "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
    Default
    linear

Usage

<Shader>
  <Fog />
</Shader>