127 Components
Atmospheric Fog
BackgroundsVolumetric drifting fog and mist banks powered by a custom WebGL domain-warped FBM shader with multi-layer parallax across a moody moonlit depth gradient.
Multi-Layer Noise Bank
Atmospheric Fog
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/atmospheric-fog.json"
Props
TypeScript props supported by <AtmosphericFog />.
| Prop | Type | Default | Description |
|---|---|---|---|
| density | number | 0.7 | Controls the opacity and volumetric thickness of the mist layers. |
| speed | number | 1.0 | Multiplier for horizontal drift and internal domain-warp evolution speed. |
| fogColor | string | "#CBD5E1" | Hex color for the illuminated mist banks and moonlit scattering. |
| backgroundColor | string | "#090D16" | Hex color for the deep twilight zenith sky gradient. |
| layers | number | 4 | Number of parallax mist banks stacked from foreground to background (1 to 6). |
| children | React.ReactNode | — | Optional foreground UI rendered above the WebGL fog canvas. |
| className | string | — | Additional Tailwind CSS classes for the root container. |
Key Features
- Real-time WebGL fragment shader using nested domain-warped Fractional Brownian Motion (FBM)
- Configurable multi-octave parallax mist layers moving at independent horizon speeds
- Subtle pointer parting displacement that gently parts the mist around the cursor
- Live HUD presets for Moonlit Slate, Nordic Pine, Crimson Dusk, and Golden Dawn palettes
Keyboard & Accessibility
- Low-frequency, smooth motion prevents visual fatigue andvestibular strain
- All HUD controls are keyboard accessible and non-intrusive when custom children are supplied