KQ-061 · DEPTH/STACK
Depth Stack
A face-on pile of layers browsed along the z-axis — scroll a notch, drag, or arrow through; the active layer sits crisp while the rest recede into a stepped skyline of peeking headers.
KQ-061 · DEPTH/STACK
Core Sample · 5 StrataKQ-061
01TOPSOIL
0.0–1.2 M
Root mat and dark loam - the auger barely notices it.
H130
Stratum · TOPSOIL
KQ-061 · Depth Stack · Layers 5 · P 800 · ζ 0.83
Scroll or drag through the pile - each layer settles crisp.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/depth-stack
Props
- layers
- { id, label, content }[]
- default —
- Three to eight layers, front to deepest.
- index / defaultIndex / onIndexChange
- number / number / (index) => void
- default —
- Controlled or uncontrolled active layer; fires once per settle.
- height
- number
- default 260
- Stage height in px.
- aria-label
- string
- default —
- Required — names the layer stack.
| Prop | Type | Default | Description |
|---|---|---|---|
| layers | { id, label, content }[] | — | Three to eight layers, front to deepest. |
| index / defaultIndex / onIndexChange | number / number / (index) => void | — | Controlled or uncontrolled active layer; fires once per settle. |
| height | number | 260 | Stage height in px. |
| aria-label | string | — | Required — names the layer stack. |