Start with matching points
The tool presents two input canvases and a third output canvas. Users load two local images, place corresponding points, and adjust per-image offsets. Delaunator produces the triangle structure used to warp image regions into a shared geometry.
The state model separates base points from each image's offsets. Exported JSON retains those relationships, allowing the correspondence work to be revisited without flattening it into an image.
See the geometry in the code
For each triangle, the renderer constructs a clipping path and an affine transform from source coordinates to destination coordinates. It draws the two images with differing opacity, making alignment visible through compositing.
The checked-in version is an experiment with important limitations. Its blend geometry is fixed to one side while opacity animates; a continuous requestAnimationFrame loop changes the blend control. A reviewer should not infer a polished general-purpose morphing workflow from the title alone.
Treat the prototype as an experiment
The code brings coordinate modeling, local file handling, Canvas transforms, and serialized state into one small page. It also exposes the next engineering questions: handling degenerate triangles, scaling pointer coordinates correctly, and deciding whether animation or the user owns the blend control. Those are visible design boundaries in this version.