Create animated mockups from boring screen recordings in seconds, powered by React.
- ⚡️ Superfast rendering powered by Serverless Functions
- 📸 Updates previewed as soon as parameters are changed
- 📏 Responsive Video Templates
- 🥳 Comes with a bunch of templates suited for different scenarios.
- 😎 Long-term Caching for saving rendering times
- 🌤 Light Mode / Dark Mode (Manual + Device preferences-based)
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
angled-presentation.mp4
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
quick-teaser.mp4
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!
laptop.mp4
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!
text-reveal.mp4
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
rotate-title.mp4
Here's a diagram explaining exactly how everything fits into place
Here's how everything fits into the scene
- 🔥 NextJS - Because it's one of the best frontend JS Frameworks
▶️ Remotion - For the video and rendering- 🪣 Linode S3 Storage - For quickly storing uploaded video files in storage buckets
- 💅 Sass - For making the app look beautiful
- 🌱 MongoDB (w/ Linode) - For caching renders with the same input params
- 🔫 React Recoil - For app-wide state management
- 🍞 React Hot Toast - For the notifications
- 🎉 React Confetti - For the joyous animations
- 💦 React Dropzone - For handling advanced drag-drop animations
- NodeJS 14+
- NPM installation
- A S-3 compatible storage bucket with read and write access. (Optional)
- An Serverless account for rendering, (Optional)
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.
- Setup an Object storage bucket with Linode or any other cloud provider.
- Rename the
.env.examplefile to.env. - Install packatges using
npm install - Follow the installation instructions at Remotion Lambda Installation docs, till step 6 .
- Once you have the key ID and Secret from the lambda console, edit these values into the
.envfile along with other values. - Verify
.envsetup usingnpx remotion lambda policies validate. Only proceed if you get checkmarks on everything, else repeat from step4. - Edit your preferred regions in
src/deploy/regions.tsfile. - Deploy the functions using the command
npm run deploy. Wait for deployment.
- Run the development server using
npm run dev. Navigate to the address displayed in the terminal to view the app. Verify that everything works. - Create a production build using
npm run buildand serve usingnpm 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.