Loading Files

WarpDiff is a browser-based visual comparison tool for reviewing 2–3 versions of images or videos side by side.

Three ways to load files:

• Press L
• Click the load icon (file+) in the header
• Drag and drop files onto the window

File requirements:

• 1–3 files (images, videos, or audio)
• 2 files → assigned to Edit A and Edit B
• 3 files → assigned to Original, Edit A, and Edit B
• Files are automatically sorted oldest → newest by last-modified timestamp

Timestamp warning: If two or more files have timestamps within 2 seconds of each other, a toast warns that the sort order may be unreliable.

Duplicate detection: If two slots contain the same file (matched by name, size, and timestamp), a warning banner appears.

Reset: Click the reset icon (circular arrow, visible after loading) to clear all files and start over.

View Modes

Stack — The default mode. One asset is visible at a time, layered on top of the others. Use arrow keys or the asset buttons in the header to switch between assets. Asset name, zoom, resolution, aspect ratio, and filename are shown in the header. A mini-map thumbnail appears in the lower-right when the asset overflows the viewport — click or drag it to pan. Press \ to toggle between Fit (each asset fills the viewport independently) and Balance (all assets scaled to the same rendered screen area).

Grid (2 files) — Both assets displayed side-by-side with a gap between them. The layout auto-picks Horizontal or Vertical on load based on which gives larger images, and re-evaluates on resize.

Grid (3 files) — All three assets in a grid. Press 3 to toggle between Inline (columns or rows, auto-picked by aspect ratio; uses equal-area scaling so mixed-orientation assets share consistent visual weight) and Offset (Source alone, A/B paired).

Switching Modes

Action	Result
Click stack icon (three bars) in header	Switch to Stack mode
Click grid icon (four squares) in header	Switch to Grid mode
Press S	Toggle Stack ↔ Grid
Press G	Toggle Grid ↔ Stack

Zoom & Pan

Zoom and pan are available in Stack mode only.

Shortcut	Action
+	Zoom in
−	Zoom out
0	Zoom to fit screen
1	Zoom to 100% native pixels for the active asset
\	Toggle Fit / Balance zoom mode
Click and drag	Pan; drag past edges for elastic rubber-band resistance

Zoom range: 5%–3200%. Each step multiplies/divides by √2 (~1.41×). 1 targets the currently active asset — switching assets and pressing 1 again re-centers 100% on the new slot. In Grid mode, 1 toggles between fit-to-screen and a 100% native pixel cap. In Balance mode all assets are scaled to equal rendered area; the mini-map in the lower-right shows the full extent of assets and a viewport indicator when any asset overflows.

Zoom Loupe

Press Z to toggle a circular zoom loupe that follows your cursor, showing a magnified view of native pixels without changing the overall zoom level. Works in all view modes.

Shortcut	Action
Z	Toggle zoom loupe
+ −	Adjust magnification (2×–32×, when loupe is active)
[ ]	Resize loupe (100–400px)
Shift+Z	Toggle linked zoom

Linked zoom: In Grid modes, enabling linked zoom (Shift+Z) shows corresponding loupes on all other visible assets at the same relative position — hover over one asset to compare the exact same spot across all versions.

The loupe hides during panning and updates live during video playback and frame stepping. Loupe size and magnification level persist across sessions.

Video Playback

Video controls appear at the bottom when videos are loaded. All videos play, pause, and seek in sync.

Control	Description
Progress bar	Click to seek; drag to scrub
Timecode (left)	Current position — click to toggle between time and frame count. Video uses M:SS:FF (frames); audio uses M:SS.cc (centiseconds) since audio has no frame rate
Speaker icon	Mute/unmute the active audio source
Volume slider	Adjust volume
O A B buttons	Select which asset's audio to hear

Keyboard shortcuts:

Shortcut	Action
Space	Play / Pause
R	Restart from beginning
M	Mute / Unmute
,	Step back one frame
.	Step forward one frame
W	Toggle waveform / spectrogram
Shift+W	Toggle linear / log frequency scale
Shift+C	Cycle spectrogram color palette

Only one audio track plays at a time. If the active source is muted, audio automatically switches to the next unmuted source.

Audio Timeline Interaction

In audio comparison mode, the waveform and spectrogram canvases are interactive — click and drag to scrub through audio or select a loop region.

Action	Result
Click on waveform/spectrogram	Seek to that position
Click and drag	Scrub through audio with preview
Shift + click and drag	Select a region to set loop in/out points
Click on a different slot's canvas	Switch active audio to that slot

Loop markers: Use I and O to set in and out points at the current playback position, or Shift-drag on a waveform to select a region visually. When both markers are set, playback loops between them. The progress bar turns orange and spans only the looped section. Non-looped regions are dimmed at 50% on waveforms and spectrograms. Drag the orange triangle markers on the progress bar to adjust loop boundaries. Loop points are saved per asset — switching videos preserves each one's loop selection.

Shortcut	Action
I	Set loop in-point at current time
P	Set loop out-point at current time
Esc 2×	Clear both loop markers (double-tap)
R	Restart at in-point (or beginning if no markers)

Keyboard Shortcuts Reference

Key	Action
L	Load files
J / K	Slower / Faster
Z	Toggle zoom loupe
Shift+Z	Toggle linked zoom in Grid mode
[ ]	Resize zoom loupe
← → ↑ ↓	Switch asset
S	Toggle Stack mode
G	Toggle Grid mode
\	Stack: Fit / Balance zoom toggle
3	Toggle Grid layout (Inline ↔ Offset)
F	Fullscreen
+	Zoom in
−	Zoom out
0	Zoom to fit screen
1	Zoom to 100% / toggle 100% cap
Space	Play / Pause
R	Restart
M	Mute
I	Set loop in-point
O	Set loop out-point
Esc 2×	Clear loop markers
,	Step back one frame
.	Step forward one frame
W	Toggle waveform / spectrogram
Shift+W	Toggle linear / log frequency scale
Shift+C	Cycle spectrogram color palette
H	Toggle shortcuts panel
Esc	Dismiss loupe / close panel

Preferences

The following settings are saved to your browser and persist across sessions and page reloads:

• Zoom loupe size and magnification level
• Linked zoom on/off
• Volume level
• Spectrogram scale (linear/log) and color palette

Info Bar

Each asset displays an info bar showing: slot name, resolution (e.g. 1920×1080), aspect ratio (e.g. 16:9), and duration for videos or — for images. Audio files show sample rate, channels, bit depth/codec, and file size instead.

Aspect ratios that don't match a known standard are shown in amber as a heads-up to check your export settings.

The frame counter detects frame rate automatically and snaps to the nearest standard rate (23.976, 24, 25, 29.97, 30, 48, 59.94, 60). Video durations are shown as M:SS:FF (frames at the detected rate); audio durations use M:SS.cc (decimal centiseconds) since audio has no inherent frame rate.

In split modes, the info bar of the asset whose audio is currently playing is highlighted.

Limitations

• 1–3 files — 1 file for solo review, 2 for A/B, 3 for Original + A + B
• Images, videos, and audio only — other file types are ignored
• Pan available in Stack mode only
• Audio: one track at a time; others are automatically muted