KQ-132 · DEPTH/FOG

Depth Fog

Drifting banks of fog roll across the panel at parallax depths and part around the pointer to reveal the survey beneath, closing back in the moment you move on.

KQ-132 · DEPTH/FOG

MOOR SURVEY · DRIFTING FOG

KQ-132

MOOR SURVEY · SITE 07

61.2N 4.8W

depth 14.6m · silt bed

marker buoys 3 · anchor set

last dive log 09:41

Visibility fogged

VISIBILITY · FOGGED

Sweep the fog aside to read the moor beneath.

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/depth-fog

Props

PropTypeDefaultDescription
childrenReactNodeThe content revealed behind the fog (real DOM).
onClear(clearing) => voidFires as the pointer starts and stops parting the fog.
heightnumber300Panel height in px.