Before-and-After Photo Overlay App: Build Your Own (2026)

Searching for a before-and-after photo overlay app usually turns up generic progress-photo trackers built for gym selfies or skincare journeys. If your comparison needs are more specific — sketches against reference photos, hair growth over months, a transformation that doesn’t fit someone else’s template — the better move is to build your own overlay app around exactly what you’re comparing.

Why build instead of download

Most transformation photo overlay apps on the store are built for one narrow use case and padded with features you don’t need: social sharing, subscription paywalls, workout logging. If you just want to align before and after photos, adjust opacity, and compare proportions or progress at your own pace, that’s a small, well-defined tool — which is exactly the kind of thing Auto is built for.

With Auto, you describe what you want in plain language, snap a photo if you need one, and it builds a working mini-app (a “Frame”) around your specific case. No app store listing, no generic settings menu — just the tool you asked for.

How to build it in Auto

1. Describe the comparison you want to make. Say what you’re overlaying — sketches over reference photos, monthly hair growth photos, fitness or transformation shots — and what you want to do with them: align, scale, compare proportions.
2. Ask for storage for your images. A simple library where every photo you upload lives, so you can pick from it later instead of re-uploading each time.
3. Ask for selection and overlay. You want to pick two images — a reference and a comparison shot — and see them layered on top of each other in a canvas view.
4. Ask for gesture controls. Being able to select the active image, then move and scale it with two-finger drag and pinch, is what makes fine alignment actually usable instead of fiddly.
5. Test it and report back what’s off. Auto fixes bugs the same way you built the Frame — by telling it what broke.

How someone built theirs

One Auto user set out to build a proportion-comparison tool for their figure drawing practice. Their first prompt asked for a Frame that could overlay a sketch on top of its photo reference so they could check proportions — plus a storage area to hold every image they’d uploaded, and the ability to pick a reference and a sketch, layer them in canvas view, select whichever one was active, and nudge or scale it using two-finger drag and pinch.

Auto built a first version, but the build failed — TypeScript errors in the touch-gesture code and a mismatch in how selected images were being passed to the image list. The user pasted the error output back into Auto, and it fixed the type errors and the component props, and the build went through clean. That back-and-forth — build, test, report what broke — is a normal part of shaping a Frame that does exactly what you asked for. The result, which they named “Sketch Compare,” is proof this kind of align-before-and-after-photos tool is something anyone can put together, not just something you wait to find pre-made.

FAQ

Can I use this as a progress photo comparison app for fitness or body changes? Yes. The same overlay-and-align approach works whether you’re comparing sketches, workout progress, or any two photos you want lined up side by side or layered.

Can I build a hair growth progress photo overlay app this way? Yes — describe that use case specifically (same angle, same lighting, month-over-month) and Auto will shape the Frame around it, including a photo library so you can track a whole series.

Do I need design or coding skills? No. You describe what you want in plain language and take it from there, including reporting bugs in plain terms when something doesn’t work.

What if I want to change it later? Since you built it, you can ask Auto to add features — grid overlays, opacity sliders, side-by-side view — anytime your needs change.