remotion-component-gen

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Remotion Component Gen

Remotion 组件生成工具

Generates production-ready Remotion scene component implementations from visual direction and animation specifications. This skill focuses on creating complete, working scene components.

根据视觉指导和动画规格生成可用于生产环境的Remotion场景组件实现。本技能专注于创建完整、可运行的场景组件。

What This Skill Does

本技能功能

Generates scene component code for:

Scene components — Complete TSX implementation for individual scenes
Animation integration — Applies spring/interpolate from animation configs
Visual layout — Implements positioning, sizing, layout logic
Asset integration — StaticFile imports and asset usage
TypeScript types — Props interfaces for scene components

生成以下类型的场景组件代码：

场景组件 — 单个场景的完整TSX实现
动画集成 — 从动画配置中应用spring/interpolate动画
视觉布局 — 实现定位、尺寸调整和布局逻辑
资源集成 — StaticFile导入和资源使用
TypeScript类型 — 场景组件的Props接口

Scope Boundaries

范围边界

IN SCOPE:

Complete scene component TSX code
Animation implementation (springs, interpolate)
Layout and visual styling
Asset imports and usage
Component-level logic

OUT OF SCOPE:

Animation config definitions (use
```
/remotion-animation
```
)
Composition sequence layout (use
```
/remotion-composition
```
)
Project scaffolding (use
```
/remotion-scaffold
```
)
Asset sourcing (use
```
/remotion-asset-coordinator
```
)

纳入范围：

完整的场景组件TSX代码
动画实现（springs、interpolate）
布局和视觉样式
资源导入和使用
组件级逻辑

排除范围：

动画配置定义（使用
```
/remotion-animation
```
）
合成序列布局（使用
```
/remotion-composition
```
）
项目脚手架搭建（使用
```
/remotion-scaffold
```
）
资源获取（使用
```
/remotion-asset-coordinator
```
）

Input/Output Formats

输入/输出格式

Input Format: Visual Direction for Scene

输入格式：场景视觉指导

Accepts scene description with visual and animation details:

From Motion Spec:

markdown

undefined

接受包含视觉和动画细节的场景描述：

来自动效规格：

markdown

undefined

Scene 1: Logo Reveal (0s - 5s)

Visual Description:

Centered logo on dark background
Logo scales from 0.8 to 1.0 with smooth spring
Subtitle text fades in below logo
Background: #0A0A0A (Black)
Logo color: #FF6B35 (Primary)

Animation Details:

Logo entrance: Frames 0-30
- Spring config: smooth (damping: 200)
- Scale: 0.8 → 1.0
- Opacity: 0 → 1
Subtitle reveal: Frames 20-50
- Fade in with slight upward movement
- TranslateY: 20px → 0
- Opacity: 0 → 1

Assets:

Logo: public/images/logo.svg


**From Natural Language:**

Create Scene1Intro with centered logo that springs in from 0.8 scale to 1.0. Add subtitle text below that fades in after logo. Use smooth spring animation for logo, linear fade for text.

undefined

Visual Description:

Centered logo on dark background
Logo scales from 0.8 to 1.0 with smooth spring
Subtitle text fades in below logo
Background: #0A0A0A (Black)
Logo color: #FF6B35 (Primary)

Animation Details:

Logo entrance: Frames 0-30
- Spring config: smooth (damping: 200)
- Scale: 0.8 → 1.0
- Opacity: 0 → 1
Subtitle reveal: Frames 20-50
- Fade in with slight upward movement
- TranslateY: 20px → 0
- Opacity: 0 → 1

Assets:

Logo: public/images/logo.svg


**来自自然语言描述：**

Create Scene1Intro with centered logo that springs in from 0.8 scale to 1.0. Add subtitle text below that fades in after logo. Use smooth spring animation for logo, linear fade for text.

undefined

Output Format: SCENE_COMPONENT.md

输出格式：SCENE_COMPONENT.md

Generates complete scene component implementation:

markdown

undefined

生成完整的场景组件实现：

markdown

undefined

