SRT → 打字动画视频 Skill
将 .srt 字幕文件一键转化为 Remotion (React) 视频项目，生成带有"逐字打字机"特效 + 科幻星空背景的精美视频。
输入
用户提供：
- 一个
.srt字幕文件（标准 SRT 格式） - 可选参数：
- 画幅：
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 自动计算
硬规则
- 禁止 CSS transition/animation，所有动画必须用
useCurrentFrame()+interpolate()/spring()驱动（Remotion 核心规则） - SRT 时间码优先，严格按照 SRT 文件的时间码定位每段字幕，不自行重算除非用户明确要求
- 一屏一句，屏幕上同时只显示一条字幕
- 自动适配，fontSize、color、typingSpeed 全部自动计算，用户无需手动指定
- 项目可独立运行，生成的项目
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 段字幕按时间轴依次以打字效果展示，配合星空背景动画。