remotion-animation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Remotion Animation

Remotion 动画配置生成

Generates animation configuration documents that define spring behaviors, interpolation mappings, easing curves, and timing constants for Remotion videos. This skill focuses exclusively on animation parameters and does NOT generate component code.

生成用于Remotion视频的动画配置文档，定义弹簧行为、插值映射、缓动曲线和时序常量。本技能仅专注于动画参数，不生成组件代码。

What This Skill Does

本技能的功能

Generates animation configurations for:

Spring configs — Damping, stiffness, mass parameters for spring animations
Interpolation mappings — Input/output ranges for value transformations
Easing functions — Timing function configurations
Animation timing — Stagger delays, durations, transition points
Progress calculations — Frame-based animation progress logic

为以下内容生成动画配置：

弹簧配置（Spring configs） — 弹簧动画的阻尼、刚度、质量参数
插值映射（Interpolation mappings） — 值转换的输入/输出范围
缓动函数（Easing functions） — 时序函数配置
动画时序（Animation timing） — 交错延迟、持续时间、过渡点
进度计算（Progress calculations） — 基于帧的动画进度逻辑

Scope Boundaries

范围边界

IN SCOPE:

Spring configuration parameters
Interpolation input/output ranges
Easing curve definitions
Animation timing constants
Progress calculation patterns

OUT OF SCOPE:

Component implementation (use
```
/remotion-component-gen
```
)
Scene layout (use
```
/remotion-composition
```
)
Visual styling (colors, fonts, layout)
Asset management (use
```
/remotion-asset-coordinator
```
)

包含范围：

弹簧配置参数
插值输入/输出范围
缓动曲线定义
动画时序常量
进度计算模式

排除范围：

组件实现（请使用
```
/remotion-component-gen
```
）
场景布局（请使用
```
/remotion-composition
```
）
视觉样式（颜色、字体、布局）
资源管理（请使用
```
/remotion-asset-coordinator
```
）

Input/Output Formats

输入/输出格式

Input Format: Animation Requirements

输入格式：动画需求

Accepts animation specifications from natural language or motion specs:

From Natural Language:

Create smooth entrance animations with gentle bounce for logo.
Scale from 0.8 to 1.0 over 30 frames.
Stagger text words with 5 frame delay between each.

From Motion Spec:

markdown

undefined

接受自然语言或运动规范形式的动画需求：

自然语言形式：

为logo创建带有轻微弹跳效果的平滑入场动画。
在30帧内从0.8缩放至1.0。
文本单词之间设置5帧的交错延迟。

运动规范形式：

markdown

undefined

Scene 1 Animation Details

场景1动画细节

Logo Entrance:

Spring animation: Scale 0.8 → 1.0
Timing: Frames 0-30
Config: Smooth with slight bounce (damping: 180)
Opacity: 0 → 1 (linear)

Text Stagger:

Word-by-word reveal
Stagger delay: 5 frames
Individual word animation: 15 frames
Spring config: Snappy (damping: 20, stiffness: 200)

undefined

Logo入场：

弹簧动画：缩放 0.8 → 1.0
时序：第0-30帧
配置：平滑带轻微弹跳（阻尼：180）
透明度：0 → 1（线性）

文本交错：

逐字显示
交错延迟：5帧
单个单词动画：15帧
弹簧配置：快速响应（阻尼：20，刚度：200）

undefined

Output Format: ANIMATION_CONFIG.md

输出格式：ANIMATION_CONFIG.md

Generates a configuration document with all animation parameters:

markdown

undefined

生成包含所有动画参数的配置文档：

markdown

undefined

Animation Configuration: ProductDemo

动画配置：产品演示（ProductDemo）

Status

状态

✅ Animation parameters defined ⏳ Ready for implementation in components

✅ 动画参数已定义 ⏳ 可在组件中实现

Spring Configurations

弹簧配置

typescript

export const SPRING_CONFIGS = {
  // Smooth, elegant entrance - minimal bounce
  smooth: {
    damping: 200,
    mass: 1,
    stiffness: 100,
  },

  // Snappy, responsive - quick settle
  snappy: {
    damping: 20,
    stiffness: 200,
    mass: 0.5,
  },

  // Bouncy, playful - noticeable oscillation
  bouncy: {
    damping: 8,
    mass: 1,
    stiffness: 100,
  },

  // Gentle, soft - slow and smooth
  gentle: {
    damping: 30,
    stiffness: 80,
    mass: 1,
  },
} as const;

