> ## Documentation Index
> Fetch the complete documentation index at: https://avala.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Timeline Navigation

> Playback controls, frame stepping, and timestamp seeking in the multi-sensor viewer

The multi-sensor viewer provides a unified timeline that keeps all panels synchronized as you navigate through your recording. Whether you are scrubbing through an hour-long drive log or stepping frame-by-frame to verify a single annotation, the timeline controls give you precise access to every moment in the data.

## Playback Controls

The timeline bar runs across the bottom of the viewer. It displays the full duration of the recording and indicates the current playback position.

### Play and Pause

Press **Space** or click the play button to start continuous playback. All panels advance in sync at the selected playback speed. Press **Space** again to pause.

### Playback Speed

Adjust the playback rate to slow down or speed up the recording:

| Speed     | Use Case                                           |
| --------- | -------------------------------------------------- |
| **0.25x** | Inspect fast-moving objects or rapid state changes |
| **0.5x**  | Detailed review of sensor data at reduced speed    |
| **1x**    | Real-time playback at the original recording rate  |
| **2x**    | Quickly scan through long recordings               |
| **4x**    | Fast-forward to find specific events or scenes     |

Click the speed indicator next to the play button to cycle through available rates.

<Tip>
  Use 0.25x or 0.5x playback when reviewing annotations on fast-moving objects. At full speed, it is easy to miss misaligned cuboids or drifting bounding boxes.
</Tip>

## Frame-by-Frame Navigation

For precise inspection, step through the recording one frame at a time.

| Shortcut              | Action                             |
| --------------------- | ---------------------------------- |
| `Left Arrow`          | Step back one frame                |
| `Right Arrow`         | Step forward one frame             |
| `Shift + Left Arrow`  | Skip back 10 frames                |
| `Shift + Right Arrow` | Skip forward 10 frames             |
| `Home`                | Jump to the start of the recording |
| `End`                 | Jump to the end of the recording   |

Each frame step moves all panels to the next message timestamp in the recording. Panels with different publishing rates display the closest message to the current time.

<Tip>
  Frame stepping uses the message timestamps in your recording, not a fixed time interval. If your LiDAR publishes at 10 Hz and cameras at 30 Hz, stepping forward advances to the next available message across all active topics.
</Tip>

## Timestamp Seeking

### Scrubbing

Click and drag anywhere on the timeline bar to scrub through the recording. All panels update continuously as you drag, giving you a visual preview of the data at each position.

### Jump to Timestamp

To navigate to a specific time:

<Steps>
  <Step title="Click the timestamp display">
    The current timestamp is shown in the timeline bar. Click it to open the timestamp input field.
  </Step>

  <Step title="Enter the target time">
    Type the desired timestamp in `HH:MM:SS.mmm` format (hours, minutes, seconds, milliseconds).
  </Step>

  <Step title="Press Enter">
    All panels jump to the specified time. The viewer displays the closest available message to the requested timestamp.
  </Step>
</Steps>

## Panel Synchronization

All panels in the viewer are locked to the same timeline position. When you perform any navigation action -- play, pause, step, scrub, or seek -- every panel updates simultaneously.

This synchronization works across panels with different data rates:

| Panel      | Example Rate | Behavior on Frame Step                                         |
| ---------- | ------------ | -------------------------------------------------------------- |
| **Camera** | 30 Hz        | Shows the frame at or immediately before the current timestamp |
| **LiDAR**  | 10 Hz        | Shows the scan at or immediately before the current timestamp  |
| **IMU**    | 200 Hz       | Shows the reading closest to the current timestamp             |
| **GPS**    | 1 Hz         | Shows the most recent fix at or before the current timestamp   |

The viewer uses message timestamps (not wall-clock time) for synchronization. This means panels stay aligned even if sensors were recorded with different clocks, as long as the timestamps in the MCAP file are consistent.

<Warning>
  If sensors in your recording have significant clock skew (timestamps that differ by more than a few milliseconds for the same real-world moment), panels may appear out of sync. Ensure your recording pipeline synchronizes sensor clocks before capture. See [Recording Best Practices](/docs/visualization/guides/recording-best-practices) for guidance.
</Warning>

## Keyboard Shortcuts Reference

| Shortcut              | Action                               |
| --------------------- | ------------------------------------ |
| `Space`               | Play / Pause                         |
| `Left Arrow`          | Previous frame                       |
| `Right Arrow`         | Next frame                           |
| `Shift + Left Arrow`  | Skip back 10 frames                  |
| `Shift + Right Arrow` | Skip forward 10 frames               |
| `Home`                | Jump to start                        |
| `End`                 | Jump to end                          |
| `+` / `-`             | Zoom in / out (on individual panels) |
| `0`                   | Reset zoom                           |
| `F`                   | Toggle fullscreen                    |

## Next Steps

<CardGroup cols={2}>
  <Card title="" icon="camera-cctv" href="/docs/visualization/guides/multi-camera-setup">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>Multi-Camera Setup</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>Configure multiple camera streams with calibration data for cross-view projection.</p>
  </Card>

  <Card title="" icon="display" href="/docs/visualization/multi-sensor-viewer">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>Multi-Sensor Viewer</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>Full reference for the viewer's 8 panel types, layout system, and auto-detection.</p>
  </Card>

  <Card title="" icon="magnifying-glass" href="/docs/visualization/guides/data-exploration">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>Data Exploration</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>Browse, filter, and search your recordings to find the data you need.</p>
  </Card>

  <Card title="" icon="keyboard" href="/docs/annotation/reference/keyboard-shortcuts">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>Keyboard Shortcuts</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>Complete shortcut reference for the viewer, 3D editor, and annotation tools.</p>
  </Card>
</CardGroup>