KQ-454 · SONAR/PING
Sonar Ping
The interface in the dark, revealed by sonar: click and a ring expands from the point, and the page lights where the ring passes, fading back to dark behind it — the edges of things flaring brightest, like returns on a scope. A quiet way to find what is on a page.
KQ-454 · SONAR/PING
Waylight · harbour watch
The board goes dark between soundings.
Nobody reads a still board at 4am. Click the card and a pulse goes out from where you touched it — every berth it crosses reports back in a flash of green, then the dark takes it again.
| Berth | Vessel | ETA | State |
|---|---|---|---|
| B4 | Marram | 06:10 | cleared |
| B2 | Kestrel | 06:45 | holding |
| B7 | Saltmarsh | 07:20 | inbound |
06:10 · tide 3.4 m
ping
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/sonar-ping
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| speed / width / decay | number | — | How fast a ring expands in px/s, its thickness, and how fast the lit page fades behind it. |
| darkness / edges / color | number · number · string | — | How dark the resting page is, how much edges flare, and the ring's colour. |