Kinetiq

KQ-1540 · ECHO/SOUNDER

Echo Sounder

A survey launch over a chart-recorder echogram drawn in glyph density: the launch rides the top edge after the pointer on springs.glide, pitching with its speed and bobbing on the swell, while the seabed scrolls beneath it, so the record painted under the keel is carried away behind it. At the ping rate a pulse arc descends and writes each depth's return into the column under the beam as it passes — surface clutter, water speckle, shoals as clouds of bright marks, the bed a bold band with a sub-bottom tail and a faint second echo — then the return climbs back. A click, Space or Enter pings at once with a brighter pulse and a highlighted column; it is a slider, so Left and Right steer the launch 2% a press, Page keys 10%, Home and End to the ends.

KQ-1540 · ECHO/SOUNDER

Coldbrook Harbour survey

The basin, sounded as we go

click to ping · arrows steer

Basin line 4

under way · the record runs behind the launch

Open it on the Canvas stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/echo-sounder

Props

depths
readonly number[]
default defaultEchoSounderDepths
Depths along the transect in metres; the line loops. The default is the Coldbrook basin: a shelf, a slope, a ridge, the deep floor and a channel.
shoals
readonly { at: number; depth: number; size?: number; density?: number }[]
default defaultEchoSounderShoals
Shoals along the transect: where (0 to 1), how deep (m), how tall (m, about four times as long) and how thick.
pingRate
number
default 2
Pings a second, 0.25 to 6.
gain
number
default 0.6
Return strength, 0 to 1: bolder bands, a longer sub-bottom tail, more clutter.
depthScale
number
default 60
Metres from the surface to the bottom edge, 10 to 400.
speed
number
default 22
How fast the launch is under way, px a second; 0 holds it over one spot.
units
"m" | "ft"
default "m"
Units for the readout and the scale (depths are given in metres).
scale
boolean
default true
Show the depth scale on the right edge.
value / defaultValue
number
default 0.5
The launch's place across the box, 0 to 1, controlled or uncontrolled.
onValueChange
(value: number) => void
default —
Fires as the pointer or the keys steer the launch, with its new place.
colors
{ water?: string; bed?: string; shoal?: string; boat?: string }
default —
The inks; text tokens by default (accent, foreground, signal, foreground), so both themes keep contrast.
interactive
boolean
default true
The pointer steers, a click pings, the keys steer and ping.
paused
boolean
default false
Hold the launch and the record where they are.
sound
boolean
default false
A blup at each ping you ask for, pitched by depth, and a quieter one when its echo returns.
seed
number
default 1
Seeds the clutter, the speckle and the fish.
dpr
number
default 2
Cap on the canvas's device pixel ratio, at most 2.
onPing
(depth: number, manual: boolean) => void
default —
Fires with the depth under the keel (metres) as each ping's echo comes back, and whether the visitor asked for it.
label
string
default "Echo sounder"
The sounder's accessible name.
disabled
boolean
default false
No steering and no pings from the visitor; the survey runs on.
className
string
default "h-52 w-full"
Sizes and shapes the box.