remotion-claude-agent-demo 0.1.0

package/templates/.claude/skills/style-director/style-director/references/audience-and-scenarios.md

@@ -0,0 +1,43 @@
+# 受众与场景定位
+
+用于确定叙事语气、视觉密度、动效节奏和信息层级。
+
+## 受众分层
+
+1) 决策者 / 企业客户
+- 关键词：可信、稳重、结果导向
+- 视觉：低饱和、留白、结构清晰、少特效
+- 动效：慢、少、重点明确
+- 叙事：问题 → 方案 → 证据 → CTA
+
+2) 产品 / 运营团队
+- 关键词：效率、流程、可控
+- 视觉：干净 UI、步骤清晰、信息层级明确
+- 动效：逐步引导、聚焦重点
+- 叙事：输入 → 处理 → 输出
+
+3) 开发者 / 技术群体
+- 关键词：真实、效率、工具链
+- 视觉：IDE / 终端 / API / 日志
+- 动效：打字 + 命令执行 + 结果可视化
+- 叙事：代码 → 命令 → 结果
+
+4) 团队协作 / 创作者
+- 关键词：友好、灵活、协作
+- 视觉：柔和渐变、圆角卡片、低压感
+- 动效：轻弹性、层级展示
+- 叙事：协作流程 → 产出结果
+
+5) 大众 / 用户侧
+- 关键词：易懂、直接
+- 视觉：大字、强对比、低密度
+- 动效：直观入场、停顿充分
+
+## 快速匹配
+
+- 企业级 B2B / SaaS：Premium UI / Clean Minimal
+- AI 工具 / 开发者：Dark Tech / 真实交互
+- 教育 / 亲和型产品：Soft Paper / 手绘元素
+- 强冲击营销：Bold Kinetic / 高对比
+
+保持一个主受众 + 一个次受众，避免语气冲突。

package/templates/.claude/skills/style-director/style-director/references/interaction-innovation.md

@@ -0,0 +1,26 @@
+# 新奇交互与视觉冲击
+
+每条视频建议用 1–2 个创新点，避免堆砌。
+
+## 交互创新（AI & UX）
+
+- Prompt to Reality：左侧输入文本，右侧组件由粒子聚合成型
+- Neural Mapping：两卡片间生成流动线条，线上带发光数据包
+- Streaming Result：内容像 ChatGPT 一样流式出现，容器高度自动撑开
+- 磁吸对齐：元素靠近目标时回弹吸附
+- 指令回响：点击点触发波纹 (Ripple)，附近元素轻微震动
+- 智能聚焦：讲解局部功能时，背景组件渐模糊 (0 → 10px)
+- Dark/Light Mode Flip：场景背景色平滑翻转
+
+## 视觉冲击
+
+- 柔和聚光：焦点区域渐亮
+- 轻微扫描线：技术段落使用
+- 边缘渐光：仅关键卡片
+- 慢速推近：强化价值感
+
+## 使用原则
+
+- 单屏最多 2 个效果
+- 先可读，再惊艳
+- 企业场景更克制，技术场景更真实

package/templates/.claude/skills/style-director/style-director/references/motion-grammar.md

