Remotion Video Skill
By ModelWise team - Professional AI Agent Solutions
基于 Remotion 的动画演示视频制作技能。
功能特性
基础动画组件
- FadeIn/FadeOut - 淡入淡出动画
- SlideIn - 滑动入场动画（支持四个方向）
- ScaleIn - 缩放入场动画（支持 spring 效果）
- Typewriter - 打字机文字效果
- WordHighlight - 文字高亮动画
场景过渡效果
- TransitionScene - 封装 @remotion/transitions
- 支持 fade、slide、wipe 等过渡效果
视频模板
- ProductDemo - 产品演示模板
- TitleSequence - 标题动画模板
- DataVisualization - 数据展示模板
视频配置预设
- landscape: 1920x1080 (16:9 横屏)
- portrait: 1080x1920 (9:16 竖屏)
- square: 1080x1080 (1:1 正方形)
使用方法
1. 安装依赖
npm install
2. 启动开发服务器
npm run studio
3. 渲染视频
npx remotion render HelloDemo out/demo.mp4
项目结构
remotion-video-skill/
├── package.json # 项目依赖
├── tsconfig.json # TypeScript 配置
├── remotion.config.ts # Remotion 配置
├── SKILL.md # 技能说明文档
├── task.md # 任务进度记录
└── src/
├── Root.tsx # 入口文件
├── components/ # 可复用动画组件
├── compositions/ # 视频组合/模板
└── utils/ # 工具函数
开发指南
创建新的动画组件
在 src/components/ 目录下创建新的组件文件。
创建新的视频模板
- 在
src/compositions/创建模板文件 - 在
src/Root.tsx中注册新的 Composition
使用动画预设
import { springPresets, easingPresets } from "./utils/animations";
技术栈
- React 18
- Remotion 4.x
- TypeScript 5.x
- @remotion/transitions