📱 Mockoops

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)

What is Mockoops? Click this 👇

🎬 Templates

Pckd comes with a bunch of templates. View the final renders here:

Current Templates 🌈

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:

📐 Angled Presentation

This template is idea for long-form content to make it more appealing (and possibly less boring too!). Here's a quick Showdown

⚡️ Quick Teaser

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

💻 Laptop Zoom

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!

📚 Text Reveal

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

🎭 Rotate Title

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

🏡 Architecture

Here's a diagram explaining exactly how everything fits into place

Here's how everything fits into the scene

📐 Tech Stack

• 🔥 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

💾 Installation

Pre-Requisites

1. NodeJS 14+
2. NPM installation
3. A S-3 compatible storage bucket with read and write access. (Optional)
4. 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.

Install steps

1. Setup an Object storage bucket with Linode or any other cloud provider.
2. Rename the .env.example file to .env.
3. Install packatges using npm install
4. Follow the inst9allation instructions at Remotion Lambda Installation docs, till step 6 .
5. Once you have the key ID and Secret from the lambda console, edit these values into the .env file along with other values.
6. Verify .env setup using npx remotion lambda policies validate. Only proceed if you get checkmarks on everything, else repeat from step 4.
7. Edit your preferred regions in src/deploy/regions.ts file.
8. Deploy the functions using the command npm run deploy. Wait for deployment.

Run the app

1. Run the development server using npm run dev. Navigate to the address displayed in the terminal to view the app. Verify that everything works.
2. Create a production build using npm run build and serve using npm start.

👩‍⚖️ License

The software is published under the MIT License.

🫡 Created for

This project was submitted as a hackathon submission on the Hashnode x Linode Hackathon

🌟 Support this project

⏫ ⭐️ Scroll to the star button

If you believe this project has potential, feel free to star this repo just like many amazing people have.