remotion-claude-agent-demo 0.1.0

package/templates/.claude/skills/bgm-manager/SKILL.md

@@ -0,0 +1,334 @@
+---
+name: bgm-manager
+version: 1.0.0
+description: 背景音乐管理技能。搜索免费无版权音乐，推荐合适BGM，管理音量曲线，确保BGM不抢戏。
+triggers:
+  - 背景音乐
+  - BGM
+  - background music
+  - 音乐搜索
+tools:
+  - WebSearch
+  - Bash
+  - Read
+  - Write
+---
+
+# 背景音乐管理技能 (BGM Manager)
+
+为视频选择和管理背景音乐，包括搜索免费音乐库、推荐合适的 BGM、设计音量曲线、提供下载和集成方案。
+
+## 免费无版权音乐库
+
+### 1. Pixabay Music
+**网站**: https://pixabay.com/music/
+**特点**:
+- 完全免费，无需署名
+- 高质量音乐
+- 多种风格和情绪分类
+- 支持按时长筛选
+
+**搜索示例**:
+- 科技感: "tech", "futuristic", "ambient"
+- 企业风: "corporate", "motivational", "uplifting"
+- 教程风: "calm", "focus", "background"
+
+### 2. Mixkit
+**网站**: https://mixkit.co/free-stock-music/
+**特点**:
+- 免费商用
+- 按类别分类（Corporate, Tech, Ambient）
+- 音质优秀
+
+### 3. FreePD
+**网站**: https://freepd.com/
+**特点**:
+- 公共领域音乐
+- 完全免费
+- 按情绪和风格分类
+
+### 4. YouTube Audio Library
+**网站**: https://www.youtube.com/audiolibrary
+**特点**:
+- Google 官方音乐库
+- 部分需要署名
+- 质量很高
+
+## BGM 推荐策略
+
+根据视频类型推荐合适的 BGM：
+
+### 产品教程 (2-4分钟)
+```yaml
+mood: 平静、专注、不干扰
+tempo: 60-90 BPM
+keywords: ["ambient", "calm", "focus", "background", "subtle"]
+volume_range: 0.10-0.15 (-30dB to -26dB)
+characteristics:
+  - 无明显旋律
+  - 无人声
+  - 节奏平缓
+  - 不抢戏
+recommended_tracks:
+  - "Calm Technology" (Pixabay)
+  - "Soft Background" (Mixkit)
+  - "Ambient Corporate" (FreePD)
+```
+
+### Demo 演示 (4-7分钟)
+```yaml
+mood: 现代、科技感、有节奏
+tempo: 90-120 BPM
+keywords: ["tech", "modern", "electronic", "upbeat", "inspiring"]
+volume_range: 0.12-0.18 (-28dB to -24dB)
+characteristics:
+  - 电子音色
+  - 节奏明确但不强烈
+  - 有层次感
+  - 适合展示动态内容
+recommended_tracks:
+  - "Technology Innovation" (Pixabay)
+  - "Digital World" (Mixkit)
+  - "Future Tech" (FreePD)
+```
+
+### SaaS 介绍 (3-5分钟)
+```yaml
+mood: 专业、可信、有动力
+tempo: 80-110 BPM
+keywords: ["corporate", "professional", "motivational", "uplifting", "business"]
+volume_range: 0.12-0.16 (-28dB to -26dB)
+characteristics:
+  - 企业风格
+  - 正面积极
+  - 不过于激进
+  - 衬托而非主导
+recommended_tracks:
+  - "Corporate Success" (Pixabay)
+  - "Business Presentation" (Mixkit)
+  - "Motivational Corporate" (FreePD)
+```
+
+## 音量曲线设计
+
+```typescript
+interface VolumePoint {
+  time: number;    // 时间（秒）
+  volume: number;  // 音量 (0-1)
+}
+
+type VolumeCurve = VolumePoint[];
+
+// 标准音量曲线：淡入 → 维持 → 淡出
+function createStandardVolumeCurve(
+  totalDuration: number,
+  fadeInDuration: number = 3,
+  fadeOutDuration: number = 3,
+  mainVolume: number = 0.15
+): VolumeCurve {
+  return [
+    { time: 0, volume: 0 },                              // 开始静音
+    { time: fadeInDuration, volume: mainVolume },        // 淡入完成
+    { time: totalDuration - fadeOutDuration, volume: mainVolume }, // 维持音量
+    { time: totalDuration, volume: 0 },                  // 结束静音
+  ];
+}
+
+// Ducking 音量曲线：对白时降低 BGM
+function createDuckingVolumeCurve(
+  totalDuration: number,
+  dialogueTimes: Array<{ start: number; end: number }>,
+  mainVolume: number = 0.15,
+  duckVolume: number = 0.08
+): VolumeCurve {
+  const curve: VolumeCurve = [{ time: 0, volume: 0 }];
+
+  let currentTime = 3; // 淡入 3 秒
+  curve.push({ time: currentTime, volume: mainVolume });
+
+  for (const { start, end } of dialogueTimes) {
+    // 对白前 0.5s 开始降低音量
+    curve.push({ time: start - 0.5, volume: mainVolume });
+    curve.push({ time: start, volume: duckVolume });
+
+    // 对白结束后 0.5s 恢复音量
+    curve.push({ time: end, volume: duckVolume });
+    curve.push({ time: end + 0.5, volume: mainVolume });
+  }
+
+  // 淡出
+  curve.push({ time: totalDuration - 3, volume: mainVolume });
+  curve.push({ time: totalDuration, volume: 0 });
+
+  return curve;
+}
+```
+
+## Remotion 音量控制实现
+
+```typescript
+// src/utils/bgm-volume.ts
+export function getBGMVolume(frame: number, curve: VolumeCurve, fps: number = 30): number {
+  const timeInSeconds = frame / fps;
+
+  // 线性插值
+  for (let i = 0; i < curve.length - 1; i++) {
+    const current = curve[i];
+    const next = curve[i + 1];
+
+    if (timeInSeconds >= current.time && timeInSeconds <= next.time) {
+      const ratio = (timeInSeconds - current.time) / (next.time - current.time);
+      return current.volume + (next.volume - current.volume) * ratio;
+    }
+  }
+
+  // 超出范围返回 0
+  return 0;
+}
+
+// 在 MainVideo.tsx 中使用
+import { Audio, staticFile } from 'remotion';
+import { getBGMVolume } from './utils/bgm-volume';
+
+const bgmVolumeCurve = [
+  { time: 0, volume: 0 },
+  { time: 3, volume: 0.15 },
+  { time: 117, volume: 0.15 },
+  { time: 120, volume: 0 },
+];
+
+<Audio
+  src={staticFile('assets/bgm/tech-ambient.mp3')}
+  volume={(frame) => getBGMVolume(frame, bgmVolumeCurve)}
+/>
+```
+
+## 搜索和下载流程
+
+### 1. 搜索合适的 BGM
+
+使用 WebSearch 搜索：
+```bash
+# 示例搜索
+site:pixabay.com music tech ambient download
+site:mixkit.co free stock music corporate
+```
+
+### 2. 下载 BGM
+
+```bash
+# 使用 curl 或 wget 下载
+curl -o assets/bgm/tech-ambient.mp3 "https://example.com/music.mp3"
+
+# 或使用 yt-dlp（如果从 YouTube Audio Library）
+yt-dlp -x --audio-format mp3 -o "assets/bgm/%(title)s.mp3" "URL"
+```
+
+### 3. 检查音频信息
+
+```bash
+# 使用 ffprobe 检查时长和格式
+ffprobe -v error -show_entries format=duration -of csv=p=0 assets/bgm/tech-ambient.mp3
+
+# 检查音频属性
+ffprobe -v error -show_entries stream=codec_name,sample_rate,channels -of csv=p=0 assets/bgm/tech-ambient.mp3
+```
+
+## BGM 配置输出格式
+
+```yaml
+bgm_config:
+  file_path: "./assets/bgm/tech-ambient.mp3"
+  duration: 120.5
+  source: "Pixabay Music"
+  license: "Free for commercial use, no attribution required"
+  url: "https://pixabay.com/music/..."
+
+  metadata:
+    title: "Technology Ambient"
+    artist: "AudioCreator"
+    mood: "calm, focused, technological"
+    tempo: 85
+
+  volume_curve:
+    - { time: 0, volume: 0 }
+    - { time: 3, volume: 0.15 }
+    - { time: 117, volume: 0.15 }
+    - { time: 120, volume: 0 }
+
+  recommendations:
+    - "音量设置为 0.12-0.15，确保不抢配音"
+    - "淡入淡出各 3 秒，避免突兀"
+    - "如有重要对白，考虑使用 ducking"
+```
+
+## 使用建议
+
+### 音量标准
+```
+配音（主音频）: -15dB to -12dB (音量约 0.8-1.0)
+BGM（背景音乐）: -30dB to -26dB (音量约 0.10-0.15)
+音效（SFX）:    -20dB to -18dB (音量约 0.3-0.5)
+```
+
+### BGM 选择原则
+1. **不抢戏**: BGM 应衬托而非主导，用户应专注于内容而非音乐
+2. **风格匹配**: 科技产品配科技感音乐，企业视频配企业风
+3. **无人声**: 避免带人声的 BGM，会干扰配音
+4. **时长匹配**: BGM 时长应≥视频时长，或支持循环
+5. **淡入淡出**: 始终使用淡入淡出，避免突然开始/结束
+
+### 特殊场景处理
+- **Hook 开场**: BGM 可稍强，吸引注意力
+- **代码演示**: BGM 应极低或静音，让用户专注
+- **CTA 结尾**: BGM 可稍强，增强号召力
+- **转场时刻**: BGM 音量变化配合转场效果
+
+## 集成示例
+
+### 在 creative_plan.yaml 中定义
+```yaml
+asset_requirements:
+  bgm:
+    required: true
+    type: "tech_ambient"
+    duration: 120
+    mood: "calm, focused, technological"
+    volume_profile: "standard"  # or "ducking"
+```
+
+### Crafter Agent 执行
+```yaml
+collected_assets:
+  bgm:
+    file_path: "./assets/bgm/tech-ambient.mp3"
+    duration: 120.5
+    config: { volume_curve: [...] }
+```
+
+### Composer Agent 使用
+```tsx
+// MainVideo.tsx
+{bgmConfig && (
+  <Audio
+    src={staticFile(bgmConfig.file_path)}
+    volume={(frame) => getBGMVolume(frame, bgmConfig.volume_curve)}
+  />
+)}
+```
+
+## 优势
+
+✅ **专业音质**: 使用高质量免费音乐库
+✅ **合法合规**: 确保版权合规，避免侵权
+✅ **智能推荐**: 根据视频类型自动推荐合适BGM
+✅ **音量控制**: 动态音量曲线，确保不抢配音
+✅ **自动化**: 集成到视频生成流程
+
+## 注意事项
+
+- 始终检查音乐的许可证条款
+- 如需署名，在视频结尾添加音乐信息
+- 下载的 BGM 文件应放在 `assets/bgm/` 目录
+- BGM 是可选的，不是所有视频都需要
+- 如果视频已有丰富的音效，可以不加 BGM

