KQ-1796 · SEA/PRINTOUT
Sea Printout
A strip of continuous-feed paper — sprocket holes punched down both margins, tear-off perforations, green-bar banding and a fold crease every page — rising out of a line printer as it prints a rolling sea in overstruck ASCII, one line per tick: each line is the next slice of three Stokes swells and a short chop, shaded by the slope facing the light with crests drawn as runs of tildes, the darkest tones struck twice a hair out of register. Each line arrives in a chain printer's scattered order and the paper ratchets up on springs.snap, one crisp overshoot per line; moving the pointer sideways sets the wind on springs.drift, leaning the swell and raising whitecaps. It is a real slider: arrow keys, Page Up and Down, Home and End set the wind.
Basinworks · harbour office
Sea state, printed as it rolls in
printing · calm · 4 lines a second
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/sea-printout
Props
- swell
- number
- default 0.6
- Height of the swell, 0 (glassy) to 1 (a heavy roll).
- feed
- number
- default 4
- Lines printed per second (1 to 12).
- ink
- number
- default 0.6
- Ribbon density, 0 (pale and sparse) to 1 (heavy, with more overstrikes).
- wind / defaultWind
- number
- default 0
- The wind, -1 (blowing from the west) to 1 (from the east); controlled or uncontrolled.
- onWindChange
- (wind: number) => void
- default —
- Fires from the pointer or the key that changed the wind, in steps of 0.05.
- chop
- number
- default 0.6
- How choppy the wind makes the sea, 0 to 1: short waves, spray and whitecaps.
- pageLines
- number
- default 24
- Lines between the paper's fold creases (8 to 66).
- bars
- boolean
- default true
- Faint green-bar banding every three lines.
- overstrike
- boolean
- default true
- Overstruck pairs for the darkest tones.
- size
- number
- default 9
- Glyph size in px (7 to 13).
- colors
- { paper?: string; ink?: string; bar?: string }
- default —
- Paper, ribbon and bar colours, any CSS colours; pigments by default, the same in both themes.
- interactive
- boolean
- default true
- The pointer and the keys set the wind.
- paused
- boolean
- default false
- The printer stops (its lamp reads off line).
- sound
- boolean
- default false
- The printer whirs while you work the wind.
- seed
- number
- default 2
- Seeds the sea and the hammers' small errors.
- dpr
- number
- default 2
- Cap on the canvas's device pixel ratio, at most 2.
- label
- string
- default "Wind over the printed sea"
- The slider's accessible name.
- disabled
- boolean
- default false
- The wind holds and the slider says it is disabled; the printer keeps printing.
- className
- string
- default "h-96 w-full"
- Sizes and shapes the printer.
| Prop | Type | Default | Description |
|---|---|---|---|
| swell | number | 0.6 | Height of the swell, 0 (glassy) to 1 (a heavy roll). |
| feed | number | 4 | Lines printed per second (1 to 12). |
| ink | number | 0.6 | Ribbon density, 0 (pale and sparse) to 1 (heavy, with more overstrikes). |
| wind / defaultWind | number | 0 | The wind, -1 (blowing from the west) to 1 (from the east); controlled or uncontrolled. |
| onWindChange | (wind: number) => void | — | Fires from the pointer or the key that changed the wind, in steps of 0.05. |
| chop | number | 0.6 | How choppy the wind makes the sea, 0 to 1: short waves, spray and whitecaps. |
| pageLines | number | 24 | Lines between the paper's fold creases (8 to 66). |
| bars | boolean | true | Faint green-bar banding every three lines. |
| overstrike | boolean | true | Overstruck pairs for the darkest tones. |
| size | number | 9 | Glyph size in px (7 to 13). |
| colors | { paper?: string; ink?: string; bar?: string } | — | Paper, ribbon and bar colours, any CSS colours; pigments by default, the same in both themes. |
| interactive | boolean | true | The pointer and the keys set the wind. |
| paused | boolean | false | The printer stops (its lamp reads off line). |
| sound | boolean | false | The printer whirs while you work the wind. |
| seed | number | 2 | Seeds the sea and the hammers' small errors. |
| dpr | number | 2 | Cap on the canvas's device pixel ratio, at most 2. |
| label | string | "Wind over the printed sea" | The slider's accessible name. |
| disabled | boolean | false | The wind holds and the slider says it is disabled; the printer keeps printing. |
| className | string | "h-96 w-full" | Sizes and shapes the printer. |