Fog Bank
Slabs composited back to front, each dimming what is behind it, so the bank has an inside rather than a surface.
The scene in this preview is the file shown here. The surrounding demo shell only provides context and is not part of the copied code.
"use client";
import * as React from "react";
import * as THREE from "three";
/**
* Fog Bank — the depth is the effect.
*About this effect
For a weather view, a quiet empty state, or the foot of a long page. Fog painted as a soft grey wash is a flat picture of fog; what makes real fog read as a volume you could walk into is that it has an inside — something near you moves faster than something far away, and whatever sits behind a dense patch is dimmer for it. So this marches a handful of slabs from far to near and lets one depth number per slab drive everything about it: drift speed, feature size, how much light it carries, and how much of what is behind it survives. Tying those together is the whole trick, and choosing them independently produces exactly the flat wash the effect exists to avoid, because parallax is not decoration — in a still frame it is the only cue that says one thing is in front of another. The volume itself comes from one line: each slab multiplies what has already accumulated behind it, so a dense patch genuinely hides what is further away instead of merely being drawn over it. The bank also stays low in the frame on purpose. Fog that reaches the top is a filter over the picture rather than weather in it.
Related effects
- Aurora CurtainRays that arrive where a sampled sheet folds end-on, so no line of code decides where a ray belongs.
- Silk SheenBrightness taken from thread direction rather than position, so the highlight moves because the cloth turned.
- Contour BandsLine width divided by the height gradient per pixel, so the lines crowd on steep ground without ever changing thickness.