Remotion视频生成技能：App Factory集成管道，自动化创建应用演示视频

remotion by 0xaxiom/appfactory

11 周安装量

129 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/0xaxiom/appfactory --skill remotion

🇨🇳中文介绍

Remotion 视频生成技能

App Factory 包含一个集成的 Remotion 视频管道，用于生成已构建应用程序的演示视频。

适用场景

处理 demo-video/ 目录中的文件
运行 /factory video 命令
创建或修改 Remotion 合成
调试视频渲染问题
理解基于帧的动画

项目结构

demo-video/
├── src/
│   ├── index.ts              # Remotion 入口点
│   ├── Root.tsx              # 合成注册表
│   ├── compositions/
│   │   └── AppFactoryDemo.tsx # 主演示视频 (10秒, 1920x1080)
│   └── components/
│       ├── Title.tsx         # 动画标题
│       ├── BulletPoints.tsx  # 交错显示要点
│       ├── VerificationBadge.tsx # PASS 徽章
│       └── Footer.tsx        # UTC 时间戳
├── remotion.config.ts        # Remotion 配置
└── package.json              # 依赖项 (Remotion v4.x)

关键规则（必须遵守）

1. 仅使用基于帧的动画

// 正确：所有动画都使用 useCurrentFrame()
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1], {
  extrapolateRight: 'clamp',
});

// 禁止：CSS 动画/过渡
// 切勿使用：animation:, transition:, @keyframes

🇺🇸English

Remotion Video Generation Skills

App Factory includes an integrated Remotion video pipeline for generating demo videos of built applications.

When This Skill Applies

Working with files in demo-video/ directory
Running /factory video command
Creating or modifying Remotion compositions
Debugging video rendering issues
Understanding frame-based animations

Project Structure

demo-video/
├── src/
│   ├── index.ts              # Remotion entry point
│   ├── Root.tsx              # Composition registry
│   ├── compositions/
│   │   └── AppFactoryDemo.tsx # Main demo video (10s, 1920x1080)
│   └── components/
│       ├── Title.tsx         # Animated title
│       ├── BulletPoints.tsx  # Staggered highlights
│       ├── VerificationBadge.tsx # PASS badge
│       └── Footer.tsx        # UTC timestamp
├── remotion.config.ts        # Remotion configuration
└── package.json              # Dependencies (Remotion v4.x)

Critical Rules (MUST FOLLOW)

1. Frame-Based Animations ONLY

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

2. 使用钳位插值

