KQ-486 · PARALLAX/INK
Parallax Ink
The interface with depth from its own type: large, heavy type sits nearer and small text sits farther, and the pointer shifts the layers by their depth, so the page has parallax without a single 3D element. The depth comes from the ink's scale.
KQ-486 · PARALLAX/INK
Basinworks · spillway board
Three gates, and the basin holds its depth.
Nothing on this board is a separate image. The ink is one real texture, split by how solid each mark reads — a heading stays together and drifts near the glass, a line of prose scatters thin under the blur and stays with the page.
Depth
38.42 m38.42 mDischarge
112 m3/s112 m3/sReserve
76%76%| Gate | Head | State |
|---|---|---|
| Crest gate | 4.6 m | open |
| Draw gate | 2.3 m | holding |
| Relief gate | 0.0 m | shut |
nearer things move more
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/parallax-ink
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| shift / layers | number | — | The largest parallax shift in px and how many depth layers the ink is split into. |
| shadow | number | — | A soft shadow under the nearest layer. |