KQ-462 · TIDE/LINE
Tide Line
A tide over the interface: a waterline rises slowly up the page and falls back, the part under water tinted and gently refracted, with foam at the line and wet darkening just above where it has been. A minute per tide.
KQ-462 · TIDE/LINE
Waylight · the harbour board
Five berths, one waterline.
Nothing on this board is fixed. Every draught line answers to the tide outside the window, and the water keeps its own record underneath -- how high it climbed, and how long the sand stays dark after it pulls back.
| Berth | Vessel | Draught | State |
|---|---|---|---|
| B1 | Halyard | 4.2 m | clear |
| B3 | Kittiwake | 5.6 m | aground |
| B5 | Fetch | 3.8 m | waiting |
the water comes, and goes
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/tide-line
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| period / high / low | number | — | Seconds per tide and the high and low lines as fractions of the height. |
| tint / foam / refraction | string · number · number | — | The water's tint, foam strength, and how far the water bends the page. |