GhostViewer Web App – Features

Version: v0.0.1
Last updated: 2026-02-26

This document lists current, live app features only. It is written for help documentation.

1) End-to-End Workflow

• Two-photo alignment flow – Users upload an old photo and a modern photo of the same location, place matching landmarks, and generate an aligned overlay.
• Guided step structure – The UI is organized into clear steps: upload, match landmarks, align, then export.
• Live preview before final render – A low-resolution preview helps users adjust landmarks before running a full alignment.

2) Upload and Image Input

• Flexible upload methods – Drag-and-drop and file picker are supported for old and new photos.
• Camera capture for modern photo – Users can take a current photo directly in-app (device/browser dependent).
• Framing guide support – The old photo can be shown as a guide while preparing the new photo.
• Safe image reset – Each uploaded image can be removed and replaced without reloading the page.
• Automatic resize for performance – Large images are resized to an internal max dimension for smoother processing.

3) Ghost Guide Camera

• Full-screen ghost capture mode – A dedicated capture view overlays the old photo on live camera preview.
• Opacity control – Users can fade the ghost image up/down to improve framing visibility.
• Move and scale overlay – Drag (mouse/touch) to reposition and pinch/wheel to scale the ghost image.
• Quick reset control – A reset option returns the ghost overlay to default centered fit.
• Direct handoff into workflow – Captured result returns immediately to the main alignment flow.

4) Crop and Straighten Tools

• Per-image crop support – Either old or new image can be cropped independently.
• Interactive crop handles – Corner, edge, and move handles allow precise crop control.
• Straighten slider – Rotation adjustment helps correct scanned or tilted source images.
• Dimension feedback – The UI shows resulting crop dimensions before apply.
• Apply/Skip behavior – Users can apply edits or skip and continue.

5) Landmark Point Matching

• Alternating guided point mode – The app prompts users to place matching points in sequence between old/new images.
• 4+ point support – Minimum 4 pairs required, with support for more for better alignment.
• Color-coded point markers – Numbered markers improve traceability of pair correspondence.
• Point editing tools – Existing points can be moved, deleted, undone, or fully cleared.
• Point quality hinting – The app warns when points are too clustered for stable transforms.

6) Precision Controls in Point Picker

• Zoom controls – Buttons, wheel zoom, and touch pinch are supported.
• Pan while zoomed – Users can reposition the viewport for precise landmark placement.
• Quick zoom reset – Double-click and reset controls speed up navigation.
• Drag safety threshold – Minor cursor/finger movement does not immediately trigger point drag.

7) Alignment Engine and Modes

• Browser-native implementation – Alignment runs in TypeScript without requiring OpenCV/WASM at runtime.
• Three transform models:
• Similarity (robust for most same-scene comparisons)
• Affine (handles additional skew/shear cases)
• Perspective (for stronger viewpoint changes)
• Low-res debounced preview – Runs while editing points to avoid heavy full re-renders.
• Full-resolution alignment run – Produces final warped overlay at output resolution.
• Optional region mask – Users can crop overlay influence to matched region.

8) Alignment Quality Feedback

• Per-point reprojection errors – Each landmark pair reports its alignment error.
• Average error metric – A single score gives overall alignment quality.
• Quality badge – Good/Fair/Poor style feedback for quick interpretation.
• Transform mode visibility – Result shows which mode generated output.
• Corner mapping diagnostics – Optional diagnostic panel helps troubleshoot difficult warps.

9) Overlay Viewing Modes

• Opacity Blend – Smoothly blend old/new layers using a slider.
• Swipe Reveal – Drag a divider to compare old vs new side-by-side in one frame.
• Flicker Mode – Alternate old/new quickly to inspect changes by eye.

10) Post-Align Fine Tuning

• Manual correction controls – Rotate, scale, and shift the old overlay after alignment.
• Fast reset – One action resets all fine-tune values back to defaults.

11) Output Framing and Cropping

• Crop to overlap option – Trims output to the area where aligned content overlaps.
• Tightness presets – Safe, Balanced, Tight options for overlap crop behavior.
• Aspect presets – Original, 1:1, 4:6, 4:5, 16:9, 9:16.
• Output zoom and pan – Adjust final framing without redoing alignment.
• Output crop reset – Quickly return framing controls to default values.

12) Exposure and Export Styling

• Independent brightness controls – Old and new images can be brightened/darkened separately.
• Caption bar on exports – Optional title and year fields are rendered onto exported output.
• Watermark option – Optional ghostviewer.co.uk watermark can be included in export output.

13) Export Options

• Still image export – Save current composition as JPG.
• Animated GIF export – Generate a looped transition export.
• Video export – Export as MP4/WebM depending on browser support.
• Loop controls – Users can choose loop count for video export.
• Optional video end screen – Branded end card can be included in video exports.
• Start-state control – Animated exports can start from old or new image state.
• Progress indicators – GIF/video generation shows inline progress and status text.

14) Help, Navigation, and Links

• Sticky header controls – Core actions remain easy to access while scrolling.
• In-app walkthrough panel – Dismissible “How it works” overlay explains the process.
• External Help link – Opens full help documentation in a new tab.
• External Usage Policy link – Opens policy page in a new tab.
• Community/site links – Footer includes links to the main site and Facebook group.
• Visible app version – Footer shows the current app version.

15) Privacy and Data Handling

• Client-side image processing – Core alignment/export workflow is browser-side.
• No required image upload for processing – Users can complete alignment/export without server-side image transfer.

16) Analytics and Runtime Telemetry

• Core interaction events – Tracking hooks are present for key actions (align, save, GIF, video export).
• Cleaner share URLs – _gl linker noise is cleaned from browser history state after load.

17) Current Operational Notes

• Known non-blocking warning – One accessibility warning remains in GhostGuideCamera for interactive handlers on a non-interactive container.