Interactive Image Comparison

A private, browser-based artwork comparison workspace built with React, TypeScript, and the Canvas API.

Features

• Side-by-side comparison with synchronized zoom and pan
• Opacity overlay and draggable split reveal
• Worker-backed pixel difference heatmap
• Center-aligned comparison for mismatched image dimensions
• High-resolution PNG and JPEG uploads processed entirely in the browser
• Responsive, keyboard-accessible interface

Sample imagery

The bundled comparison uses NASA Earth Observatory's web-published World of Change: Shrinking Aral Sea imagery from August 2000 and August 2014. The aligned Terra/MODIS views show the dramatic loss of water across the eastern and southern basins. Image credit: NASA Earth Observatory.

Original web sources:

• August 2000 JPEG
• August 2014 JPEG

Development

npm install
npm run dev

Run verification with:

npm run typecheck
npm test
npm run build
npm run test:e2e