package/templates/.claude/skills/remotion-best-practices/SKILL.md

@@ -0,0 +1,45 @@
+---
+name: remotion-best-practices
+description: Best practices for Remotion - Video creation in React
+metadata:
+  tags: remotion, video, react, animation, composition
+---
+
+## When to use
+
+Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.
+
+## How to use
+
+Read individual rule files for detailed explanations and code examples:
+
+- [rules/3d.md](rules/3d.md) - 3D content in Remotion using Three.js and React Three Fiber
+- [rules/animations.md](rules/animations.md) - Fundamental animation skills for Remotion
+- [rules/assets.md](rules/assets.md) - Importing images, videos, audio, and fonts into Remotion
+- [rules/audio.md](rules/audio.md) - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
+- [rules/calculate-metadata.md](rules/calculate-metadata.md) - Dynamically set composition duration, dimensions, and props
+- [rules/can-decode.md](rules/can-decode.md) - Check if a video can be decoded by the browser using Mediabunny
+- [rules/charts.md](rules/charts.md) - Chart and data visualization patterns for Remotion
+- [rules/compositions.md](rules/compositions.md) - Defining compositions, stills, folders, default props and dynamic metadata
+- [rules/display-captions.md](rules/display-captions.md) - Displaying captions in Remotion with TikTok-style pages and word highlighting
+- [rules/extract-frames.md](rules/extract-frames.md) - Extract frames from videos at specific timestamps using Mediabunny
+- [rules/fonts.md](rules/fonts.md) - Loading Google Fonts and local fonts in Remotion
+- [rules/get-audio-duration.md](rules/get-audio-duration.md) - Getting the duration of an audio file in seconds with Mediabunny
+- [rules/get-video-dimensions.md](rules/get-video-dimensions.md) - Getting the width and height of a video file with Mediabunny
+- [rules/get-video-duration.md](rules/get-video-duration.md) - Getting the duration of a video file in seconds with Mediabunny
+- [rules/gifs.md](rules/gifs.md) - Displaying GIFs synchronized with Remotion's timeline
+- [rules/images.md](rules/images.md) - Embedding images in Remotion using the Img component
+- [rules/import-srt-captions.md](rules/import-srt-captions.md) - Importing .srt subtitle files into Remotion using @remotion/captions
+- [rules/lottie.md](rules/lottie.md) - Embedding Lottie animations in Remotion
+- [rules/measuring-dom-nodes.md](rules/measuring-dom-nodes.md) - Measuring DOM element dimensions in Remotion
+- [rules/measuring-text.md](rules/measuring-text.md) - Measuring text dimensions, fitting text to containers, and checking overflow
+- [rules/sequencing.md](rules/sequencing.md) - Sequencing patterns for Remotion - delay, trim, limit duration of items
+- [rules/tailwind.md](rules/tailwind.md) - Using TailwindCSS in Remotion
+- [rules/text-animations.md](rules/text-animations.md) - Typography and text animation patterns for Remotion
+- [rules/timing.md](rules/timing.md) - Interpolation curves in Remotion - linear, easing, spring animations
+- [rules/transcribe-captions.md](rules/transcribe-captions.md) - Transcribing audio to generate captions in Remotion
+- [rules/transitions.md](rules/transitions.md) - Scene transition patterns for Remotion
+- [rules/trimming.md](rules/trimming.md) - Trimming patterns for Remotion - cut the beginning or end of animations
+- [rules/videos.md](rules/videos.md) - Embedding videos in Remotion - trimming, volume, speed, looping, pitch
+- [rules/parameters.md](rules/parameters.md) - Make a video parametrizable by adding a Zod schema
+- [rules/maps.md](rules/maps.md) - Add a map using Mapbox and animate it