@@ -0,0 +1,66 @@
+# 动效语法（含真实交互）
+
+动效应传达“意义”，不是装饰。
+
+## 核心技术约定（Remotion）
+
+- FPS：30（标准）/ 60（丝滑），必要时可用 24
+- 分辨率：1920×1080（16:9）/ 1080×1920（9:16）
+- 动效引擎：位移用 `spring`，透明度/缩放/颜色用 `interpolate`
+- 入场动作：必须带 10–20px 位移补偿（大元素可到 40px）
+
+## 时间与节奏
+
+- 微交互：160–240ms
+- 文案/卡片入场：400–700ms
+- 重点强调：800–1200ms
+- 转场：300–600ms
+
+## 缓动函数库 (Easing Library)
+
+- 入场 (Entrance)：`spring`（弹性与高级感）
+- 强调 (Emphasis)：`cubic-bezier(0.34, 1.56, 0.64, 1)`（Back Out）
+- 持续动量 (Sustaining)：1.0 → 1.01–1.03 的慢速呼吸（周期 2.5–6s）
+
+## 镜头语言 (Virtual Camera)
+
+- 微推 (Slow Zoom)：全局 scale 1.00 → 1.03–1.06（镜头 ≥ 2s）
+- 平移 (The Pan)：长图 UI 用缓慢扫掠（上→下 或 左→右）
+- 视差 (Parallax)：装饰层速度 = 内容层的 1.2–1.6 倍
+
+## 核心动效动词
+
+- 淡入 + 缩放（轻强调）
+- 滑入 + 遮罩（结构引导）
+- 描边绘制（手绘/强调线）
+- 视差漂移（层次感）
+- 轮廓 → 填充（科技感）
+- 轻微扫描线（仅技术段落）
+
+## 转场规则
+
+- 同主题：滑动/遮罩
+- 新主题：淡出 + 短暂停顿
+- 关键揭示：慢推近 + 提亮
+
+## 打字与光标交互（真实感）
+
+- AI 打字：6–12 chars/sec，非线性节奏（含思考停顿）
+- 光标：必须存在；输入结束后闪烁 2–4 次再淡出
+- 选中效果：高亮从左向右擦除 (Wipe)
+- 输出呈现：逐行出现，不要整块跳出
+
+## 真实交互（IDE/终端/UI）
+
+- 终端提示符：`user@host ~/path`
+- IDE 结构：活动栏 + 文件树 + 编辑区 + 状态栏
+- 选中行高亮：低透明度、单行
+- 活动区域轻微高亮/聚焦
+
+## 立体感与镜头
+
+- 卡片轻微倾斜（2–6°）
+- 前景清晰、背景轻模糊
+- 轻推镜头用于强调
+
+避免随机抖动或过度闪烁。

package/templates/.claude/skills/style-director/style-director/references/quality-checklist.md

@@ -0,0 +1,29 @@
+# 质量检查清单（Standard Excellence）
+
+## 结构与叙事
+- [ ] 每屏只有一个主信息
+- [ ] 输入 → 处理 → 输出清晰
+- [ ] CTA 足够明显且停留时间充足
+
+## 视觉一致性
+- [ ] 所有元素遵循 8px 网格（允许 6–10px 基准）
+- [ ] 文字在复杂背景下有阴影或遮罩保护可读性
+- [ ] Primary Color 全片一致
+- [ ] 所有 3D 容器有 0.5–1px 的内描边 (Inner Glow)
+
+## 质感与纹理
+- [ ] Grain 纹理透明度 0.02–0.04，避免色彩断层
+- [ ] 暗角存在但不过重（聚焦即可）
+
+## 动效与镜头
+- [ ] 存在直线 Linear 运动时，已替换为 Ease-out 或 Spring
+- [ ] 动效节奏统一，时长一致
+- [ ] 关键文本有 0.3–0.8s 阅读停顿
+
+## 真实交互
+- [ ] 光标/打字/输出节奏可信
+- [ ] 终端/IDE 结构真实
+
+## 技术
+- [ ] 导出分辨率一致
+- [ ] 无闪烁/过度噪点

package/templates/.claude/skills/style-director/style-director/references/scene-recipes.md

