📱 Mockoops

在几秒钟内将无聊的屏幕录像转换为生动的动画模拟图，由React驱动。

• ⚡️ 由无服务器函数支持的超快渲染
• 📸 参数一经更改，预览立即更新
• 📏 响应式视频模板
• 🥳 附带一系列适用于不同场景的模板
• 😎 长期缓存以节省渲染时间
• 🌤 浅色/深色模式（手动+设备偏好）

Mockoops是什么？点击这里👇

🎬 模板

Pckd提供了一系列模板。在这里查看最终渲染效果：

现有模板 🌈

Mockoops开箱即用，提供了一系列模板！这些模板具有很强的响应性、可定制性，并针对各种动态图形视频需求进行了多样化设计。以下是其中一些模板：

📐 倾斜展示

这个模板非常适合长篇内容，使其更具吸引力（可能也不那么无聊）。这里有一个快速展示：

https://user-images.githubusercontent.com/48997634/177477832-8b9c6aff-5f57-4f78-b4fe-e2fbc920d913.mp4

⚡️ 快速预告

这个模板非常适合快速预告，开始时通过只显示输入视频的某些部分来营造期待感，然后慢慢揭示整个内容。

这是我用它来展示Pckd的效果：

https://user-images.githubusercontent.com/48997634/177477866-52c74675-cedb-4981-a301-fa97151caa16.mp4

💻 笔记本电脑缩放

这个模板适合喜欢低调风格的人。它可以在一个美丽的工作站背景上展示移动的MacBook屏幕上的视频。这也可以用于非屏幕录制的内容！

https://user-images.githubusercontent.com/48997634/177477863-aab11867-8fc0-4402-8c75-6bbca14de4f4.mp4

📚 文字揭示

这个模板适用于短小的公告或揭示。最适合当你只有一个应用程序界面，想要预告即将推出的状态时使用！

https://user-images.githubusercontent.com/48997634/177477874-b219ce0d-a26e-4901-afbe-23d35c309c2e.mp4

它甚至可以用于产品新版本发布等场景。这个模板的可能性是无穷无尽的。

🎭 旋转标题

这个模板非常适合在视频前展示一些文字的场景，而无需设置任何复杂的内容。

https://user-images.githubusercontent.com/48997634/177477870-a48ed8bb-0bec-4c4b-a483-73a95250e6e3.mp4

🏡 架构

这里有一个图表解释了所有组件是如何协同工作的：

<div align="center"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/f0b3f10d-89aa-4b1f-a118-c768daf39b33.png" height="300" /> <p>这就是所有组件如何配合使用的方式</p> </div>

📐 技术栈

• 🔥 NextJS - 因为它是最好的前端JS框架之一
• ▶️ Remotion - 用于视频和渲染
• 🪣 Linode S3存储 - 用于快速将上传的视频文件存储在存储桶中
• 💅 Sass - 用于美化应用界面
• 🌱 MongoDB（与Linode配合） - 用于缓存具有相同输入参数的渲染
• 🔫 React Recoil - 用于全应用状态管理
• 🍞 React Hot Toast - 用于通知
• 🎉 React Confetti - 用于欢乐的动画
• 💦 React Dropzone - 用于处理高级拖放动画

💾 安装

前提条件

1. NodeJS 14+
2. NPM安装
3. 具有读写权限的S3兼容存储桶（可选）
4. 用于渲染的Serverless账户（可选）

只有设置好所有这些，视频才能渲染为mp4文件。但是，即使没有最后两项，你仍然可以在浏览器中预览视频。

安装步骤

1. 使用Linode或任何其他云提供商设置对象存储桶。
2. 将.env.example文件重命名为.env。
3. 使用npm install安装包。
4. 按照Remotion Lambda安装文档的安装说明进行操作，直到第6步。
5. 从lambda控制台获取密钥ID和密钥后，将这些值和其他值编辑到.env文件中。
6. 使用npx remotion lambda policies validate验证.env设置。只有在所有项目都显示对勾时才继续，否则从第4步重新开始。
7. 在src/deploy/regions.ts文件中编辑你首选的地区。
8. 使用命令npm run deploy部署函数。等待部署完成。

运行应用

1. 使用npm run dev运行开发服务器。导航到终端中显示的地址以查看应用。验证一切是否正常工作。
2. 使用npm run build创建生产构建，并使用npm start提供服务。

👩‍⚖️ 许可证

本软件根据MIT许可证发布。

🌟 支持本项目

⏫⭐️ 滚动到星标按钮

如果你认为这个项目有潜力，欢迎像许多优秀的人一样为本仓库点星。

注意 这最初是一个黑客马拉松项目，当时我还不是一个非常有经验的程序员（这从使用JS而不是TS可以看出来）。如果代码有点凌乱，我表示歉意。我会尽快重构它。