Face Animation

About

Face Animation turns a set of face photos into a smooth animation, with every face scaled and rotated so the eyes stay level and in the same position from frame to frame. It's the effect behind "aging timelapse" and "one photo a day" videos.

Your privacy comes first

Everything runs inside your browser using plain HTML, CSS, and JavaScript. Your photos are never uploaded — there is no server, no account, and no analytics. When you close the tab, the images are gone from memory. This makes it safe to use with personal or family photos.

How it works

  1. Add photos. Pick or drag in a set of face photos.
  2. Mark the eyes. On each photo you click the left eye then the right eye. A magnifier appears so you can be precise. Manual marking needs no third-party face-detection library and is reliably accurate for a curated set of photos.
  3. Alignment math. From the two eye points we compute a rotation (to make the eye line horizontal), a uniform scale (so every face shares the same inter-eye distance), and a translation (so the midpoint between the eyes lands on the same spot). Each photo is then drawn onto a fixed-size frame with the Canvas 2D API.
  4. Preview. The aligned frames are cycled with requestAnimationFrame. You can change the speed, scrub through frames, and reorder or remove photos.
  5. Export. The browser's built-in MediaRecorder captures the animation to a video file — MP4/H.264 on Safari, WebM on Chrome and Edge. No encoder library is bundled.

No third-party code

There are no frameworks and no runtime dependencies. All alignment, animation, and video encoding use APIs built into the browser. This keeps the site tiny, fast, and easy to audit.

Browser support

Tips for the best result

← Back to the app