Fog
Fog that fills the screen and interacts with the mouse
Fog that fills the screen and interacts with the mouse
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colorA | color | #e0e0e0 | Primary fog color |
| colorB | color | #888888 | Secondary fog color - creates variation across the field |
| seed | range | 0 | Deterministic starting pattern - different seeds produce different fog configurations |
| speed | range | 1 | Simulation speed multiplier |
| turbulence | range | 1 | Ambient motion strength |
| detail | range | 15 | Fine-scale swirling structure - higher values produce more intricate wisps and vortices |
| blending | range | 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) |
| mouseInfluence | range | 0.1 | Strength of cursor influence - move the cursor to push fog |
| mouseRadius | range | 0.1 | Radius of cursor influence area |
| colorSpace | "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch" | linear | Color space for color interpolation |
Usage
vue
<Shader>
<Fog />
</Shader>