# View components

**Every registered component, each with a minimal `.dreamrc` and its live
render** — this page answers "what do I *get* if I bind this?". Config keys
and the payload each slot asks for are in the
[reference](/dataset-viz/reference.md#view-components);
full multi-component compositions in the [gallery](/dataset-viz/gallery.md).
Each YAML below is complete and standalone — one component, one real public
dataset, first episode only. **Interaction rule**: every component whose
x-axis is time (videos, frames, depth, charts, bands, the timeline) scrubs
the shared cursor on hover — hover any demo to move it. The 3D views leave
the pointer to orbiting, so their demos pair a chart or timeline sibling as
the time source.

## videoStack

Camera videos as a tile grid, each tile at its video's own aspect ratio.
`overlays` is the one slot that draws two different things, so each entry
says which with `as` — here a COCO file `as: keypoints` becomes a hand
skeleton and a WebVTT file `as: segments` becomes captions:

## frameStack

Per-frame image sequences (cameras stored one frame per chunk) — each tile
byte-ranges ONLY the frame under the shared cursor; scrub to step. JPEG-XL
frames need Safari 17+ or Chrome's JXL flag:

## depthStack

Per-frame depth maps colorized on the fly — turbo by default (`colormap: gray`
for grayscale), each frame mapped over its own valid min/max unless pinned
with `min`/`max`; 0/invalid readings stay transparent. The corner chip shows
the mapped range in metres when the format knows the depth scale:

## pointCloud

Per-frame 3D point clouds as an orbitable scene — per-point color when the
data carries rgb, camera auto-fit from the first frame, playback follows the
shared cursor. Default `up: z` (robot-lab convention); `up: y` for y-up
clouds:

## lineChart

Time series with a synced cursor — one `series` entry per trace,
`[feature, dim]` drills into one dimension, `label` / `color` / `dash`
style it:

## trajectory2d

Planar series as a top-down xy path — for 2-dim position series (pusht's
`action` target position) a spatial path reads far better than a line chart.
Hover snaps the shared cursor to the nearest sample; the thick trail is the
last 1.5 s; `invertY: false` flips to math convention:

## timeline

Anything you bind here is read as `segments` — tasks, subtasks, actions,
phases, a `.vtt` file, an index column with its label table — and drawn as
labelled blocks on a ruler. Hover to scrub every panel in the episode:

## bandTrack

Discrete series (gripper open/close, stage indices, success flags) as
categorical color bands — one row per bound column, one colored rect per
contiguous equal-value run, a value→color legend below. Columns busier
than `maxLevels` (12 distinct values) get a one-line "use lineChart"
note instead of a band:

## metaPanel

The episode header: name, duration, frame count, fps, the dataset's task
strings — plus a free-text `note`:

## fieldsCatalog

The episode's inventory as a table — every field's address plus the `dtype`,
`shape` and `names` the container reported, with nothing concluded from them.
The exploration component: ship it first when you don't know what a dataset
holds, decide what the columns are, write the bindings, then replace it:

## recon3d

The animated 3D scene, bound through two slots: `geometry` is the static
scene, and `tracks` is the per-frame motion that moves it — a track binds to the glTF
node whose name matches its ref. All three track kinds are parquet tables of
numbers, so each entry names the one it is. Orbit with the mouse; playback
follows the shared cursor. The motion trail is the **future** — the next
`trail.ahead` seconds (default 1) of each object's path, and nothing more:
it runs out exactly when the clip does. In robot learning the question at
time t is what is about to happen, so that is the segment that glows
(`trail.behind` opts into a dim past tail):

---

Host apps can grow this registry — `registerComponent({ name, component })`
makes a new name available to every `.dreamrc` the app renders
([TypeScript API](/dataset-viz/spec.md#typescript-api)).