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; full multi-component compositions in the gallery. 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).