SRT → 打字动画视频 Skill

将

.srt

字幕文件一键转化为 Remotion (React) 视频项目，生成带有"逐字打字机"特效 + 科幻星空背景的精美视频。

---

输入

用户提供：

1. 一个

   .srt

   字幕文件（标准 SRT 格式）
2. 可选参数：
   • 画幅：

     1920x1080

     （横版，默认） 或

     1080x1920

     （竖版/短视频）
   • 背景风格：

     starfield

     （默认星空） /

     gradient

     （纯渐变） /

     custom

     （用户自定义）
   • 打字速度：

     slow

     (8帧/字) /

     normal

     (5帧/字，默认) /

     fast

     (3帧/字)
   • 字体颜色方案：默认自动分配（白色/金色/蓝色/紫色交替）

---

工作流程

Step 1: 解析 SRT 文件

将 SRT 文件解析为时间轴数据结构：

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: 生成时间轴

根据解析结果生成帧级时间轴：

// 将 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

自动颜色循环：

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: 渲染

项目创建后，按以下流程操作：

# 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 段字幕按时间轴依次以打字效果展示，配合星空背景动画。