remotion-scaffold

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Remotion Scaffold

Remotion 项目脚手架

Creates the foundational folder structure, configuration files, and organizational framework for Remotion video projects. This skill focuses exclusively on project setup and does NOT generate animation logic or component implementation.

为Remotion视频项目创建基础文件夹结构、配置文件及组织框架。本技能仅专注于项目搭建，不生成动画逻辑或组件实现代码。

What This Skill Does

本技能功能

Generates project scaffolding for:

Directory structure — Organized folder layout for compositions, scenes, assets
Configuration files — Base constants.ts, types.ts with empty templates
Empty scene templates — Placeholder scene components with TODO markers
Asset directories — Organized folders for images, audio, fonts
Registration setup — Composition registration in Root.tsx

为以下内容生成项目脚手架：

目录结构 — 用于合成内容、场景、资源的规整文件夹布局
配置文件 — 基础constants.ts、types.ts空模板
空场景模板 — 带有TODO标记的占位场景组件
资源目录 — 规整的图片、音频、字体文件夹
注册设置 — 在Root.tsx中完成合成内容注册

Scope Boundaries

范围边界

IN SCOPE:

Creating folder structure
Writing empty file templates
Setting up configuration skeleton
Directory organization patterns

OUT OF SCOPE:

Animation implementation (use
```
/remotion-animation
```
)
Scene component logic (use
```
/remotion-component-gen
```
)
Sequence composition (use
```
/remotion-composition
```
)
Component generation (use
```
/remotion-component-gen
```
)

包含范围：

创建文件夹结构
编写空文件模板
搭建配置框架
目录组织模式

排除范围：

动画实现（使用
```
/remotion-animation
```
）
场景组件逻辑（使用
```
/remotion-component-gen
```
）
序列合成（使用
```
/remotion-composition
```
）
组件生成（使用
```
/remotion-component-gen
```
）

Input/Output Formats

输入/输出格式

Input Format: Project Requirements

输入格式：项目需求

Accepts project setup requirements:

Natural Language:

Create a new Remotion project scaffold for a 30-second video with 4 scenes.

Structured Format:

markdown

undefined

接受项目搭建需求：

自然语言格式：

为一个30秒、包含4个场景的视频创建新的Remotion项目脚手架。

结构化格式：

markdown

undefined

Project Requirements

项目需求

Project Name: ProductDemo Duration: 30 seconds Frame Rate: 30 fps Dimensions: 1920x1080 (16:9) Number of Scenes: 4 (Intro, Features, Demo, CTA) Asset Types: Images, Audio (music + SFX)

undefined

项目名称： ProductDemo 时长： 30秒 帧率： 30 fps 分辨率： 1920x1080（16:9） 场景数量： 4个（开场、功能展示、演示、行动号召） 资源类型： 图片、音频（音乐+音效）

undefined

Output Format: SCAFFOLD_MANIFEST.md

输出格式：SCAFFOLD_MANIFEST.md

Generates a manifest documenting created structure:

markdown

undefined

生成记录已创建结构的清单：

markdown

undefined

Scaffold Manifest: ProductDemo

脚手架清单：ProductDemo

Status

状态

✅ Directory structure created ✅ Configuration files generated ✅ Scene templates created (empty) ⏳ Ready for implementation

✅ 目录结构已创建 ✅ 配置文件已生成 ✅ 场景模板已创建（空文件） ⏳ 等待实现

Generated Structure

生成的结构

src/remotion/compositions/ProductDemo/
├── index.tsx                 # ✅ Created - Main composition (empty)
├── constants.ts              # ✅ Created - Constants template
├── types.ts                  # ✅ Created - Type definitions
└── scenes/
    ├── Scene1Intro.tsx       # ✅ Created - Empty template
    ├── Scene2Features.tsx    # ✅ Created - Empty template
    ├── Scene3Demo.tsx        # ✅ Created - Empty template
    └── Scene4CTA.tsx         # ✅ Created - Empty template

public/
├── images/                   # ✅ Created - Empty directory
├── audio/
│   ├── music/                # ✅ Created - Empty directory
│   └── sfx/                  # ✅ Created - Empty directory
└── fonts/                    # ✅ Created - Empty directory