typescript

export const SPRING_CONFIGS = {
  // 平滑优雅的入场 - 轻微弹跳
  smooth: {
    damping: 200,
    mass: 1,
    stiffness: 100,
  },

  // 快速响应 - 快速稳定
  snappy: {
    damping: 20,
    stiffness: 200,
    mass: 0.5,
  },

  // 弹跳活泼 - 明显振荡
  bouncy: {
    damping: 8,
    mass: 1,
    stiffness: 100,
  },

  // 柔和缓慢 - 平滑舒缓
  gentle: {
    damping: 30,
    stiffness: 80,
    mass: 1,
  },
} as const;

Interpolation Mappings

插值映射

typescript

export const INTERPOLATIONS = {
  // Logo scale animation
  logoScale: {
    input: [0, 1],      // Progress from spring (0 to 1)
    output: [0.8, 1],   // Scale value (0.8 to 1.0)
    extrapolate: 'clamp',
  },

  // Text slide-in
  textSlide: {
    input: [0, 1],
    output: [-50, 0],   // Translate X from -50px to 0
    extrapolate: 'clamp',
  },

  // Fade effect
  fade: {
    input: [0, 1],
    output: [0, 1],     // Opacity 0 to 1
    extrapolate: 'clamp',
  },
} as const;

typescript

export const INTERPOLATIONS = {
  // Logo缩放动画
  logoScale: {
    input: [0, 1],      // 弹簧进度（0到1）
    output: [0.8, 1],   // 缩放值（0.8到1.0）
    extrapolate: 'clamp',
  },

  // 文本滑入
  textSlide: {
    input: [0, 1],
    output: [-50, 0],   // X轴平移从-50px到0
    extrapolate: 'clamp',
  },

  // 淡入淡出效果
  fade: {
    input: [0, 1],
    output: [0, 1],     // 透明度从0到1
    extrapolate: 'clamp',
  },
} as const;

Animation Timing

动画时序

typescript

export const ANIMATION_TIMING = {
  // Global timing constants
  fps: 30,

  // Stagger animations
  stagger: {
    textWords: 5,         // Frame delay between words
    listItems: 3,         // Frame delay between list items
    cards: 8,             // Frame delay between card reveals
  },

  // Durations
  durations: {
    fadeIn: 15,           // Frames for fade in
    fadeOut: 10,          // Frames for fade out
    hold: 30,             // Frames to hold on screen
    quickTransition: 5,   // Frames for quick change
  },

  // Scene-specific timing
  scene1: {
    logoEnter: { start: 0, end: 30 },
    textReveal: { start: 20, end: 60 },
  },

  scene2: {
    contentFadeIn: { start: 0, end: 20 },
    bulletStagger: { start: 25, delay: 8 },
  },
} as const;

typescript

export const ANIMATION_TIMING = {
  // 全局时序常量
  fps: 30,

  // 交错动画
  stagger: {
    textWords: 5,         // 单词之间的帧延迟
    listItems: 3,         // 列表项之间的帧延迟
    cards: 8,             // 卡片展示之间的帧延迟
  },

  // 持续时间
  durations: {
    fadeIn: 15,           // 淡入帧数
    fadeOut: 10,          // 淡出帧数
    hold: 30,             // 屏幕停留帧数
    quickTransition: 5,   // 快速切换帧数
  },

  // 场景特定时序
  scene1: {
    logoEnter: { start: 0, end: 30 },
    textReveal: { start: 20, end: 60 },
  },

  scene2: {
    contentFadeIn: { start: 0, end: 20 },
    bulletStagger: { start: 25, delay: 8 },
  },
} as const;

Easing Functions

缓动函数

typescript

export const EASING = {
  // Standard easing curves
  easeInOut: (t: number) =>
    t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,

  easeOut: (t: number) =>
    t * (2 - t),

  easeIn: (t: number) =>
    t * t,

  // Cubic bezier approximations
  cubicBezier: {
    ease: [0.25, 0.1, 0.25, 1],
    easeIn: [0.42, 0, 1, 1],
    easeOut: [0, 0, 0.58, 1],
    easeInOut: [0.42, 0, 0.58, 1],
  },
} as const;