Scene Component: Scene1Intro

Status

✅ Component implementation complete ⏳ Ready for integration into composition

Component Code

File:

scenes/Scene1Intro.tsx

typescript

import {
  AbsoluteFill,
  spring,
  interpolate,
  useCurrentFrame,
  useVideoConfig,
  Img,
  staticFile,
} from "remotion";
import { COLORS, SPRING_CONFIGS } from "../constants";

export function Scene1Intro() {
  const frame = useCurrentFrame();
  const { fps, width, height } = useVideoConfig();

  // Logo entrance animation (frames 0-30)
  const logoProgress = spring({
    frame,
    fps,
    config: SPRING_CONFIGS.smooth,
  });

  const logoScale = interpolate(logoProgress, [0, 1], [0.8, 1]);
  const logoOpacity = logoProgress;

  // Subtitle reveal animation (frames 20-50)
  const subtitleProgress = interpolate(
    frame,
    [20, 50],
    [0, 1],
    {
      extrapolateLeft: 'clamp',
      extrapolateRight: 'clamp',
    }
  );

  const subtitleTranslateY = interpolate(subtitleProgress, [0, 1], [20, 0]);
  const subtitleOpacity = subtitleProgress;

  return (
    <AbsoluteFill
      style={{
        backgroundColor: COLORS.background,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      {/* Logo */}
      <div
        style={{
          transform: `scale(${logoScale})`,
          opacity: logoOpacity,
        }}
      >
        <Img
          src={staticFile("images/logo.svg")}
          style={{
            width: 400,
            height: 400,
          }}
        />
      </div>

      {/* Subtitle */}
      <div
        style={{
          position: "absolute",
          top: height / 2 + 250,
          transform: `translateY(${subtitleTranslateY}px)`,
          opacity: subtitleOpacity,
        }}
      >
        <h2
          style={{
            color: COLORS.text,
            fontSize: 48,
            fontWeight: 600,
            margin: 0,
          }}
        >
          Innovation in Motion
        </h2>
      </div>
    </AbsoluteFill>
  );
}

File:

scenes/Scene1Intro.tsx

typescript

import {
  AbsoluteFill,
  spring,
  interpolate,
  useCurrentFrame,
  useVideoConfig,
  Img,
  staticFile,
} from "remotion";
import { COLORS, SPRING_CONFIGS } from "../constants";

export function Scene1Intro() {
  const frame = useCurrentFrame();
  const { fps, width, height } = useVideoConfig();

  // Logo entrance animation (frames 0-30)
  const logoProgress = spring({
    frame,
    fps,
    config: SPRING_CONFIGS.smooth,
  });

  const logoScale = interpolate(logoProgress, [0, 1], [0.8, 1]);
  const logoOpacity = logoProgress;

  // Subtitle reveal animation (frames 20-50)
  const subtitleProgress = interpolate(
    frame,
    [20, 50],
    [0, 1],
    {
      extrapolateLeft: 'clamp',
      extrapolateRight: 'clamp',
    }
  );

  const subtitleTranslateY = interpolate(subtitleProgress, [0, 1], [20, 0]);
  const subtitleOpacity = subtitleProgress;

  return (
    <AbsoluteFill
      style={{
        backgroundColor: COLORS.background,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      {/* Logo */}
      <div
        style={{
          transform: `scale(${logoScale})`,
          opacity: logoOpacity,
        }}
      >
        <Img
          src={staticFile("images/logo.svg")}
          style={{
            width: 400,
            height: 400,
          }}
        />
      </div>

      {/* Subtitle */}
      <div
        style={{
          position: "absolute",
          top: height / 2 + 250,
          transform: `translateY(${subtitleTranslateY}px)`,
          opacity: subtitleOpacity,
        }}
      >
        <h2
          style={{
            color: COLORS.text,
            fontSize: 48,
            fontWeight: 600,
            margin: 0,
          }}
        >
          Innovation in Motion
        </h2>
      </div>
    </AbsoluteFill>
  );
}

Component Props (if needed)

typescript

export interface Scene1IntroProps {
  // Add props here if scene needs customization
}

// Update component:
export function Scene1Intro({}: Scene1IntroProps) {
  // ...
}

typescript

export interface Scene1IntroProps {
  // Add props here if scene needs customization
}

// Update component:
export function Scene1Intro({}: Scene1IntroProps) {
  // ...
}

Usage in Composition

typescript

import { Scene1Intro } from "./scenes/Scene1Intro";

// In main composition:
<Sequence
  from={SCENE_TIMING.intro.start}
  durationInFrames={SCENE_TIMING.intro.duration}
>
  <Scene1Intro />
</Sequence>

typescript

import { Scene1Intro } from "./scenes/Scene1Intro";

// In main composition:
<Sequence
  from={SCENE_TIMING.intro.start}
  durationInFrames={SCENE_TIMING.intro.duration}
>
  <Scene1Intro />
</Sequence>

Assets Required

Logo image:
```
public/images/logo.svg
```
(400x400)

Logo image:
```
public/images/logo.svg
```
(400x400)

Animation Summary

Logo entrance: Smooth spring scale + fade (0-30 frames)
Subtitle reveal: Linear fade + slide up (20-50 frames)

Logo entrance: Smooth spring scale + fade (0-30 frames)
Subtitle reveal: Linear fade + slide up (20-50 frames)

Next Steps

Add logo asset to public/images/logo.svg
Test in preview to verify timing and animation feel
Adjust constants if needed (scale values, timing)
Move to next scene via another
```
/remotion-component-gen
```
call

Add logo asset to public/images/logo.svg
Test in preview to verify timing and animation feel
Adjust constants if needed (scale values, timing)
Move to next scene via another
```
/remotion-component-gen
```
call

Checklist

Component Implementation Patterns

组件实现模式

Pattern 1: Simple Entrance Animation

模式1：简单入场动画

Basic spring-based entrance with scale and fade:

typescript

export function Scene() {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const progress = spring({
    frame,
    fps,
    config: SPRING_CONFIGS.smooth,
  });

  const scale = interpolate(progress, [0, 1], [0.8, 1]);

  return (
    <AbsoluteFill
      style={{
        transform: `scale(${scale})`,
        opacity: progress,
      }}
    >
      {/* Content */}
    </AbsoluteFill>
  );
}

基于spring的基础入场动画，包含缩放和淡入效果：

typescript

export function Scene() {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const progress = spring({
    frame,
    fps,
    config: SPRING_CONFIGS.smooth,
  });

  const scale = interpolate(progress, [0, 1], [0.8, 1]);

  return (
    <AbsoluteFill
      style={{
        transform: `scale(${scale})`,
        opacity: progress,
      }}
    >
      {/* Content */}
    </AbsoluteFill>
  );
}

Pattern 2: Staggered Elements

模式2：错落元素动画

Multiple elements with delayed animations:

typescript

export function Scene() {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const items = ['Feature 1', 'Feature 2', 'Feature 3'];
  const STAGGER_DELAY = 10;

  return (
    <AbsoluteFill>
      {items.map((item, index) => {
        const itemProgress = spring({
          frame: frame - (index * STAGGER_DELAY),
          fps,
          config: SPRING_CONFIGS.snappy,
        });

        const translateX = interpolate(itemProgress, [0, 1], [-50, 0]);

        return (
          <div
            key={index}
            style={{
              transform: `translateX(${translateX}px)`,
              opacity: itemProgress,
              marginBottom: 20,
            }}
          >
            <h3>{item}</h3>
          </div>
        );
      })}
    </AbsoluteFill>
  );
}

多个元素带有延迟动画效果：

typescript

export function Scene() {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const items = ['Feature 1', 'Feature 2', 'Feature 3'];
  const STAGGER_DELAY = 10;

  return (
    <AbsoluteFill>
      {items.map((item, index) => {
        const itemProgress = spring({
          frame: frame - (index * STAGGER_DELAY),
          fps,
          config: SPRING_CONFIGS.snappy,
        });

        const translateX = interpolate(itemProgress, [0, 1], [-50, 0]);

        return (
          <div
            key={index}
            style={{
              transform: `translateX(${translateX}px)`,
              opacity: itemProgress,
              marginBottom: 20,
            }}
          >
            <h3>{item}</h3>
          </div>
        );
      })}
    </AbsoluteFill>
  );
}

Pattern 3: Text Reveal

模式3：文字逐显动画

Character-by-character or word-by-word reveal:

typescript

export function Scene() {
  const frame = useCurrentFrame();
  const text = "Hello World";
  const CHARS_PER_FRAME = 2;

  const charsToShow = Math.min(
    text.length,
    Math.floor(frame / CHARS_PER_FRAME)
  );

  return (
    <AbsoluteFill>
      <h1 style={{ fontSize: 72 }}>
        {text.slice(0, charsToShow)}
        {charsToShow < text.length && (
          <span style={{ opacity: Math.sin(frame * 0.3) * 0.5 + 0.5 }}>
            |
          </span>
        )}
      </h1>
    </AbsoluteFill>
  );
}

逐字符或逐词的文字显示效果：

typescript

export function Scene() {
  const frame = useCurrentFrame();
  const text = "Hello World";
  const CHARS_PER_FRAME = 2;

  const charsToShow = Math.min(
    text.length,
    Math.floor(frame / CHARS_PER_FRAME)
  );

  return (
    <AbsoluteFill>
      <h1 style={{ fontSize: 72 }}>
        {text.slice(0, charsToShow)}
        {charsToShow < text.length && (
          <span style={{ opacity: Math.sin(frame * 0.3) * 0.5 + 0.5 }}>
            |
          </span>
        )}
      </h1>
    </AbsoluteFill>
  );
}

Integration Workflow

集成工作流

Receive visual direction → Input to this skill
Generate scene component → SCENE_COMPONENT.md
Create scene file in scenes/ folder
Add assets as specified
Test in preview
Adjust timing/styling if needed
Move to next scene

接收视觉指导 → 作为本技能的输入
生成场景组件 → 输出SCENE_COMPONENT.md
创建场景文件 放入scenes/目录
添加资源 按照指定要求
在预览中测试
调整时间/样式（如有需要）
进入下一个场景

Integration with Other Skills

与其他技能的集成

This skill works within the pipeline:

remotion-component-gen (this skill)
    ↓ outputs: SCENE_COMPONENT.md (per scene)
    ↓ uses: ANIMATION_CONFIG.md (from remotion-animation)
    ↓ uses: COMPOSITION_STRUCTURE.md (for timing context)

Works with:

```
/motion-designer
```
— Visual direction from design specs
```
/remotion-animation
```
— Uses spring configs and timing from this skill
```
/remotion-composition
```
— Scene fits within timing structure from this skill
```
/remotion-scaffold
```
— Components added to scaffolded project
```
/remotion-asset-coordinator
```
— Assets sourced and prepared for import
```
/remotion-spec-translator
```
— Orchestrated by this skill for full translation

This skill generates production-ready scene component implementations that bring motion design specs to life in Remotion.

本技能在以下工作流中协同使用：

remotion-component-gen (本技能)
    ↓ 输出：SCENE_COMPONENT.md（每个场景对应一份）
    ↓ 使用：ANIMATION_CONFIG.md（来自remotion-animation）
    ↓ 使用：COMPOSITION_STRUCTURE.md（用于时间上下文）

协同技能：

```
/motion-designer
```
— 提供来自设计规格的视觉指导
```
/remotion-animation
```
— 本技能使用其提供的spring配置和时间参数
```
/remotion-composition
```
— 场景需适配其提供的时间结构
```
/remotion-scaffold
```
— 组件将被添加到其搭建的项目中
```
/remotion-asset-coordinator
```
— 为导入准备并提供资源
```
/remotion-spec-translator
```
— 由其统筹完成完整的规格转换

本技能生成可用于生产环境的场景组件实现，将动效设计规格在Remotion中落地。