Fog Drift
NewPro
Three layers of fractal noise fog that drift slowly on a transparent canvas, so they can sit over anything. The pointer clears a soft gap.
Customize
#ff784f
0.55
1
1
When to use it
- Title screens for horror and mystery games
- Over a hero image, to add depth to a landscape or a product shot
- The bottom of a dark landing page, with fog rising toward the footer
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- WebGL canvas
- Reduced motion
- Respected
- Lines of code
- 311
Installation
Fog Drift is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy fog-drift.tsx into components/ui and run npm install motion.
Usage
import { FogDrift } from "@/components/ui/fog-drift";
<section className="relative h-[600px] bg-ink-950">
<FogDrift color="#ff784f" density={0.55} />
</section>Props
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| color | string | "#ff784f" | Fog color as a hex value. |
| density | number | 0.55 | How thick the fog is, from 0 (thin wisps) to 1 (nearly solid). |
| speed | number | 1 | Drift speed multiplier. |
| scale | number | 1 | Size of the fog banks. Larger values make broader shapes. |
| interactive | boolean | true | Clear a soft gap in the fog around the pointer. |
| quality | number | 1 | Render resolution from 0.25 to 1. Lower is cheaper. |
| className | string | — | Extra classes for the wrapper. It fills its nearest positioned parent. |
Dependencies: motion