typescript

export const EASING = {
  // 标准缓动曲线
  easeInOut: (t: number) =>
    t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,

  easeOut: (t: number) =>
    t * (2 - t),

  easeIn: (t: number) =>
    t * t,

  // 三次贝塞尔近似
  cubicBezier: {
    ease: [0.25, 0.1, 0.25, 1],
    easeIn: [0.42, 0, 1, 1],
    easeOut: [0, 0, 0.58, 1],
    easeInOut: [0.42, 0, 0.58, 1],
  },
} as const;

Progress Calculation Patterns

进度计算模式

typescript

// Pattern 1: Simple spring progress
const logoProgress = spring({
  frame,
  fps,
  config: SPRING_CONFIGS.smooth,
});

// Pattern 2: Delayed spring (for stagger)
const itemProgress = spring({
  frame: frame - (index * ANIMATION_TIMING.stagger.textWords),
  fps,
  config: SPRING_CONFIGS.snappy,
});

// Pattern 3: Frame-based linear progress
const linearProgress = interpolate(
  frame,
  [startFrame, endFrame],
  [0, 1],
  { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
);

// Pattern 4: Eased progress
const easedProgress = EASING.easeOut(linearProgress);

// Pattern 5: Looping animation
const loopProgress = (frame % loopDuration) / loopDuration;

typescript

// 模式1：简单弹簧进度
const logoProgress = spring({
  frame,
  fps,
  config: SPRING_CONFIGS.smooth,
});

// 模式2：延迟弹簧（用于交错动画）
const itemProgress = spring({
  frame: frame - (index * ANIMATION_TIMING.stagger.textWords),
  fps,
  config: SPRING_CONFIGS.snappy,
});

// 模式3：基于帧的线性进度
const linearProgress = interpolate(
  frame,
  [startFrame, endFrame],
  [0, 1],
  { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
);

// 模式4：缓动进度
const easedProgress = EASING.easeOut(linearProgress);

// 模式5：循环动画
const loopProgress = (frame % loopDuration) / loopDuration;

Usage Examples

使用示例

Implementing in Components

在组件中实现

typescript

import { useCurrentFrame, useVideoConfig, spring, interpolate } from 'remotion';
import { SPRING_CONFIGS, INTERPOLATIONS, ANIMATION_TIMING } from '../constants';

// In component:
const frame = useCurrentFrame();
const { fps } = useVideoConfig();

// Apply spring animation
const logoProgress = spring({
  frame,
  fps,
  config: SPRING_CONFIGS.smooth,
});

// Apply interpolation
const scale = interpolate(
  logoProgress,
  INTERPOLATIONS.logoScale.input,
  INTERPOLATIONS.logoScale.output
);

const opacity = logoProgress; // Direct 0-1 progress

// Use in styles
<div style={{
  transform: `scale(${scale})`,
  opacity,
}} />

typescript

import { useCurrentFrame, useVideoConfig, spring, interpolate } from 'remotion';
import { SPRING_CONFIGS, INTERPOLATIONS, ANIMATION_TIMING } from '../constants';

// 在组件中：
const frame = useCurrentFrame();
const { fps } = useVideoConfig();

// 应用弹簧动画
const logoProgress = spring({
  frame,
  fps,
  config: SPRING_CONFIGS.smooth,
});

// 应用插值
const scale = interpolate(
  logoProgress,
  INTERPOLATIONS.logoScale.input,
  INTERPOLATIONS.logoScale.output
);

const opacity = logoProgress; // 直接使用0-1进度

// 在样式中使用
<div style={{
  transform: `scale(${scale})`,
  opacity,
}} />

Next Steps

后续步骤

Integrate into constants.ts in composition folder
Use in component implementation via
```
/remotion-component-gen
```
Test animation feel in Remotion preview
Adjust parameters if timing feels off
Document final values for consistency

集成到组合文件夹的constants.ts
通过
/remotion-component-gen
在组件中实现
在Remotion预览中测试动画效果
如果时序不合适，调整参数
记录最终值以保持一致性

Checklist

检查清单

Spring configs defined
Interpolation ranges specified
Timing constants calculated
Progress patterns documented
Integrated into components (next step)
Tested in preview (next step)

undefined

Animation Patterns

动画模式

Pattern 1: Entrance Animation

模式1：入场动画

Spring-based entrance with scale and opacity:

typescript

const entranceProgress = spring({
  frame,
  fps,
  config: { damping: 200 },
});

const scale = interpolate(entranceProgress, [0, 1], [0.8, 1]);
const opacity = entranceProgress;
const translateY = interpolate(entranceProgress, [0, 1], [20, 0]);

基于弹簧的入场动画，包含缩放和透明度：

typescript

const entranceProgress = spring({
  frame,
  fps,
  config: { damping: 200 },
});

const scale = interpolate(entranceProgress, [0, 1], [0.8, 1]);
const opacity = entranceProgress;
const translateY = interpolate(entranceProgress, [0, 1], [20, 0]);

Pattern 2: Staggered Reveal

模式2：交错展示

Multiple items animating with delay:

typescript

const items = ['Item 1', 'Item 2', 'Item 3'];
const STAGGER_DELAY = 5;

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

  return (
    <div style={{ opacity: itemProgress }}>
      {item}
    </div>
  );
});

