srt-to-video

# SRT → 打字动画视频 Skill 将 `.srt` 字幕文件一键转化为 **Remotion (React)** 视频项目，生成带有"逐字打字机"特效 + 科幻星空背景的精美视频。 --- ## 输入 用户提供： 1. **一个 `.srt` 字幕文件**（标准 SRT 格式） 2. **可选参数**： - 画幅：`1920x1080`（横版，默认） 或 `1080x1920`（竖版/短视频） - 背景风格：`starfield`（默认星空） / `gradient`（纯渐变） / `custom`（用户自定义） - 打字速度：`slow`(8帧/字) / `normal`(5帧/字，默认) / `fast`(3帧/字) - 字体颜色方案：默认自动分配（白色/金色/蓝色/紫色交替） --- ## 工作流程 ### Step 1: 解析 SRT 文件 将 SRT 文件解析为时间轴数据结构： ```typescript interface SubtitleSegment { index: number; startTime: number; // in seconds endTime: number; // in seconds text: string; } ``` SRT 格式示例： ``` 1 00:00:01,000 --> 00:00:04,000 人是怎样变强的？ 2 00:00:04,500 --> 00:00:06,500 答：表演 ``` 解析规则： - 每个字幕块由空行分隔 - 第一行是序号 - 第二行是时间码：`HH:MM:SS,mmm --> HH:MM:SS,mmm` - 第三行起是字幕文本（可多行） - 时间码用于确定每段字幕的开始帧和结束帧 ### Step 2: 生成时间轴 根据解析结果生成帧级时间轴： ```typescript // 将 SRT 时间转化为帧号 function timeToFrame(timeStr: string, fps: number): number { const [hours, minutes, rest] = timeStr.split(':'); const [seconds, ms] = rest.split(','); const totalSeconds = parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds) + parseInt(ms) / 1000; return Math.round(totalSeconds * fps); } ``` 为每段字幕计算： - `startFrame`：字幕开始帧（从 SRT 时间码） - `endFrame`：字幕结束帧（从 SRT 时间码） - `typingSpeed`：按文本长度和持续时间自动计算（确保在持续时间的 60-70% 内打完字，剩余时间保持显示） - `fontSize`：根据文本长度自动调节（短文本大号，长文本小号） - `color`：自动分配颜色方案 自动 fontSize 计算规则： - ≤ 5 字: 88px - 6-10 字: 72px - 11-15 字: 56px - 16-20 字: 48px - > 20 字: 42px 自动颜色循环： ```typescript const COLOR_PALETTE = [ '#FFFFFF', // 白色 — 叙述 '#FFD866', // 金色 — 强调/结论 '#87CEEB', // 天蓝 — 解释/分析 '#DDA0DD', // 紫色 — 情感/转折 '#C8C8D0', // 灰白 — 过渡/补充 ]; ``` ### Step 3: 创建 Remotion 项目 在用户指定目录（或默认 scratch 目录）下创建完整的 Remotion 项目： ``` <project-name>/ ├── src/ │ ├── components/ │ │ ├── TypingText.tsx ← 逐字打字组件 │ │ └── Background.tsx ← 动态星空背景 │ ├── Composition.tsx ← 主合成：时间轴 + 字幕渲染 │ └── index.tsx ← Root 注册 ├── package.json └── tsconfig.json ``` ### Step 4: 渲染 项目创建后，按以下流程操作： ```bash # 1. 安装依赖 cd <project-name> && npm install # 2. 预览（Remotion Studio） npm start # 浏览器打开 http://localhost:3000 预览效果 # 3. 渲染最终视频 npm run build # 输出到 out/video.mp4 ``` --- ## 核心组件规范 ### TypingText 组件 逐字符显示文本，每个字符出现时带轻微缩放弹入效果： - **打字效果**：`localFrame / typingSpeed` 决定已显示字符数 - **字符动画**：每个新出现的字符从 `scale(1.15)` → `scale(1)`, `opacity: 0.5` → `1` - **光标**：打字时常亮，完成后闪烁（`Math.sin(frame * 0.15) > 0`） - **文字阴影**：`0 0 30px rgba(100, 200, 255, 0.3)` 营造发光感 - **字间距**：`letterSpacing: '0.05em'` ### Background 组件 动态科幻星空背景，纯 `useCurrentFrame()` 驱动： - **渐变底色**：三色渐变（深蓝→深紫→暗灰），色相随帧缓慢偏移 - **星星**：40 个随机分布的点，亮度按帧做正弦闪烁 - **流星**：5 条周期性流星，带角度和拖尾 - **星云光晕**：2 个模糊的椭圆径向渐变，缓慢漫游 - **极光丝带**：模糊的椭圆形色带，带 `skewX` 变形 - **暗角**：`radial-gradient` 压暗四角 ### Composition 主合成 - 每次屏幕上只显示 **一行字幕** - 每段字幕有 `fadeIn`（8 帧渐入）和 `fadeOut`（15 帧渐出） - 只在当前帧 ± 范围内渲染对应字幕，避免性能浪费 - 总时长根据 SRT 最后一条字幕的 endTime 自动计算 --- ## 硬规则 1. **禁止 CSS transition/animation**，所有动画必须用 `useCurrentFrame()` + `interpolate()` / `spring()` 驱动（Remotion 核心规则） 2. **SRT 时间码优先**，严格按照 SRT 文件的时间码定位每段字幕，不自行重算除非用户明确要求 3. **一屏一句**，屏幕上同时只显示一条字幕 4. **自动适配**，fontSize、color、typingSpeed 全部自动计算，用户无需手动指定 5. **项目可独立运行**，生成的项目 `npm install && npm start` 即可预览 --- ## 示例 输入 SRT： ``` 1 00:00:01,000 --> 00:00:04,000 人是怎样变强的？ 2 00:00:04,500 --> 00:00:07,000 答：表演 3 00:00:08,000 --> 00:00:12,000 心理学上叫神经可塑性 ``` 输出：一个完整的 Remotion 项目，3 段字幕按时间轴依次以打字效果展示，配合星空背景动画。