e-video-creator

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. 制作流程

1. 复制模板 → 从 assets/template/ 复制到工作目录
2. 修改内容 → 编辑 src/Root.tsx 中的 defaultProps
3. 替换资源 → 头像放 public/avatar.jpg，音乐放 public/background-music.mp3
4. 安装渲染 → 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 特效代码参考

注意事项

1. 禁用 CSS 动画 - 必须用 useCurrentFrame() 驱动
2. 禁用 Tailwind 动画类
3. 使用系统字体避免加载超时
4. 音频推荐 MP3 格式