多个元素带延迟的动画：

typescript

const items = ['Item 1', 'Item 2', 'Item 3'];
const STAGGER_DELAY = 5;

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

  return (
    <div style={{ opacity: itemProgress }}>
      {item}
    </div>
  );
});

Pattern 3: Transition Between States

模式3：状态间过渡

Smooth transition using frame ranges:

typescript

const transitionProgress = interpolate(
  frame,
  [startFrame, endFrame],
  [0, 1],
  { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
);

// State A → State B
const value = interpolate(
  transitionProgress,
  [0, 1],
  [stateAValue, stateBValue]
);

使用帧范围的平滑过渡：

typescript

const transitionProgress = interpolate(
  frame,
  [startFrame, endFrame],
  [0, 1],
  { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
);

// 状态A → 状态B
const value = interpolate(
  transitionProgress,
  [0, 1],
  [stateAValue, stateBValue]
);

Pattern 4: Looping Animation

模式4：循环动画

Continuous cycling animation:

typescript

const LOOP_DURATION = 60; // frames
const loopProgress = (frame % LOOP_DURATION) / LOOP_DURATION;

const rotation = loopProgress * 360; // 0 to 360 degrees
const pulse = Math.sin(loopProgress * Math.PI * 2) * 0.1 + 1; // 0.9 to 1.1

持续循环的动画：

typescript

const LOOP_DURATION = 60; // 帧数
const loopProgress = (frame % LOOP_DURATION) / LOOP_DURATION;

const rotation = loopProgress * 360; // 0到360度
const pulse = Math.sin(loopProgress * Math.PI * 2) * 0.1 + 1; // 0.9到1.1

Pattern 5: Overshoot and Settle

模式5：过冲与稳定

Spring with intentional overshoot:

typescript

const overshootProgress = spring({
  frame,
  fps,
  config: {
    damping: 10,    // Low damping = more bounce
    stiffness: 100,
  },
});

const scale = interpolate(overshootProgress, [0, 1], [0, 1.2]); // Overshoots to 1.2

带有有意过冲效果的弹簧动画：

typescript

const overshootProgress = spring({
  frame,
  fps,
  config: {
    damping: 10,    // 低阻尼 = 更多弹跳
    stiffness: 100,
  },
});

const scale = interpolate(overshootProgress, [0, 1], [0, 1.2]); // 过冲到1.2

Spring Configuration Guide

弹簧配置指南

Damping Parameter

阻尼参数

Controls how quickly oscillation stops:

typescript

// High damping (200+) - Smooth, minimal/no bounce
damping: 200  // → Smooth entrance, elegant

// Medium damping (20-80) - Visible bounce, quick settle
damping: 40   // → Snappy, responsive

// Low damping (8-15) - Strong bounce, playful
damping: 10   // → Bouncy, fun

// Very low damping (2-5) - Extreme bounce
damping: 5    // → Jello-like

控制振荡停止的速度：

typescript

// 高阻尼（200+）- 平滑，极少/无弹跳
damping: 200  // → 平滑入场，优雅

// 中等阻尼（20-80）- 可见弹跳，快速稳定
damping: 40   // → 快速响应

// 低阻尼（8-15）- 强烈弹跳，活泼
damping: 10   // → 弹跳活泼

// 极低阻尼（2-5）- 极端弹跳
damping: 5    // → 果冻状

Stiffness Parameter

刚度参数

Controls animation speed:

typescript

// High stiffness (200+) - Fast animation
stiffness: 300  // → Quick, snappy

// Medium stiffness (80-150) - Standard speed
stiffness: 100  // → Balanced

// Low stiffness (30-60) - Slow animation
stiffness: 50   // → Gentle, relaxed

控制动画速度：

typescript

// 高刚度（200+）- 快速动画
stiffness: 300  // → 快速响应

// 中等刚度（80-150）- 标准速度
stiffness: 100  // → 平衡

// 低刚度（30-60）- 慢速动画
stiffness: 50   // → 柔和舒缓

Mass Parameter

质量参数

Controls inertia and weight:

typescript

// Light mass (0.5) - Responsive, quick
mass: 0.5  // → Featherlight

// Standard mass (1) - Balanced
mass: 1    // → Normal weight

// Heavy mass (2+) - Sluggish, weighty
mass: 2    // → Heavy, substantial

控制惯性和重量：

typescript

// 轻质量（0.5）- 响应迅速
mass: 0.5  // → 轻盈

// 标准质量（1）- 平衡
mass: 1    // → 正常重量

// 重质量（2+）- 迟缓沉重
mass: 2    // → 沉重厚实

Easing Function Reference

缓动函数参考

Standard easing curves:

typescript

// Linear - Constant speed
easeLinear: (t) => t

// Ease Out - Fast start, slow end (most common)
easeOut: (t) => t * (2 - t)

// Ease In - Slow start, fast end
easeIn: (t) => t * t

// Ease In-Out - Slow start and end, fast middle
easeInOut: (t) => t < 0.5 ? 2*t*t : -1+(4-2*t)*t

// Ease Out Cubic - Smooth deceleration
easeOutCubic: (t) => (--t)*t*t + 1

// Ease In Cubic - Smooth acceleration
easeInCubic: (t) => t*t*t

标准缓动曲线：

typescript

// 线性 - 匀速
easeLinear: (t) => t

// 缓出 - 快启动，慢结束（最常用）
easeOut: (t) => t * (2 - t)

// 缓入 - 慢启动，快结束
easeIn: (t) => t * t

// 缓入缓出 - 慢启动和结束，中间快速
easeInOut: (t) => t < 0.5 ? 2*t*t : -1+(4-2*t)*t

// 三次缓出 - 平滑减速
easeOutCubic: (t) => (--t)*t*t + 1

// 三次缓入 - 平滑加速
easeInCubic: (t) => t*t*t

Frame Calculation Helpers

帧计算工具

Common frame calculations:

typescript

// Convert seconds to frames
const secondsToFrames = (seconds: number, fps: number) => seconds * fps;

// Calculate stagger frame offset
const staggerFrame = (index: number, delay: number, startFrame: number = 0) =>
  startFrame + (index * delay);

// Calculate animation end frame
const endFrame = (startFrame: number, durationFrames: number) =>
  startFrame + durationFrames;

// Check if animation is active
const isActive = (frame: number, start: number, end: number) =>
  frame >= start && frame <= end;

// Get progress within range
const rangeProgress = (frame: number, start: number, end: number) =>
  Math.max(0, Math.min(1, (frame - start) / (end - start)));

常用帧计算：

typescript

// 将秒转换为帧
const secondsToFrames = (seconds: number, fps: number) => seconds * fps;

// 计算交错帧偏移
const staggerFrame = (index: number, delay: number, startFrame: number = 0) =>
  startFrame + (index * delay);

// 计算动画结束帧
const endFrame = (startFrame: number, durationFrames: number) =>
  startFrame + durationFrames;

// 检查动画是否激活
const isActive = (frame: number, start: number, end: number) =>
  frame >= start && frame <= end;

// 获取范围内的进度
const rangeProgress = (frame: number, start: number, end: number) =>
  Math.max(0, Math.min(1, (frame - start) / (end - start)));

Integration Workflow

集成流程

Generate animation config using this skill → ANIMATION_CONFIG.md
Add to constants.ts in composition folder
Reference in components during implementation
Test in preview and adjust parameters
Document any changes back to config

使用本技能生成动画配置 → ANIMATION_CONFIG.md
添加到组合文件夹的constants.ts
在组件实现中引用
在预览中测试并调整参数
将任何更改记录回配置

Common Animation Combinations

常见动画组合

Logo Entrance (Smooth + Scale + Fade)

Logo入场（平滑+缩放+淡入）

typescript

config: { damping: 200 }
scale: [0.8, 1]
opacity: [0, 1]
translateY: [20, 0]

typescript

config: { damping: 200 }
scale: [0.8, 1]
opacity: [0, 1]
translateY: [20, 0]

Text Reveal (Stagger + Slide + Fade)

文本展示（交错+滑入+淡入）

typescript

config: { damping: 20, stiffness: 200 }
staggerDelay: 5 frames
translateX: [-30, 0]
opacity: [0, 1]

typescript

config: { damping: 20, stiffness: 200 }
staggerDelay: 5 frames
translateX: [-30, 0]
opacity: [0, 1]

Button Pulse (Loop + Scale)

按钮脉动（循环+缩放）

typescript

loopDuration: 60 frames
scale: [1, 1.05, 1]
easing: easeInOut

typescript

loopDuration: 60 frames
scale: [1, 1.05, 1]
easing: easeInOut

Page Transition (Fade + Slide)

页面过渡（淡入淡出+滑入）

typescript

duration: 15 frames
opacity: [1, 0] (out), [0, 1] (in)
translateX: [0, -100] (out), [100, 0] (in)

typescript

duration: 15 frames
opacity: [1, 0]（淡出）, [0, 1]（淡入）
translateX: [0, -100]（淡出）, [100, 0]（淡入）

Timing Best Practices

时序最佳实践

Recommended timing ranges for different animation types:

typescript

// Micro-interactions
button hover: 5-10 frames
tooltip appear: 8-12 frames

// Standard animations
fade in/out: 10-20 frames
slide in/out: 15-25 frames
scale entrance: 20-30 frames

// Stagger delays
individual items: 3-8 frames
word-by-word: 4-6 frames
large groups: 2-4 frames

// Hold durations
text on screen: 60-120 frames (2-4 seconds)
quick message: 30-60 frames (1-2 seconds)

不同动画类型的推荐时序范围：

typescript

// 微交互
按钮悬停：5-10帧
提示框出现：8-12帧

// 标准动画
淡入淡出：10-20帧
滑入滑出：15-25帧
缩放入场：20-30帧

// 交错延迟
单个元素：3-8帧
逐字：4-6帧
大型组：2-4帧

// 停留时长
文本在屏幕上：60-120帧（2-4秒）
快速消息：30-60帧（1-2秒）

Integration with Other Skills

与其他技能的集成

This skill feeds into:

remotion-animation (this skill)
    ↓ outputs: ANIMATION_CONFIG.md
remotion-component-gen
    ↓ applies animation configs in components
remotion-composition
    ↓ coordinates timing across scenes

Works with:

```
/motion-designer
```
— Animation specs from design documents
```
/remotion-scaffold
```
— Configs go into constants.ts
```
/remotion-component-gen
```
— Components apply these configs
```
/remotion-composition
```
— Timing coordinates with Sequence layout
```
/remotion-spec-translator
```
— Orchestrates this skill when translating specs

This skill provides precise animation parameter definitions that ensure consistent, production-quality motion across Remotion video projects.

本技能的输出流向：

remotion-animation（本技能）
    ↓ 输出：ANIMATION_CONFIG.md
remotion-component-gen
    ↓ 在组件中应用动画配置
remotion-composition
    ↓ 协调场景间的时序

可与以下技能配合使用：

```
/motion-designer
```
— 从设计文档生成动画规范
```
/remotion-scaffold
```
— 配置文件存入constants.ts
```
/remotion-component-gen
```
— 组件应用这些配置
```
/remotion-composition
```
— 时序与Sequence布局协调
```
/remotion-spec-translator
```
— 转换规范时调用本技能

本技能提供精确的动画参数定义，确保Remotion视频项目中动画的一致性和生产级质量。