package/templates/.claude/skills/remotion-best-practices/rules/3d.md

@@ -0,0 +1,86 @@
+---
+name: 3d
+description: 3D content in Remotion using Three.js and React Three Fiber.
+metadata:
+  tags: 3d, three, threejs
+---
+
+# Using Three.js and React Three Fiber in Remotion
+
+Follow React Three Fiber and Three.js best practices.  
+Only the following Remotion-specific rules need to be followed:
+
+## Prerequisites
+
+First, the `@remotion/three` package needs to be installed.  
+If it is not, use the following command:
+
+```bash
+npx remotion add @remotion/three # If project uses npm
+bunx remotion add @remotion/three # If project uses bun
+yarn remotion add @remotion/three # If project uses yarn
+pnpm exec remotion add @remotion/three # If project uses pnpm
+```
+
+## Using ThreeCanvas
+
+You MUST wrap 3D content in `<ThreeCanvas>` and include proper lighting.  
+`<ThreeCanvas>` MUST have a `width` and `height` prop.
+
+```tsx
+import { ThreeCanvas } from "@remotion/three";
+import { useVideoConfig } from "remotion";
+
+const { width, height } = useVideoConfig();
+
+<ThreeCanvas width={width} height={height}>
+  <ambientLight intensity={0.4} />
+  <directionalLight position={[5, 5, 5]} intensity={0.8} />
+  <mesh>
+    <sphereGeometry args={[1, 32, 32]} />
+    <meshStandardMaterial color="red" />
+  </mesh>
+</ThreeCanvas>
+```
+
+## No animations not driven by `useCurrentFrame()`
+
+Shaders, models etc MUST NOT animate by themselves.  
+No animations are allowed unless they are driven by `useCurrentFrame()`.  
+Otherwise, it will cause flickering during rendering.  
+
+Using `useFrame()` from `@react-three/fiber` is forbidden.
+
+## Animate using `useCurrentFrame()`
+
+Use `useCurrentFrame()` to perform animations.
+
+```tsx
+const frame = useCurrentFrame();
+const rotationY = frame * 0.02;
+
+<mesh rotation={[0, rotationY, 0]}>
+  <boxGeometry args={[2, 2, 2]} />
+  <meshStandardMaterial color="#4a9eff" />
+</mesh>
+```
+
+## Using `<Sequence>` inside `<ThreeCanvas>`
+
+The `layout` prop of any `<Sequence>` inside a `<ThreeCanvas>` must be set to `none`.
+
+```tsx
+import { Sequence } from "remotion";
+import { ThreeCanvas } from "@remotion/three";
+
+const { width, height } = useVideoConfig();
+
+<ThreeCanvas width={width} height={height}>
+  <Sequence layout="none">
+    <mesh>
+      <boxGeometry args={[2, 2, 2]} />
+      <meshStandardMaterial color="#4a9eff" />
+    </mesh>
+  </Sequence>
+</ThreeCanvas>
+```