// 始终使用外推钳位
const value = interpolate(frame, [0, 60], [0, 100], {
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

// 使用 spring() 实现基于物理的动画
const springValue = spring({
  fps,
  frame,
  config: { damping: 200, stiffness: 100 },
  durationInFrames: 40,
});

时间戳必须是输入属性，绝不能使用 new Date()
所有日期格式化都使用 timeZone: 'UTC'
不使用 Math.random() 或非确定性值
相同的属性必须产生完全相同的视频输出

// 所有合成必须遵循此模式
export const MyComposition: React.FC<Props> = (props) => {
  const frame = useCurrentFrame();
  const { fps, width, height, durationInFrames } = useVideoConfig();

  return (
    <AbsoluteFill style={{ backgroundColor: '#000' }}>
      {/* 序列化内容 */}
      <Sequence from={0} durationInFrames={60}>
        <Scene1 />
      </Sequence>
      <Sequence from={60} durationInFrames={60}>
        <Scene2 />
      </Sequence>
    </AbsoluteFill>
  );
};

本地运行验证运行
创建带有 status: "PASS" 的 RUN_CERTIFICATE.json
钩子触发 post-run-certificate-video.mjs
演示视频渲染到 demo/out/<slug>.mp4

# 基本用法
node scripts/render-demo-video.mjs --cwd ./my-app --slug my-app

# 使用自定义要点
node scripts/render-demo-video.mjs \
  --cwd ./my-app \
  --slug my-app \
  --title "My Amazing App" \
  --highlights '["Feature 1", "Feature 2", "Feature 3"]'

interface AppFactoryDemoProps {
  title: string; // 应用名称
  slug: string; // URL 安全标识符
  verifiedUrl: string; // 通过健康检查的本地主机 URL
  timestamp: string; // ISO 8601 时间戳 (UTC)
  highlights: string[]; // 4-6 个要点
  certificateHash: string; // RUN_CERTIFICATE.json 的 SHA256 哈希值
}

# 在 Remotion Studio 中预览
cd demo-video && npm run studio

# 渲染特定合成
npx remotion render src/index.ts AppFactoryDemo output.mp4

# 检查 TypeScript 错误
npx tsc --noEmit

const fadeIn = interpolate(frame, [0, 30], [0, 1], {
  extrapolateRight: 'clamp',
});
const fadeOut = interpolate(frame, [duration - 30, duration], [1, 0], {
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const opacity = fadeIn * fadeOut;

items.map((item, index) => {
  const delay = index * 10; // 每个之间间隔 10 帧
  const itemOpacity = interpolate(
    frame,
    [delay, delay + 20],
    [0, 1],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );
  return <Item key={index} style={{ opacity: itemOpacity }} />;
});

const scaleSpring = spring({
  fps,
  frame: frame - startFrame,
  config: { damping: 80, stiffness: 200 },
});
const scale = interpolate(scaleSpring, [0, 1], [0.8, 1]);

代码	含义	解决方案
FAC-006	视频渲染失败	检查 Remotion 日志，确认已安装 ffmpeg
FAC-007	证书缺失	先运行本地运行验证
FAC-008	属性验证失败	检查属性类型是否与模式匹配

// CORRECT: Use useCurrentFrame() for all animations
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1], {
  extrapolateRight: 'clamp',
});

// FORBIDDEN: CSS animations/transitions
// Never use: animation:, transition:, @keyframes

2. Interpolate with Clamping

// ALWAYS use extrapolation clamping
const value = interpolate(frame, [0, 60], [0, 100], {
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

3. Spring Animations

// Use spring() for physics-based animations
const springValue = spring({
  fps,
  frame,
  config: { damping: 200, stiffness: 100 },
  durationInFrames: 40,
});

4. Determinism Requirements

Timestamps MUST be input props, never new Date()
Use timeZone: 'UTC' for all date formatting
No Math.random() or non-deterministic values
Same props must produce identical video output

5. Component Structure

// All compositions must follow this pattern
export const MyComposition: React.FC<Props> = (props) => {
  const frame = useCurrentFrame();
  const { fps, width, height, durationInFrames } = useVideoConfig();

  return (
    <AbsoluteFill style={{ backgroundColor: '#000' }}>
      {/* Sequenced content */}
      <Sequence from={0} durationInFrames={60}>
        <Scene1 />
      </Sequence>
      <Sequence from={60} durationInFrames={60}>
        <Scene2 />
      </Sequence>
    </AbsoluteFill>
  );
};

Pipeline Integration

Auto-Generation Flow

Local Run Proof verification runs
RUN_CERTIFICATE.json created with status: "PASS"
Hook triggers post-run-certificate-video.mjs
Demo video rendered to demo/out/<slug>.mp4

# Basic usage
node scripts/render-demo-video.mjs --cwd ./my-app --slug my-app

# With custom highlights
node scripts/render-demo-video.mjs \
  --cwd ./my-app \
  --slug my-app \
  --title "My Amazing App" \
  --highlights '["Feature 1", "Feature 2", "Feature 3"]'

interface AppFactoryDemoProps {
  title: string; // App name
  slug: string; // URL-safe identifier
  verifiedUrl: string; // Localhost URL that passed health check
  timestamp: string; // ISO 8601 timestamp (UTC)
  highlights: string[]; // 4-6 bullet points
  certificateHash: string; // SHA256 of RUN_CERTIFICATE.json
}

# Preview in Remotion Studio
cd demo-video && npm run studio

# Render specific composition
npx remotion render src/index.ts AppFactoryDemo output.mp4

# Check for TypeScript errors
npx tsc --noEmit

const fadeIn = interpolate(frame, [0, 30], [0, 1], {
  extrapolateRight: 'clamp',
});
const fadeOut = interpolate(frame, [duration - 30, duration], [1, 0], {
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const opacity = fadeIn * fadeOut;

items.map((item, index) => {
  const delay = index * 10; // 10 frames between each
  const itemOpacity = interpolate(
    frame,
    [delay, delay + 20],
    [0, 1],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );
  return <Item key={index} style={{ opacity: itemOpacity }} />;
});

const scaleSpring = spring({
  fps,
  frame: frame - startFrame,
  config: { damping: 80, stiffness: 200 },
});
const scale = interpolate(scaleSpring, [0, 1], [0.8, 1]);

Code	Meaning	Resolution
FAC-006	Video render failed	Check Remotion logs, verify ffmpeg installed
FAC-007	Certificate missing	Run Local Run Proof first
FAC-008	Props validation failed	Check prop types match schema

AI新闻播客制作技能：实时新闻转对话式播客脚本与音频生成

Remotion视频生成技能：App Factory集成管道，自动化创建应用演示视频

🇨🇳中文介绍

Remotion 视频生成技能

适用场景

项目结构

关键规则（必须遵守）

1. 仅使用基于帧的动画

🇺🇸English

Remotion Video Generation Skills

When This Skill Applies

Project Structure

Critical Rules (MUST FOLLOW)

1. Frame-Based Animations ONLY

相关 Skills

最新 Skills

2. 使用钳位插值

3. 弹簧动画

4. 确定性要求

5. 组件结构

管道集成

自动生成流程

手动渲染

属性模式

调试

常用模式

淡入/淡出

交错动画

使用弹簧缩放

错误代码

参考

2. Interpolate with Clamping

3. Spring Animations

4. Determinism Requirements

5. Component Structure

Pipeline Integration

Auto-Generation Flow

Manual Rendering

Props Schema

Debugging

Common Patterns

Fade In/Out

Staggered Animation

Scale with Spring

Error Codes

Reference