src/remotion/compositions/ProductDemo/
├── index.tsx                 # ✅ 已创建 - 主合成文件（空）
├── constants.ts              # ✅ 已创建 - 常量模板
├── types.ts                  # ✅ 已创建 - 类型定义
└── scenes/
    ├── Scene1Intro.tsx       # ✅ 已创建 - 空模板
    ├── Scene2Features.tsx    # ✅ 已创建 - 空模板
    ├── Scene3Demo.tsx        # ✅ 已创建 - 空模板
    └── Scene4CTA.tsx         # ✅ 已创建 - 空模板

public/
├── images/                   # ✅ 已创建 - 空目录
├── audio/
│   ├── music/                # ✅ 已创建 - 空目录
│   └── sfx/                  # ✅ 已创建 - 空目录
└── fonts/                    # ✅ 已创建 - 空目录

File Templates Created

创建的文件模板

Main Composition:

index.tsx

主合成文件：

index.tsx

typescript

import { AbsoluteFill, Sequence } from "remotion";
import { SCENE_TIMING } from "./constants";
import { Scene1Intro } from "./scenes/Scene1Intro";
import { Scene2Features } from "./scenes/Scene2Features";
import { Scene3Demo } from "./scenes/Scene3Demo";
import { Scene4CTA } from "./scenes/Scene4CTA";
import type { ProductDemoProps } from "./types";

export function ProductDemo({}: ProductDemoProps) {
  return (
    <AbsoluteFill>
      {/* TODO: Add composition layout via /remotion-composition */}
      <Sequence
        from={SCENE_TIMING.intro.start}
        durationInFrames={SCENE_TIMING.intro.duration}
      >
        <Scene1Intro />
      </Sequence>

      {/* Additional scenes... */}
    </AbsoluteFill>
  );
}

typescript

import { AbsoluteFill, Sequence } from "remotion";
import { SCENE_TIMING } from "./constants";
import { Scene1Intro } from "./scenes/Scene1Intro";
import { Scene2Features } from "./scenes/Scene2Features";
import { Scene3Demo } from "./scenes/Scene3Demo";
import { Scene4CTA } from "./scenes/Scene4CTA";
import type { ProductDemoProps } from "./types";

export function ProductDemo({}: ProductDemoProps) {
  return (
    <AbsoluteFill>
      {/* TODO: 通过/remotion-composition添加合成布局 */}
      <Sequence
        from={SCENE_TIMING.intro.start}
        durationInFrames={SCENE_TIMING.intro.duration}
      >
        <Scene1Intro />
      </Sequence>

      {/* 其他场景... */}
    </AbsoluteFill>
  );
}

Constants:

constants.ts

常量文件：

constants.ts

typescript

// TODO: Define color palette
export const COLORS = {
  // Add colors here
} as const;

// TODO: Configure spring animations via /remotion-animation
export const SPRING_CONFIGS = {
  // Add spring configs here
} as const;

// Scene timing (30fps, 30 seconds total = 900 frames)
const FPS = 30;

export const SCENE_TIMING = {
  intro: { start: 0, duration: 5 * FPS },
  features: { start: 5 * FPS, duration: 10 * FPS },
  demo: { start: 15 * FPS, duration: 10 * FPS },
  cta: { start: 25 * FPS, duration: 5 * FPS },
} as const;

typescript

// TODO: 定义调色板
export const COLORS = {
  // 在此添加颜色
} as const;

// TODO: 通过/remotion-animation配置弹簧动画
export const SPRING_CONFIGS = {
  // 在此添加弹簧配置
} as const;

// 场景时间（30fps，总时长30秒=900帧）
const FPS = 30;

export const SCENE_TIMING = {
  intro: { start: 0, duration: 5 * FPS },
  features: { start: 5 * FPS, duration: 10 * FPS },
  demo: { start: 15 * FPS, duration: 10 * FPS },
  cta: { start: 25 * FPS, duration: 5 * FPS },
} as const;

Types:

types.ts

类型文件：

types.ts

typescript

export interface ProductDemoProps {
  // Add custom props here
}

export interface SceneProps {
  // Common scene props
}

typescript

export interface ProductDemoProps {
  // 在此添加自定义属性
}

export interface SceneProps {
  // 通用场景属性
}

Scene Template:

scenes/Scene1Intro.tsx

场景模板：

scenes/Scene1Intro.tsx

typescript

import { AbsoluteFill } from "remotion";

export function Scene1Intro() {
  return (
    <AbsoluteFill>
      {/* TODO: Implement scene via /remotion-component-gen */}
    </AbsoluteFill>
  );
}

typescript

import { AbsoluteFill } from "remotion";

export function Scene1Intro() {
  return (
    <AbsoluteFill>
      {/* TODO: 通过/remotion-component-gen实现场景 */}
    </AbsoluteFill>
  );
}