package/templates/.claude/skills/remotion-best-practices/rules/animations.md

@@ -0,0 +1,29 @@
+---
+name: animations
+description: Fundamental animation skills for Remotion
+metadata:
+  tags: animations, transitions, frames, useCurrentFrame
+---
+
+All animations MUST be driven by the `useCurrentFrame()` hook.  
+Write animations in seconds and multiply them by the `fps` value from `useVideoConfig()`.
+
+```tsx
+import { useCurrentFrame } from "remotion";
+
+export const FadeIn = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
+    extrapolateRight: 'clamp',
+  });
+ 
+  return (
+    <div style={{ opacity }}>Hello World!</div>
+  );
+};
+```
+
+CSS transitions or animations are FORBIDDEN - they will not render correctly.  
+Tailwind animation class names are FORBIDDEN - they will not render correctly.  

package/templates/.claude/skills/remotion-best-practices/rules/assets/charts-bar-chart.tsx

@@ -0,0 +1,173 @@
+import {loadFont} from '@remotion/google-fonts/Inter';
+import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
+
+const {fontFamily} = loadFont();
+
+const COLOR_BAR = '#D4AF37';
+const COLOR_TEXT = '#ffffff';
+const COLOR_MUTED = '#888888';
+const COLOR_BG = '#0a0a0a';
+const COLOR_AXIS = '#333333';
+
+// Ideal composition size: 1280x720
+
+const Title: React.FC<{children: React.ReactNode}> = ({children}) => (
+	<div style={{textAlign: 'center', marginBottom: 40}}>
+		<div style={{color: COLOR_TEXT, fontSize: 48, fontWeight: 600}}>
+			{children}
+		</div>
+	</div>
+);
+
+const YAxis: React.FC<{steps: number[]; height: number}> = ({
+	steps,
+	height,
+}) => (
+	<div
+		style={{
+			display: 'flex',
+			flexDirection: 'column',
+			justifyContent: 'space-between',
+			height,
+			paddingRight: 16,
+		}}
+	>
+		{steps
+			.slice()
+			.reverse()
+			.map((step) => (
+				<div
+					key={step}
+					style={{
+						color: COLOR_MUTED,
+						fontSize: 20,
+						textAlign: 'right',
+					}}
+				>
+					{step.toLocaleString()}
+				</div>
+			))}
+	</div>
+);
+
+const Bar: React.FC<{
+	height: number;
+	progress: number;
+}> = ({height, progress}) => (
+	<div
+		style={{
+			flex: 1,
+			display: 'flex',
+			flexDirection: 'column',
+			justifyContent: 'flex-end',
+		}}
+	>
+		<div
+			style={{
+				width: '100%',
+				height,
+				backgroundColor: COLOR_BAR,
+				borderRadius: '8px 8px 0 0',
+				opacity: progress,
+			}}
+		/>
+	</div>
+);
+
+const XAxis: React.FC<{
+	children: React.ReactNode;
+	labels: string[];
+	height: number;
+}> = ({children, labels, height}) => (
+	<div style={{flex: 1, display: 'flex', flexDirection: 'column'}}>
+		<div
+			style={{
+				display: 'flex',
+				alignItems: 'flex-end',
+				gap: 16,
+				height,
+				borderLeft: `2px solid ${COLOR_AXIS}`,
+				borderBottom: `2px solid ${COLOR_AXIS}`,
+				paddingLeft: 16,
+			}}
+		>
+			{children}
+		</div>
+		<div
+			style={{
+				display: 'flex',
+				gap: 16,
+				paddingLeft: 16,
+				marginTop: 12,
+			}}
+		>
+			{labels.map((label) => (
+				<div
+					key={label}
+					style={{
+						flex: 1,
+						textAlign: 'center',
+						color: COLOR_MUTED,
+						fontSize: 20,
+					}}
+				>
+					{label}
+				</div>
+			))}
+		</div>
+	</div>
+);
+
+export const MyAnimation = () => {
+	const frame = useCurrentFrame();
+	const {fps, height} = useVideoConfig();
+
+	const data = [
+		{month: 'Jan', price: 2039},
+		{month: 'Mar', price: 2160},
+		{month: 'May', price: 2327},
+		{month: 'Jul', price: 2426},
+		{month: 'Sep', price: 2634},
+		{month: 'Nov', price: 2672},
+	];
+
+	const minPrice = 2000;
+	const maxPrice = 2800;
+	const priceRange = maxPrice - minPrice;
+	const chartHeight = height - 280;
+	const yAxisSteps = [2000, 2400, 2800];
+
+	return (
+		<AbsoluteFill
+			style={{
+				backgroundColor: COLOR_BG,
+				padding: 60,
+				display: 'flex',
+				flexDirection: 'column',
+				fontFamily,
+			}}
+		>
+			<Title>Gold Price 2024</Title>
+
+			<div style={{display: 'flex', flex: 1}}>
+				<YAxis steps={yAxisSteps} height={chartHeight} />
+				<XAxis height={chartHeight} labels={data.map((d) => d.month)}>
+					{data.map((item, i) => {
+						const progress = spring({
+							frame: frame - i * 5 - 10,
+							fps,
+							config: {damping: 18, stiffness: 80},
+						});
+
+						const barHeight =
+							((item.price - minPrice) / priceRange) * chartHeight * progress;
+
+						return (
+							<Bar key={item.month} height={barHeight} progress={progress} />
+						);
+					})}
+				</XAxis>
+			</div>
+		</AbsoluteFill>
+	);
+};