Live App

HAS WARP

Browser-based projection mapping tool with 4-point corner pinning, perspective warp, blend modes, animation engine, and video export.

Canvas 2D Homography WebGL Video Export MediaRecorder

↗ Launch App ⚙ How It Works

Year 2026

Type Web App

Status ● Live

001 Overview

Upload any image or video as a background surface, then map a foreground onto it with 4-point corner pinning. The homography solver computes a perspective-correct matrix3d transform in real-time as you drag each corner — no plugins, no installs, everything runs in the browser. Pick a blend mode, add animation, and export as PNG or record video.

002 How It Works

Upload Media

Load a background surface image or video, then upload a foreground to project. The workspace scales to match the background's native resolution.

Corner Pinning

Drag the 4 corner handles to define the projection surface. A real-time homography solver computes the perspective warp as a CSS matrix3d transform.

Blend & Animate

Choose from 6 blend modes and add animation presets — breathe, zoom, orbit — with adjustable speed and intensity. All baked into export.

Export

Export as PNG at source resolution or record video (MP4/WebM/MOV) using the MediaRecorder API with configurable duration and format selection.

003 Features

4-Point Corner Pinning

Drag corners to define the projection quad. The homography solver produces a perspective-correct matrix3d transform in real-time with magnifier loupe.

6 Blend Modes

Normal, Screen, Multiply, Overlay, Dodge, and Difference. Compositing updates instantly in the viewport as you switch modes.

Animation Engine

6 presets with adjustable speed and intensity. Scale up, breathe, slow burn, orbit — all rendered into video export at 30fps locked.

Dockable Panels

Undock any panel to a floating window. Drag to reposition, dock back when done. Collapse panels to save sidebar space.