{"id":13426051,"url":"https://github.com/alyssaxuu/animockup","last_synced_at":"2025-05-16T06:07:40.835Z","repository":{"id":37392998,"uuid":"248908265","full_name":"alyssaxuu/animockup","owner":"alyssaxuu","description":"Create animated mockups in the browser 🔥","archived":false,"fork":false,"pushed_at":"2022-07-02T08:12:35.000Z","size":44889,"stargazers_count":1679,"open_issues_count":3,"forks_count":149,"subscribers_count":32,"default_branch":"master","last_synced_at":"2025-04-08T16:06:16.957Z","etag":null,"topics":["canvas","design","design-tools","editor","javascript","marketing","marketing-tools","tool"],"latest_commit_sha":null,"homepage":"https://animockup.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alyssaxuu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"alyssaxuu"}},"created_at":"2020-03-21T04:45:36.000Z","updated_at":"2025-04-07T11:06:47.000Z","dependencies_parsed_at":"2022-07-07T23:09:48.943Z","dependency_job_id":null,"html_url":"https://github.com/alyssaxuu/animockup","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alyssaxuu%2Fanimockup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alyssaxuu%2Fanimockup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alyssaxuu%2Fanimockup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alyssaxuu%2Fanimockup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alyssaxuu","download_url":"https://codeload.github.com/alyssaxuu/animockup/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478193,"owners_count":22077676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","design","design-tools","editor","javascript","marketing","marketing-tools","tool"],"created_at":"2024-07-31T00:01:25.261Z","updated_at":"2025-05-16T06:07:35.827Z","avatar_url":"https://github.com/alyssaxuu.png","language":"JavaScript","funding_links":["https://github.com/sponsors/alyssaxuu","https://github.com/sponsors/alyssaxuu)!"],"categories":["JavaScript","Libraries","By Industry","Mockup","By Language","General Tools"],"sub_categories":["Image processing","Tools \u0026 Utilities","JavaScript","Multimedia"],"readme":"# Animockup\n![Demo](preview.gif)\n\u003cbr\u003e\nCreate stunning product teasers with animated mockups 🔥\n\nAnimockup 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.\n\n[👉 Get it now](https://animockup.com)\n\n\u003ca href=\"https://www.producthunt.com/posts/animockup-2-0?utm_source=badge-featured\u0026utm_medium=badge\u0026utm_souce=badge-animockup-2-0\" target=\"_blank\"\u003e\u003cimg src=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=319895\u0026theme=light\" alt=\"Animockup 2.0 - Create stunning product teasers with animated mockups | Product Hunt\" style=\"width: 250px; height: 54px;\" width=\"250\" height=\"54\" /\u003e\u003c/a\u003e\n\n\u003e You can support this project (and many others) through [GitHub Sponsors](https://github.com/sponsors/alyssaxuu)! ❤️\n\nMade by [Alyssa X](https://twitter.com/alyssaxuu)\n\n## Table of contents\n\n- [Features](#features)\n- [Self-hosting Animockup](#self-hosting-animockup)\n- [Libraries used](#libraries-used)\n\n## Features\n📹 Add a video or image of the product you want to showcase\u003cbr\u003e\n📱 Choose from 20+ device mockups and frames\u003cbr\u003e\n✂️ Crop and reposition your video in the mockup screen\u003cbr\u003e\n🎨 Customize the background, with gradients\u003cbr\u003e\n✏️ Add text and images to enhance your video\u003cbr\u003e\n🪄 Choose the start and end animations from multiple presets\u003cbr\u003e\n⏱ Set the video duration and change the easing of the animation\u003cbr\u003e\n🎚️ Set the framerate, export format, and resolution\u003cbr\u003e\n...and much more!\u003cbr\u003e\n\n## Self-hosting Animockup\nIn order to self-host Animockup, you will need to make a few changes.\n\n1. Create a [Firebase project](https://firebase.google.com/)\u003cbr\u003e\n2. Update the firebaseConfig object in the [index.html](src/index.html) with your own values\u003cbr\u003e\n3. Animockup uses Paddle for subscriptions. You can either remove it entirely, or update with your own values in the [main.js](src/main.js) and [api.php](src/api.php) files.\n\n## Libraries used\n- [jQuery](https://jquery.com/) - for better event handling and DOM manipulation\n- [FabricJs](http://fabricjs.com/) - for the interactive canvas\n- [CanvasRecorder.js](https://github.com/SMUsamaShah/CanvasRecorder) - for recording the canvas\n- [FFMPEG](https://www.ffmpeg.org/) - for converting the videos to different formats\n- [jQuery Nice Select](https://hernansartorio.com/jquery-nice-select/) - for better dropdowns\n- [Pickr](https://github.com/Simonwep/pickr) - for a better color picker\n- [Anime.js](https://animejs.com/) - for animating the mockups\n- [fix-webm-duration](https://github.com/yusitnikov/fix-webm-duration) - to make webm videos seekable\n- [Paddle](https://paddle.com/) - for handling subscription payments\n- [Firebase](https://firebase.com/) - for authentication\n\n#\n\nFeel free to reach out to me through email at hi@alyssax.com or [on Twitter](https://twitter.com/alyssaxuu) if you have any questions or feedback! Hope you find this useful 💜\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falyssaxuu%2Fanimockup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falyssaxuu%2Fanimockup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falyssaxuu%2Fanimockup/lists"}