Create 💎 beautiful animations from boring screen recordings within ⏳ seconds
Create animated mockups from boring screen recordings in seconds, powered by React.
Pckd comes with a bunch of templates. View the final renders here:
Mockoops comes with a bunch of templates right out of the box! They are very responsive, customisable and diversified for each of your motion-graphics video need. Some of them are here:
This template is idea for long-form content to make it more appealing (and possibly less boring too!). Here's a quick Showdown
This one is great for quick teasers that start out by build anticipation in the begenning, revealing only certain part of the input video at first, and slowly reveal the entire thing.
Here's me, using it for Pckd's reveal
This one is for the more lo-fi people out there. This template lets you present your video on a moving MacBook screen on a beautiful workstation background. This could be used with non-screen recorded stuff as well!
This one is for short announcements or reveals. Most suitably when you just have one screen for an app and you want to tease the coming soon status!
Or it could even be used for things like the release of a new version of a product. The possibility with this one are endless
This one is well suited for use-cases where you need to present some text before a video, while not having to setup any fancy stuff
Here's a diagram explaining exactly how everything fits into place
Here's how everything fits into the scene
The videos will only render to an mp4 file if you have all of this set-up. However, you would still be able to preview the videos in the browser without the last two.
.env.example
file to .env
.npm install
.env
file along with other values..env
setup using npx remotion lambda policies validate
. Only proceed if you get checkmarks on everything, else repeat from step 4
.src/deploy/regions.ts
file.npm run deploy
. Wait for deployment.npm run dev
. Navigate to the address displayed in the terminal to view the app. Verify that everything works.npm run build
and serve using npm start
.The software is published under the MIT
License.
If you believe this project has potential, feel free to star this repo just like many amazing people have.
Note The was originally a hackathon project, and at the time, I was not a very experienced programmer (which is appearant with the usage of JS over TS). Apologies if the code is a bit messy. I'll be refactoring it soon.