Next Steps

后续步骤

Define animations → Run
```
/remotion-animation
```
to generate animation configs
Build composition → Run
```
/remotion-composition
```
to structure Sequence layout
Implement scenes → Run
```
/remotion-component-gen
```
for each scene
Configure render → Run
```
/remotion-render-config
```
for output settings
Add assets → Run
```
/remotion-asset-coordinator
```
for asset preparation

定义动画 → 运行
```
/remotion-animation
```
生成动画配置
构建合成内容 → 运行
```
/remotion-composition
```
搭建Sequence布局
实现场景 → 为每个场景运行
```
/remotion-component-gen
```
配置渲染 → 运行
```
/remotion-render-config
```
设置输出参数
添加资源 → 运行
```
/remotion-asset-coordinator
```
准备资源

Configuration Summary

配置摘要

Setting	Value
Composition ID	ProductDemo
Duration	30 seconds (900 frames)
Frame Rate	30 fps
Dimensions	1920x1080 (16:9)
Scenes	4 (Intro, Features, Demo, CTA)
Status	Scaffold complete, ready for implementation

设置项	值
合成ID	ProductDemo
时长	30秒（900帧）
帧率	30 fps
分辨率	1920x1080（16:9）
场景	4个（开场、功能展示、演示、行动号召）
状态	脚手架搭建完成，等待实现

File Locations

文件位置

All files created in:

Composition:

/path/to/project/src/remotion/compositions/ProductDemo/

Assets:
```
/path/to/project/public/
```

所有创建的文件位于：

合成内容：

/path/to/project/src/remotion/compositions/ProductDemo/

资源：
```
/path/to/project/public/
```

Scaffold Checklist

搭建清单

Creation checklist:

Create composition folder structure
Generate main composition file (
```
index.tsx
```
) with TODO markers
Generate constants file (
```
constants.ts
```
) as template
Generate types file (
```
types.ts
```
)
Create empty scene component files
Create asset directories (
```
public/images/
```
,
```
public/audio/
```
)
Add composition registration skeleton
Animation implementation (next:
```
/remotion-animation
```
)
Composition logic (next:
```
/remotion-composition
```
)
Scene implementation (next:
```
/remotion-component-gen
```
)

undefined

创建检查清单：

创建合成内容文件夹结构
生成主合成文件（
```
index.tsx
```
）并添加TODO标记
生成常量文件（
```
constants.ts
```
）模板
生成类型文件（
```
types.ts
```
）
创建空场景组件文件
创建资源目录（
```
public/images/
```
、
```
public/audio/
```
）
添加合成内容注册框架
动画实现（下一步：
```
/remotion-animation
```
）
合成逻辑（下一步：
```
/remotion-composition
```
）
场景实现（下一步：
```
/remotion-component-gen
```
）

undefined

Directory Structure Patterns

目录结构模式

Pattern 1: Simple Project (1-2 scenes)

模式1：简单项目（1-2个场景）

src/remotion/compositions/VideoName/
├── index.tsx          # Main composition
├── constants.ts       # Configuration constants
└── types.ts           # TypeScript types

src/remotion/compositions/VideoName/
├── index.tsx          # 主合成文件
├── constants.ts       # 配置常量
└── types.ts           # TypeScript类型

Pattern 2: Multi-Scene Project (3+ scenes)

模式2：多场景项目（3个及以上场景）

src/remotion/compositions/VideoName/
├── index.tsx           # Main composition
├── constants.ts        # Shared constants
├── types.ts            # Type definitions
└── scenes/
    ├── Scene1.tsx
    ├── Scene2.tsx
    └── Scene3.tsx

src/remotion/compositions/VideoName/
├── index.tsx           # 主合成文件
├── constants.ts        # 共享常量
├── types.ts            # 类型定义
└── scenes/
    ├── Scene1.tsx
    ├── Scene2.tsx
    └── Scene3.tsx

Pattern 3: Complex Project (with audio)

模式3：复杂项目（包含音频）

src/remotion/compositions/VideoName/
├── index.tsx           # Main composition
├── constants.ts        # Configuration
├── types.ts            # Types
├── audio.ts            # Audio configuration
└── scenes/
    └── ...

src/remotion/compositions/VideoName/
├── index.tsx           # 主合成文件
├── constants.ts        # 配置
├── types.ts            # 类型
├── audio.ts            # 音频配置
└── scenes/
    └── ...

