| name | e-video-creator |
| description | E老师专属 Remotion 视频制作工具。用于将图文内容自动化生成 3:4 竖版短视频（Hook-Why-Process-Essence-Tips-EndCard 结构）。当用户说"制作E老师视频"、"生成短视频"、"做Remotion视频"或需要提供AI教程/课程内容时触发。 |
E Video Creator
E老师专属 Remotion 视频制作工具，基于 React + TypeScript + Remotion 实现。
快速开始
1. 准备内容
用户提供以下内容即可制作视频：
Hook标题: xxx
副标题: xxx
核心数据: xxx
Why标题: xxx
Why内容: xxx
Process标题: xxx
Process内容: xxx
Essence标题: xxx
Essence内容: xxx
Tips标题: xxx
Tips内容: xxx
品牌名: xxx
口号: xxx
2. 制作流程
- 复制模板 → 从
assets/template/ 复制到工作目录
- 修改内容 → 编辑
src/Root.tsx 中的 defaultProps
- 替换资源 → 头像放
public/avatar.jpg，音乐放 public/background-music.mp3
- 安装渲染 →
npm install && npx remotion render src/index.tsx MainVideo out/video.mp4
3. 输出视频
- 分辨率: 1080×1440 (3:4 竖版)
- 时长: 18秒 (可调整)
- 包含: 背景音乐 + 完整动画 + CTA
模板结构
template/
├── src/
│ ├── index.tsx # 入口
│ ├── Root.tsx # 内容配置
│ ├── MainVideo.tsx # 场景编排
│ ├── scenes/ # 6个场景组件
│ ├── components/ # 特效组件
│ └── utils/fonts.ts # 设计系统
├── public/
│ ├── avatar.jpg # E老师头像
│ └── background-music.mp3
└── package.json
视频结构 (6场景)
| 场景 | 时长 | 动画效果 |
|---|
| Hook | 4.5s | 标题左右飞入碰撞，数据发光 |
| Why | 2.5s | 卡片左滑入 |
| Process | 2.5s | 卡片右滑入 |
| Essence | 2.5s | 卡片左滑入 |
| Tips | 2.5s | 卡片右滑入 |
| EndCard | 3.5s | 头像旋转光环+CTA+发光标语 |
设计规范
配色
- 背景:
#08090c
- 主色(暖橙):
#f59e0b
- 辅色(冷青):
#06b6d4
动画
- Spring: stiffness 120, damping 20
- 转场: Fade 15帧
字体
- 英文: Oswald
- 中文标题: Noto Serif SC (60px+)
- 正文: Noto Sans SC (28px+)
批量制作
从 JSON 批量生成：
npx remotion render src/index.tsx MainVideo out/video.mp4 --props ./data.json
使用 scripts/batch-render.ts 批量渲染多个视频。
资源说明
- assets/template/ - 完整 Remotion 项目模板
- references/guide.md - 详细使用指南
- references/endcard-effects.tsx - EndCard 特效代码参考
注意事项
- 禁用 CSS 动画 - 必须用
useCurrentFrame() 驱动
- 禁用 Tailwind 动画类
- 使用系统字体避免加载超时
- 音频推荐 MP3 格式
