Phases

Phases

Face-aligned progress timelapse, built in the browser

Project Overview

Phases turns a daily photo habit into a smooth timelapse. You take one photo a day through an in-app camera guide, and the app automatically centres and levels your eyes across every frame so the final video holds perfectly steady — no tripod, no manual alignment.

The alignment runs on TensorFlow.js MediaPipe FaceMesh directly in the browser: it locates the eyes in each photo and stores the anchor points. Frames it can't align automatically get flagged for a quick two-point manual adjustment. The timelapse itself is rendered live on a canvas and encoded to MP4 or GIF with ffmpeg.wasm — everything happens on-device, with no upload or server-side processing.

Photos are stored locally in IndexedDB by default; connecting Google Drive adds backup and cross-device sync. Phases is built on Next.js 15 and React 19, ships as an installable PWA, and packages into an Android app via Capacitor, with iOS on the way.

Project Details

Client

Self-initiated project

Year

2025

Role

Fullstack Developer

Technologies

Next.js 15React 19TypeScriptTailwind CSS v4TensorFlow.jsffmpeg.wasmSupabaseBetter AuthCapacitor

Related Projects

Project Gallery

Phases

Phases 1

Phases - Phases 1

Click to view larger

Phases

Phases 2

Phases - Phases 2

Click to view larger