// the find
alyssaxuu/animockup
Create animated mockups in the browser 🔥
Browser-based editor that turns a screenshot or screen recording into an animated device mockup, with gradient backgrounds, text layers, and export settings. It is aimed at indie makers and marketers who need a product teaser video without opening After Effects. The repo is the code behind the hosted product, so it still includes the Firebase auth and Paddle billing wiring.
- Editing happens on a Fabric.js canvas, so the device frame, text, shapes, and background stay as editable objects until export, not a flattened image.
- Export goes through CanvasRecorder, then ffmpeg for format and resolution conversion, and fix-webm-duration is included so WebM output is seekable. These are the unglamorous details that usually break first in browser video tools.
- The 20+ device mockups ship as paired full-size PNGs and thumbnails, which keeps the picker light without generating previews at runtime.
- Last push was July 2022 and the dependencies are vendored as minified files (an old fabric.min.js, jQuery, nice-select). Upgrading Fabric would mean re-checking every object serialization path, and nothing in the tree suggests that has been tried.
- Self-hosting means editing a Firebase config block in index.html and Paddle values in main.js and api.php. There is no environment-based config, so a private deployment has to find every hardcoded value by hand.
- There is no test suite, build step, or CI in the tree. The app is hand-written jQuery in main.js and init.js, so changes can only be verified by clicking through the UI.