Awesome
Animockup
<br>
Create stunning product teasers with animated mockups š„
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.
<a href="https://www.producthunt.com/posts/animockup-2-0?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-animockup-2-0" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=319895&theme=light" alt="Animockup 2.0 - Create stunning product teasers with animated mockups | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
You can support this project (and many others) through GitHub Sponsors! ā¤ļø
Made by Alyssa X
Table of contents
Features
š¹ Add a video or image of the product you want to showcase<br> š± Choose from 20+ device mockups and frames<br> āļø Crop and reposition your video in the mockup screen<br> šØ Customize the background, with gradients<br> āļø Add text and images to enhance your video<br> šŖ Choose the start and end animations from multiple presets<br> ā± Set the video duration and change the easing of the animation<br> šļø Set the framerate, export format, and resolution<br> ...and much more!<br>
Self-hosting Animockup
In order to self-host Animockup, you will need to make a few changes.
- Create a Firebase project<br>
- Update the firebaseConfig object in the index.html with your own values<br>
- 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.
Libraries used
- 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
Feel free to reach out to me through email at hi@alyssax.com or on Twitter if you have any questions or feedback! Hope you find this useful š