remotion-animation

Remotion アニメーション

Remotion 動画のスプリング動作、補間マッピング、イージングカーブ、タイミング定数を定義するアニメーション設定ドキュメントを生成します。このスキルはアニメーションパラメーターに特化しており、コンポーネントコードは生成しません。

このスキルでできること

以下のアニメーション設定を生成します。

1. スプリング設定 — スプリングアニメーションの減衰、剛性、質量のパラメーター
2. 補間マッピング — 値の変換に使用する入力／出力範囲
3. イージング関数 — タイミング関数の設定
4. アニメーションのタイミング — スタガーの遅延、長さ、遷移ポイント
5. 進行状況の計算 — フレームベースのアニメーション進行状況のロジック

対応範囲

対象範囲：

• スプリング設定のパラメーター
• 補間の入力／出力範囲
• イージングカーブの定義
• アニメーションのタイミング定数
• 進行状況の計算パターン

対象外：

• コンポーネントの実装（/remotion-component-gen を使用）
• シーンのレイアウト（/remotion-composition を使用）
• ビジュアルスタイル（色、フォント、レイアウト）
• アセット管理（/remotion-asset-coordinator を使用）

入力／出力形式

入力形式：アニメーション要件

自然言語またはモーション仕様から、アニメーション仕様を受け付けます。

自然言語から：

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.

モーション仕様から：

## Scene 1 Animation Details

**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)

出力形式：ANIMATION_CONFIG.md

すべてのアニメーションパラメーターを含む設定ドキュメントを生成します。

# Animation Configuration: 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;

補間マッピング

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;

アニメーションのタイミング

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;

イージング関数

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;

進行状況の計算パターン

// 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;

使用例

コンポーネントへの実装

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,
}} />

次のステップ

1. コンポジションフォルダーの constants.ts に統合します
2. /remotion-component-gen を使ってコンポーネントに実装します
3. Remotion プレビューでアニメーションの感触をテストします
4. タイミングに違和感がある場合はパラメーターを調整します
5. 一貫性を保つため、最終値を記録します

チェックリスト

• スプリング設定を定義済み
• 補間範囲を指定済み
• タイミング定数を計算済み
• 進行状況のパターンを記録済み
• コンポーネントに統合済み（次のステップ）
• プレビューでテスト済み（次のステップ）

## Animation Patterns

### Pattern 1: Entrance Animation

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

パターン 2：スタガー表示

複数の項目を遅延させてアニメーション表示します。

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

パターン 3：状態間の遷移

フレーム範囲を使ったスムーズな遷移です。

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

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

パターン 4：ループアニメーション

連続して繰り返すアニメーションです。

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

パターン 5：オーバーシュートして落ち着く動き

意図的なオーバーシュートを伴うスプリングです。

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

スプリング設定ガイド

減衰パラメーター

振動がどれだけ速く止まるかを制御します。

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

剛性パラメーター

アニメーションの速度を制御します。

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

質量パラメーター

慣性と重さを制御します。

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

イージング関数リファレンス

標準的なイージングカーブ：

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

フレーム計算ヘルパー

一般的なフレーム計算：

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

統合ワークフロー

1. このスキルを使ってアニメーション設定を生成します → ANIMATION_CONFIG.md
2. コンポジションフォルダーの constants.ts に追加します
3. 実装時にコンポーネントから参照します
4. プレビューでテストし、パラメーターを調整します
5. 変更があれば設定に記録します

よくあるアニメーションの組み合わせ

ロゴの登場（スムーズ＋拡大縮小＋フェード）

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

テキストの表示（スタガー＋スライド＋フェード）

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

ボタンのパルス（ループ＋拡大縮小）

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

ページ遷移（フェード＋スライド）

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

タイミングのベストプラクティス

アニメーションの種類ごとの推奨タイミング範囲：

// 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)

他のスキルとの連携

このスキルは以下に利用されます。

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

連携するスキル：

• /motion-designer — デザインドキュメントのアニメーション仕様
• /remotion-scaffold — 設定を constants.ts に格納します
• /remotion-component-gen — コンポーネントにこれらの設定を適用します
• /remotion-composition — Sequence レイアウトに合わせてタイミングを調整します
• /remotion-spec-translator — 仕様の翻訳時にこのスキルを統括します

---

このスキルでは、Remotion の動画プロジェクト全体で一貫性のある、プロダクション品質のモーションを実現するための、正確なアニメーションパラメーターを定義します。