Pattern 4: Component Library Project

模式4：组件库项目

src/remotion/
├── components/
│   ├── particles/
│   ├── text/
│   ├── progress/
│   └── transitions/
├── compositions/
│   └── VideoName/
└── utils/
    ├── seededRandom.ts
    └── timing.ts

src/remotion/
├── components/
│   ├── particles/
│   ├── text/
│   ├── progress/
│   └── transitions/
├── compositions/
│   └── VideoName/
└── utils/
    ├── seededRandom.ts
    └── timing.ts

File Templates

文件模板

Empty Main Composition

空主合成文件

typescript

import { AbsoluteFill } from "remotion";
import type { VideoNameProps } from "./types";

export function VideoName({}: VideoNameProps) {
  return (
    <AbsoluteFill>
      {/* TODO: Add composition structure via /remotion-composition */}
    </AbsoluteFill>
  );
}

typescript

import { AbsoluteFill } from "remotion";
import type { VideoNameProps } from "./types";

export function VideoName({}: VideoNameProps) {
  return (
    <AbsoluteFill>
      {/* TODO: 通过/remotion-composition添加合成结构 */}
    </AbsoluteFill>
  );
}

Empty Constants Template

空常量模板

typescript

// TODO: Define via /remotion-animation
export const COLORS = {} as const;
export const SPRING_CONFIGS = {} as const;
export const SCENE_TIMING = {} as const;

typescript

// TODO: 通过/remotion-animation定义
export const COLORS = {} as const;
export const SPRING_CONFIGS = {} as const;
export const SCENE_TIMING = {} as const;

Empty Types Template

空类型模板

typescript

export interface VideoNameProps {
  // Add props here
}

typescript

export interface VideoNameProps {
  // 在此添加属性
}

Empty Scene Template

空场景模板

typescript

import { AbsoluteFill } from "remotion";

export function Scene1() {
  return (
    <AbsoluteFill>
      {/* TODO: Implement via /remotion-component-gen */}
    </AbsoluteFill>
  );
}

typescript

import { AbsoluteFill } from "remotion";

export function Scene1() {
  return (
    <AbsoluteFill>
      {/* TODO: 通过/remotion-component-gen实现 */}
    </AbsoluteFill>
  );
}

Registration Template

注册模板

Add to

src/remotion/Root.tsx

typescript

import { Composition } from "remotion";
import { VideoName } from "./compositions/VideoName";

// Add to RemotionRoot component:
<Composition
  id="VideoName"
  component={VideoName}
  durationInFrames={900}  // TODO: Calculate based on requirements
  fps={30}
  width={1920}
  height={1080}
  defaultProps={{}}
/>

添加至

src/remotion/Root.tsx

：

typescript

import { Composition } from "remotion";
import { VideoName } from "./compositions/VideoName";

// 添加至RemotionRoot组件：
<Composition
  id="VideoName"
  component={VideoName}
  durationInFrames={900}  // TODO: 根据需求计算
  fps={30}
  width={1920}
  height={1080}
  defaultProps={{}}
/>

Video Format Presets

视频格式预设

Quick reference for common video formats:

typescript

// YouTube (16:9)
{ width: 1920, height: 1080, fps: 30 }

// Instagram Reels / TikTok (9:16)
{ width: 1080, height: 1920, fps: 30 }

// Twitter/X (16:9)
{ width: 1920, height: 1080, fps: 30 }

// Square (1:1)
{ width: 1080, height: 1080, fps: 30 }

常见视频格式快速参考：

typescript

// YouTube（16:9）
{ width: 1920, height: 1080, fps: 30 }

// Instagram Reels / TikTok（9:16）
{ width: 1080, height: 1920, fps: 30 }

// Twitter/X（16:9）
{ width: 1920, height: 1080, fps: 30 }

// 正方形（1:1）
{ width: 1080, height: 1080, fps: 30 }

Asset Directory Organization

资源目录组织

Standard asset directory structure:

public/
├── images/
│   ├── logos/
│   ├── backgrounds/
│   └── icons/
├── audio/
│   ├── music/
│   └── sfx/
└── fonts/
    └── [custom-fonts].woff2

标准资源目录结构：

public/
├── images/
│   ├── logos/
│   ├── backgrounds/
│   └── icons/
├── audio/
│   ├── music/
│   └── sfx/
└── fonts/
    └── [custom-fonts].woff2

Scaffold Workflow

搭建流程

