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

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

children: ReactNode; default —; The content revealed behind the fog (real DOM).
onClear: (clearing) => void; default —; Fires as the pointer starts and stops parting the fog.
height: number; default 300; Panel height in px.

Prop	Type	Default	Description
children	ReactNode	—	The content revealed behind the fog (real DOM).
onClear	(clearing) => void	—	Fires as the pointer starts and stops parting the fog.
height	number	300	Panel height in px.