remotion-component-gen

Remotion Component Gen

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

本技能的功能

生成以下场景组件代码：

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

范围边界

包含范围：

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

不包含范围：

• 动画配置定义（使用 /remotion-animation）
• 合成序列布局（使用 /remotion-composition）
• 项目脚手架（使用 /remotion-scaffold）
• 资源采集（使用 /remotion-asset-coordinator）

输入/输出格式

输入格式：场景视觉指导

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

来自 Motion Spec：

## 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

来自自然语言：

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.

输出格式：SCENE_COMPONENT.md

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

# 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>
  );
}

组件 Props（如需要）

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

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

在合成中的用法

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

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

所需资源

• Logo 图片：public/images/logo.svg (400x400)

动画摘要

• Logo 入场： 平滑的弹簧缩放 + 淡入（0-30 帧）
• 副标题显现： 线性淡入 + 上滑（20-50 帧）

后续步骤

1. 添加 Logo 资源到 public/images/logo.svg
2. 在预览中测试，验证时序和动画效果
3. 根据需要调整常量（缩放值、时序）
4. 通过另一次 /remotion-component-gen 调用，转到下一个场景

检查清单

• 组件已实现
• 动画逻辑已集成
• 资源导入已配置
• TypeScript 类型已定义
• 资源已添加到项目
• 已在预览中测试

## Component Implementation Patterns

### Pattern 1: Simple Entrance Animation

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>
  );
}

模式 2：交错元素

为多个元素添加延迟动画：

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>
  );
}

模式 3：文本显现

逐字符或逐词显现：

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>
  );
}

集成工作流

1. 接收视觉指导 → 输入到本技能
2. 生成场景组件 → SCENE_COMPONENT.md
3. 在 scenes/ 文件夹中创建场景文件
4. 按说明添加资源
5. 在预览中测试
6. 根据需要调整时序/样式
7. 转到下一个场景

与其他技能的集成

本技能在以下流程中运行：

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)

配合使用：

• /motion-designer — 根据设计规范提供视觉指导
• /remotion-animation — 使用本技能提供的 spring 配置和时序
• /remotion-composition — 场景符合本技能提供的时序结构
• /remotion-scaffold — 将组件添加到已搭建的项目中
• /remotion-asset-coordinator — 采集并准备资源以供导入
• /remotion-spec-translator — 由本技能编排，完成完整转换

---

本技能可生成可用于生产环境的场景组件实现，让 Remotion 中的动态设计规范栩栩如生。