Parse requirements → Extract project name, duration, scenes, format
Create directories → Generate folder structure
Write empty templates → Create files with TODO markers
Setup registration → Add composition to Root.tsx
Generate manifest → Document created structure in SCAFFOLD_MANIFEST.md
Hand off → Direct to specialized skills for implementation

解析需求 → 提取项目名称、时长、场景、格式
创建目录 → 生成文件夹结构
编写空模板 → 创建带有TODO标记的文件
设置注册 → 将合成内容添加至Root.tsx
生成清单 → 在SCAFFOLD_MANIFEST.md中记录已创建结构
交接 → 引导至专业技能进行实现

Integration with Other Skills

与其他技能的集成

This skill is the FIRST STEP in the pipeline:

remotion-scaffold (this skill)
    ↓ outputs: SCAFFOLD_MANIFEST.md
remotion-animation
    ↓ outputs: ANIMATION_CONFIG.md
remotion-composition
    ↓ outputs: COMPOSITION_STRUCTURE.md
remotion-component-gen (per scene)
    ↓ outputs: SCENE_COMPONENT.md
remotion-render-config
    ↓ outputs: RENDER_CONFIG.md

Works with:

```
/motion-designer
```
— Project requirements may come from design specs
```
/remotion-animation
```
— Next step for animation configuration
```
/remotion-composition
```
— Next step for composition structure
```
/remotion-component-gen
```
— Next step for scene implementation
```
/remotion-render-config
```
— Final step for render settings

This skill provides clean, minimal project scaffolding that serves as the foundation for the Remotion implementation pipeline.

本技能是流程中的第一步：

remotion-scaffold（本技能）
    ↓ 输出：SCAFFOLD_MANIFEST.md
remotion-animation
    ↓ 输出：ANIMATION_CONFIG.md
remotion-composition
    ↓ 输出：COMPOSITION_STRUCTURE.md
remotion-component-gen（每个场景）
    ↓ 输出：SCENE_COMPONENT.md
remotion-render-config
    ↓ 输出：RENDER_CONFIG.md

协同技能：

```
/motion-designer
```
— 项目需求可能来自设计规范
```
/remotion-animation
```
— 下一步：动画配置
```
/remotion-composition
```
— 下一步：合成结构
```
/remotion-component-gen
```
— 下一步：场景实现
```
/remotion-render-config
```
— 最后一步：渲染设置

本技能提供简洁、轻量化的项目脚手架，作为Remotion实现流程的基础。

remotion-scaffold

Original

Translation

Remotion Scaffold

Remotion 项目脚手架

What This Skill Does

本技能功能

Scope Boundaries

范围边界

Input/Output Formats

输入/输出格式

Input Format: Project Requirements

输入格式：项目需求

Project Requirements

项目需求

Output Format: SCAFFOLD_MANIFEST.md

输出格式：SCAFFOLD_MANIFEST.md

Scaffold Manifest: ProductDemo

脚手架清单：ProductDemo

Status

状态

Generated Structure

生成的结构

File Templates Created

创建的文件模板

Main Composition: index.tsx

主合成文件：index.tsx

Constants: constants.ts

常量文件：constants.ts

Types: types.ts

类型文件：types.ts

Scene Template: scenes/Scene1Intro.tsx

场景模板：scenes/Scene1Intro.tsx

Next Steps

后续步骤

Configuration Summary

配置摘要

File Locations

文件位置

Scaffold Checklist

搭建清单

Directory Structure Patterns

目录结构模式

Pattern 1: Simple Project (1-2 scenes)

模式1：简单项目（1-2个场景）

Pattern 2: Multi-Scene Project (3+ scenes)

模式2：多场景项目（3个及以上场景）

Pattern 3: Complex Project (with audio)

模式3：复杂项目（包含音频）

Pattern 4: Component Library Project

模式4：组件库项目

File Templates

文件模板

Empty Main Composition

空主合成文件

Empty Constants Template

空常量模板

Empty Types Template

空类型模板

Empty Scene Template

空场景模板

Registration Template

注册模板

Video Format Presets

视频格式预设

Asset Directory Organization

资源目录组织

Scaffold Workflow

搭建流程

Integration with Other Skills

与其他技能的集成

Main Composition:
`index.tsx`

主合成文件：
`index.tsx`

Constants:
`constants.ts`

常量文件：
`constants.ts`

Types:
`types.ts`

类型文件：
`types.ts`

Scene Template:
`scenes/Scene1Intro.tsx`

场景模板：
`scenes/Scene1Intro.tsx`