KQ-1552 · CREST/READER
Crest Reader
A list read off the sea: the rows lie on a gently rolling surface in perspective, the current line riding the crest of a swell — lifted, standing up to face you, full size and sharp — while the lines to come lie ahead on the water, smaller, lying back and softer toward a hazy horizon, and the line just read sinks into the trough below, with a slow swell always passing through. The crest is one continuous value that the wheel and a drag move 1:1; a release projects the throw and settles on a line on springs.glide with its velocity, a tap carries a row to the crest and the arrow keys glide from line to line. It is a listbox whose active option is the crest line, and the wheel hands the scroll back to the page at either end.
Basinworks 4.2 · release notes
line 2 of 12 · scroll or use the arrow keys
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/crest-reader
Props
- lines
- CrestLine[]
- default defaultCrestLines
- The rows: a string, or `{ text, meta? }` with a short tag shown before the text.
- value / defaultValue
- number
- default 0
- The line on the crest.
- onValueChange
- (index: number) => void
- default —
- From the wheel, drag, tap or key that carried a new line onto the crest.
- swell
- number
- default 0.6
- How high the crest stands and how far the rest sink, 0 to 1.
- blur
- number
- default 1.5
- Blur of the farthest rows, px.
- lineGap
- number
- default 0.9
- Gap between rows on the surface, em.
- tilt
- number
- default 62
- Angle of the sea's surface, degrees: low lies flat and far, high stands rows up.
- crestAt
- number
- default 0.62
- Where the crest sits, as a fraction of the height.
- speed
- number
- default 1
- Speed of the slow swell passing through, 0 (still) to 2.
- height
- number
- default 420
- The stage's height, px.
- wheel
- boolean
- default true
- The mouse wheel moves the crest; at either end it scrolls the page again.
- align
- "center" | "start"
- default "center"
- Row alignment.
- paused
- boolean
- default false
- Hold the swell still.
- disabled
- boolean
- default false
- No input.
- label
- string
- default "Lines"
- Accessible name of the list.
- className
- string
- default —
- Width and type; the gap is in em of this font size.
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | CrestLine[] | defaultCrestLines | The rows: a string, or `{ text, meta? }` with a short tag shown before the text. |
| value / defaultValue | number | 0 | The line on the crest. |
| onValueChange | (index: number) => void | — | From the wheel, drag, tap or key that carried a new line onto the crest. |
| swell | number | 0.6 | How high the crest stands and how far the rest sink, 0 to 1. |
| blur | number | 1.5 | Blur of the farthest rows, px. |
| lineGap | number | 0.9 | Gap between rows on the surface, em. |
| tilt | number | 62 | Angle of the sea's surface, degrees: low lies flat and far, high stands rows up. |
| crestAt | number | 0.62 | Where the crest sits, as a fraction of the height. |
| speed | number | 1 | Speed of the slow swell passing through, 0 (still) to 2. |
| height | number | 420 | The stage's height, px. |
| wheel | boolean | true | The mouse wheel moves the crest; at either end it scrolls the page again. |
| align | "center" | "start" | "center" | Row alignment. |
| paused | boolean | false | Hold the swell still. |
| disabled | boolean | false | No input. |
| label | string | "Lines" | Accessible name of the list. |
| className | string | — | Width and type; the gap is in em of this font size. |