@@ -0,0 +1,38 @@
+# 场景结构配方
+
+每个场景只有一个主信息。
+
+## 15s 结构
+- 0–2s：Hook
+- 2–5s：痛点
+- 5–9s：AI 流程（输入 → 处理 → 输出）
+- 9–12s：结果
+- 12–15s：CTA
+
+## 30s 结构
+- 0–3s：Hook
+- 3–8s：痛点
+- 8–16s：工作流演示
+- 16–23s：功能亮点
+- 23–27s：信任证明
+- 27–30s：CTA
+
+## 45s 结构
+- 0–4s：Hook
+- 4–10s：痛点
+- 10–22s：AI 工作流（多步骤）
+- 22–32s：功能卡片（3 项）
+- 32–40s：口碑或数据
+- 40–45s：CTA
+
+## 60s 教程结构
+- 0–5s：目标
+- 5–15s：步骤概览
+- 15–40s：真实演示（IDE/终端/UI）
+- 40–52s：结果总结
+- 52–60s：CTA
+
+## 读感规则
+
+- 关键文案后停顿 0.3–0.8s
+- 重点元素一屏最多 2 个

package/templates/.claude/skills/style-director/style-director/references/visual-style-system.md

@@ -0,0 +1,148 @@
+# 视觉风格系统（Advanced Aesthetics）
+
+目标：高端、结构化、低噪点、可读性强。
+
+## 1. 图层合成架构 (Layering Strategy)
+
+每一个场景必须由以下四层组成：
+
+1) 背景层 (Ambient Layer)
+- 动态网格 (Grid)，轻微漂移或视差
+- 径向渐变 (Radial Gradient)，形成聚光中心
+
+2) 中景层 (Content Layer)
+- 主体 UI / 视频 / 关键图形
+- 允许 2–6° 的轻微 3D 倾斜
+
+3) 装饰层 (Accent Layer)
+- 悬浮粒子、线条、光点
+- 只强化重点，避免干扰阅读
+
+4) 覆盖层 (Overlay Layer)
+- 极轻微胶片颗粒 (Film Grain, Opacity 0.02–0.04)
+- 边缘暗角 (Vignette) 提升聚焦
+
+图层运动原则：
+- 背景层移动最慢，装饰层次之，内容层最清晰
+- 同屏不超过 2 种装饰效果，避免“廉价感”
+
+## 2. 核心 CSS 视觉配方
+
+### 高端毛玻璃 (Premium Glass)
+```css
+/* Light preset */
+background: rgba(255, 255, 255, 0.60-0.80);
+border: 1px solid rgba(255, 255, 255, 0.25-0.40);
+backdrop-filter: blur(10-16px) saturate(130-180%);
+box-shadow: 0 12-24px 36-60px rgba(0, 0, 0, 0.10-0.20);
+
+/* Dark preset */
+background: rgba(255, 255, 255, 0.05-0.12);
+border: 1px solid rgba(255, 255, 255, 0.08-0.18);
+backdrop-filter: blur(12-20px) saturate(140-200%);
+box-shadow: 0 12-24px 36-60px rgba(0, 0, 0, 0.25-0.45);
+```
+
+### AI 逻辑流光 (Logic Flow Stroke)
+```css
+/* 用渐变描边模拟“AI 正在处理” */
+border: 1px solid transparent;
+background: linear-gradient(#0000, #0000) padding-box,
+  conic-gradient(from 0deg, #00F5FF, #8B5CF6, #00F5FF) border-box;
+filter: drop-shadow(0 0 10px rgba(0, 245, 255, 0.35));
+```
+
+### 3D 空间配置 (Perspective)
+```css
+container: perspective(1000-1400px);
+card: rotateY(-8deg to -18deg) rotateX(6deg to 12deg) scale(0.95-1.00);
+```
+
+### 轻量暗角 (Vignette)
+```css
+background: radial-gradient(ellipse at center,
+  rgba(0,0,0,0.00) 55%,
+  rgba(0,0,0,0.30) 100%);
+```
+
+## 风格家族
+
+### 1) Dark Grid Tech
+- 背景：黑色网格，细微星点
+- 色彩：霓虹强调色（控制在 1–2 个）
+- 字体：几何无衬线 + 细描边标题
+- 质感：轻微扫描线或噪点（克制）
+- 适用：AI 工具、技术发布、开发者向产品
+
+### 2) Soft Paper AI
+- 背景：浅色网格纸感 + 柔和渐变
+- 色彩：粉/蓝/薄荷等低饱和
+- 字体：人文无衬线 + 轻量衬线点缀
+- 质感：手绘线条、软阴影
+- 适用：友好型 AI、教育、协作产品
+
+### 3) Premium UI Glass
+- 背景：深灰 + 聚光渐亮
+- 色彩：中性为主 + 单一强调
+- 字体：干净、层级强
+- 表面：圆角卡片 + 玻璃质感
+- 适用：企业级 SaaS
+
+### 4) Clean Corporate Minimal
+- 背景：白或近白
+- 色彩：小范围渐变 + 单色强调
+- 字体：高可读性
+- 适用：可信、稳重的发布
+
+### 5) Bold Kinetic Type
+- 背景：纯色高对比
+- 色彩：2–3 色以内
+- 字体：大字号标题为主
+- 适用：短促、高冲击营销
+
+## Remotion 预设主题（Master Themes）
+
+### A. Elite Dark AI（深度科技感）
+- 适用：AI 模型发布、开发者工具、黑科技展示
+- 色彩体系：
+  - Background: #050505 (Obsidian)
+  - Primary: #8B5CF6 (Vivid Violet)
+  - Accent: #00F5FF (Cyber Cyan)
+  - Text: #F8FAFC
+- 视觉特征：动态网格背景、霓虹流光边框、3D 空间感
+- Spring Config: `{ stiffness: 120, damping: 14, mass: 1 }`
+
+### B. Glassmorphism SaaS（现代高端感）
+- 适用：办公协作、B2B 产品 Demo、数据分析
+- 色彩体系：
+  - Background: 线性渐变 (135deg, #F1F5F9 0%, #E2E8F0 100%)
+  - Primary: #2563EB (Royal Blue)
+  - Secondary: #6366F1 (Indigo)
+  - Card: rgba(255, 255, 255, 0.6–0.8) + blur(10–16px)
+- 视觉特征：柔和多重阴影、毛玻璃容器、多层景深
+- Spring Config: `{ stiffness: 80, damping: 12, mass: 0.8 }`
+
+### C. Apple-style Minimalist（极致简洁感）
+- 适用：消费级 AI、创意工具、高端品牌展示
+- 色彩体系：
+  - Background: #FFFFFF 或 #F5F5F7
+  - Primary: #1D1D1F (Jet Black)
+  - Accent: #06C (Classic Blue)
+- 视觉特征：极宽留白、超大粗体字、平滑推近镜头
+- Spring Config: `{ stiffness: 60, damping: 15, mass: 1.2 }`
+
+## 统一原则
+
+- 统一网格（8 或 12 列）和边距
+- 每屏一个主视觉 + 一个辅助信息
+- 统一圆角、阴影、线宽
+- 渐变方向一致（横向或纵向统一）
+- 控制纹理与噪点强度，避免廉价感
+
+## 视觉原子参数（Visual Polish）
+
+- 圆角：L 24–32px / M 12–16px / S 6–8px
+- 阴影：
+  - Float: 0 20px 50px rgba(0,0,0,0.12–0.20)
+  - Glow: 0 0 12–18px ${color}66–99
+- 模糊：Standard 10–16px / Deep 18–28px

package/templates/.claude/skills/subtitle-composer/SKILL.md

@@ -0,0 +1,304 @@
+---
+name: subtitle-composer
+version: 1.0.0
+description: 字幕合成技能。处理字幕样式、自动分割长句、生成Remotion字幕数据。
+triggers:
+  - 字幕
+  - subtitle
+  - 分割字幕
+  - 字幕样式
+tools:
+  - Read
+  - Write
+  - Bash
+---
+
+# 字幕合成技能 (Subtitle Composer)
+
+将语音合成产生的VTT字幕转换为Remotion可用的字幕数据，并确保字幕样式符合视频规范。
+
+## 核心原则
+
+1. **单行显示** - 字幕不换行，超长文本分割成多个片段
+2. **最大字符数** - 中文约25字符，英文约50字符
+3. **自然断句** - 在标点符号或语义边界处分割
+4. **时间精确** - 字幕时间与语音严格同步
+
+## 字幕样式预设
+
+### 1. 简约风格 (Minimal)
+```typescript
+const minimalStyle = {
+  position: "bottom",      // bottom | top | center
+  paddingBottom: 70,
+  backgroundColor: "rgba(0, 0, 0, 0.8)",
+  padding: "14px 40px",
+  borderRadius: 8,
+  fontSize: 36,
+  fontWeight: 600,
+  color: "#FFFFFF",
+  maxWidth: 1600,
+  animation: "fade",       // fade | slide | pop | none
+};
+```
+
+### 2. 卡拉OK风格 (Karaoke)
+```typescript
+const karaokeStyle = {
+  position: "bottom",
+  highlightColor: "#FFD700",
+  baseColor: "#FFFFFF",
+  animation: "highlight",  // 逐字高亮
+};
+```
+
+### 3. 渐显风格 (Typewriter)
+```typescript
+const typewriterStyle = {
+  position: "bottom",
+  animation: "typewriter", // 逐字显示
+  cursorColor: "#22D3EE",
+};
+```
+
+## VTT 解析规则
+
+```typescript
+// 解析VTT文件获取字幕数据
+function parseVTT(vttContent: string, fps: number = 30): SubtitleCue[] {
+  const cues: SubtitleCue[] = [];
+  const lines = vttContent.trim().split('\n');
+
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i].trim();
+
+    // 匹配时间戳行: 00:00:00,100 --> 00:00:05,237
+    if (line.includes('-->')) {
+      const [startStr, endStr] = line.split('-->').map(s => s.trim());
+      const start = parseVttTime(startStr, fps);
+      const end = parseVttTime(endStr, fps);
+
+      // 获取字幕文本
+      i++;
+      let text = '';
+      while (i < lines.length && lines[i].trim() && !lines[i].match(/^\d+$/)) {
+        text += (text ? ' ' : '') + lines[i].trim();
+        i++;
+      }
+
+      if (text) {
+        cues.push({ start, end, text });
+      }
+    } else {
+      i++;
+    }
+  }
+
+  return cues;
+}
+
+// 时间戳转帧数
+function parseVttTime(timeStr: string, fps: number): number {
+  const parts = timeStr.split(':');
+  const seconds =
+    parseFloat(parts[0]) * 3600 +
+    parseFloat(parts[1]) * 60 +
+    parseFloat(parts[2].replace(',', '.'));
+  return Math.round(seconds * fps);
+}
+```
+
+## 长句分割算法
+
+```typescript
+const MAX_CHARS = 25; // 中文最大字符数
+
+function splitLongSubtitle(cue: SubtitleCue): SubtitleCue[] {
+  const { start, end, text } = cue;
+
+  // 如果文本足够短，直接返回
+  if (text.length <= MAX_CHARS) {
+    return [cue];
+  }
+
+  // 分割点优先级：句号 > 逗号 > 顿号 > 空格 > 强制分割
+  const splitPoints = ['。', '！', '？', '，', '、', '；', ' '];
+
+  const segments: string[] = [];
+  let remaining = text;
+
+  while (remaining.length > MAX_CHARS) {
+    let splitIndex = -1;
+
+    // 在前MAX_CHARS字符中找分割点
+    for (const point of splitPoints) {
+      const idx = remaining.lastIndexOf(point, MAX_CHARS);
+      if (idx > 0) {
+        splitIndex = idx + 1;
+        break;
+      }
+    }
+
+    // 没找到分割点，强制在MAX_CHARS处分割
+    if (splitIndex === -1) {
+      splitIndex = MAX_CHARS;
+    }
+
+    segments.push(remaining.slice(0, splitIndex).trim());
+    remaining = remaining.slice(splitIndex).trim();
+  }
+
+  if (remaining) {
+    segments.push(remaining);
+  }
+
+  // 按比例分配时间
+  const totalDuration = end - start;
+  const totalChars = segments.reduce((sum, s) => sum + s.length, 0);
+
+  const result: SubtitleCue[] = [];
+  let currentStart = start;
+
+  for (const segment of segments) {
+    const duration = Math.round((segment.length / totalChars) * totalDuration);
+    result.push({
+      start: currentStart,
+      end: currentStart + duration,
+      text: segment,
+    });
+    currentStart += duration;
+  }
+
+  return result;
+}
+```
+
+## Remotion 字幕组件
+
+```typescript
+// Subtitles.tsx
+import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";
+
+interface SubtitleCue {
+  start: number;
+  end: number;
+  text: string;
+}
+
+interface SubtitlesProps {
+  cues: SubtitleCue[];
+  style?: "minimal" | "karaoke" | "typewriter";
+}
+
+export const Subtitles: React.FC<SubtitlesProps> = ({
+  cues,
+  style = "minimal"
+}) => {
+  const frame = useCurrentFrame();
+
+  const currentCue = cues.find(
+    (cue) => frame >= cue.start && frame <= cue.end
+  );
+
+  if (!currentCue) return null;
+
+  // 淡入淡出动画
+  const fadeIn = interpolate(
+    frame,
+    [currentCue.start, currentCue.start + 6],
+    [0, 1],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+
+  const fadeOut = interpolate(
+    frame,
+    [currentCue.end - 6, currentCue.end],
+    [1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+
+  const opacity = Math.min(fadeIn, fadeOut);
+
+  // 上滑动画
+  const translateY = interpolate(
+    frame,
+    [currentCue.start, currentCue.start + 8],
+    [10, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+
+  return (
+    <AbsoluteFill
+      style={{
+        justifyContent: "flex-end",
+        alignItems: "center",
+        paddingBottom: 70,
+      }}
+    >
+      <div
+        style={{
+          opacity,
+          transform: `translateY(${translateY}px)`,
+          backgroundColor: "rgba(0, 0, 0, 0.8)",
+          padding: "14px 40px",
+          borderRadius: 8,
+          maxWidth: 1600,
+          textAlign: "center",
+          whiteSpace: "nowrap",
+        }}
+      >
+        <span
+          style={{
+            color: "#FFFFFF",
+            fontSize: 36,
+            fontWeight: 600,
+            letterSpacing: 1,
+          }}
+        >
+          {currentCue.text}
+        </span>
+      </div>
+    </AbsoluteFill>
+  );
+};
+```
+
+## 使用流程
+
+1. **读取VTT文件**
+```bash
+# VTT文件由voice-synthesizer生成
+cat public/voices/seg_01_hook.vtt
+```
+
+2. **解析并分割字幕**
+```typescript
+const vttContent = fs.readFileSync('public/voices/seg_01_hook.vtt', 'utf-8');
+const cues = parseVTT(vttContent, 30);
+const splitCues = cues.flatMap(splitLongSubtitle);
+```
+
+3. **生成Remotion数据**
+```typescript
+const SUBTITLES = {
+  hook: splitCues,
+  // ... 其他场景
+};
+```
+
+4. **在Sequence中使用**
+```tsx
+<Sequence from={0} durationInFrames={300}>
+  <MyScene />
+  <Audio src={staticFile("voices/seg_01_hook.mp3")} />
+  <Subtitles cues={SUBTITLES.hook} style="minimal" />
+</Sequence>
+```
+
+## 质量检查
+
+- [ ] 每条字幕不超过25个中文字符
+- [ ] 字幕时间与语音同步
+- [ ] 分割点在语义边界
+- [ ] 无重叠或间隙过大