Animockup is a web-based tool that helps you create animated mockups for your product teasers. Add gradient backgrounds, browse through 20+ mockups, customize the export settings, and much more.
You can support this project (and many others) through GitHub Sponsors!
Made by Alyssa X
Table of contents
...and much more!
In order to self-host Animockup, you will need to make a few changes.
- Create a Firebase project
- Update the firebaseConfig object in the index.html with your own values
- Animockup uses Paddle for subscriptions. You can either remove it entirely, or update with your own values in the main.js and api.php files.
- jQuery - for better event handling and DOM manipulation
- FabricJs - for the interactive canvas
- CanvasRecorder.js - for recording the canvas
- FFMPEG - for converting the videos to different formats
- jQuery Nice Select - for better dropdowns
- Pickr - for a better color picker
- Anime.js - for animating the mockups
- fix-webm-duration - to make webm videos seekable
- Paddle - for handling subscription payments
- Firebase - for authentication