# DualView Comparison Modes

DualView ships eleven comparison modes. Switch between the primary modes with number keys `1`-`7`, or use the mode selector in the header. Every mode shares the same media library, timeline, zoom/pan state, and export pipeline.

Mode IDs below are the values accepted by the `mode` URL parameter (see [url-parameters.md](https://www.dualview.ai/docs/url-parameters.md)).

## Modes

### Slider (`slider`)
Before/after wipe with a draggable divider. The divider can be vertical (drag left-right) or horizontal (drag up-down). Press `H` to temporarily hide the slider handle for a clean look at either side. Slider position and orientation are shareable via the `sp` and `so` URL parameters.

### Side by Side (`side-by-side`)
A and B rendered next to each other with synchronized zoom, pan, and frame-accurate video playback. Best for spotting layout, framing, and color differences at a glance.

### Blend (`blend`)
A and B composited with a blend mode: `difference`, `overlay`, `multiply`, or `screen`. Difference blend turns identical pixels black, so any non-black pixel is a real change.

### Split (`split`)
Split-screen layouts: `2x1` (horizontal pair), `1x2` (vertical pair), and `2x2` (quad). Useful for keeping multiple regions of the same pair in view.

### Flicker (`flicker`)
Alternates A and B rapidly in the same position. The human eye is highly sensitive to change at a fixed point, which makes flicker the fastest way to find small pixel differences.

### Prompt Diff (`prompt-diff`)
Word- and line-level text diff designed for AI prompt iteration: changed instructions, constraints, examples, and output-format rules are highlighted.

### JSON Diff (`json-diff`)
Structural JSON comparison for API responses, app settings, model configs, and other structured data. Differences are reported by key path, not raw text position.

### Heatmap (`heatmap`)
Per-pixel difference heatmap between A and B, with intensity mapped to the magnitude of the difference. Pairs well with objective metrics (toggle the metrics panel with `Shift+M`).

### Audio (`audio`)
Waveform and spectrogram comparison with A/B listening, timing review, and loudness inspection.

### 3D Model (`model-3d`)
GLB/GLTF comparison with synchronized orbit controls and wireframe review for meshes, materials, and LODs.

### WebGL Compare (`webgl-compare`)
GPU comparison shaders in five families: difference, structural, color, professional, and video. 29 shader modes for specialized inspection (edge differences, channel isolation, exposure tools, and more).

## Keyboard Shortcuts

| Key | Action | Key | Action |
|-----|--------|-----|--------|
| 1-7 | Switch modes | Space | Play/pause |
| Left/Right | Frame step / 1s seek | Shift+Left/Right | 5s seek |
| I / O | Loop in / loop out | Esc | Clear loop |
| E | Export dialog | T | Toggle timeline |
| B | Toggle sidebar | H | Hide slider |
| M | Add marker | Shift+M | Toggle metrics |
| Shift+S | Quick screenshot | J / K / L | Shuttle (reverse / pause / forward) |
| Home / End | Jump to start / end | Ctrl+Z / Ctrl+Shift+Z | Undo / redo |
| ? | Shortcuts help | | |

Press `?` inside the app at any time for the interactive shortcut reference.