remotion-component-gen

Name: remotion-component-gen
Author: ncklrs

github.com/ncklrsクリエイティブ・メディア53161 回インストール35 週間前に更新

remotion-component-gen について

remotion-component-gen は、ビジュアル指示とアニメーション仕様から Remotion のシーンコンポーネントを生成するスキルです。シーン単位の TSX を作成する制作者向けに、アニメーション、レイアウト、アセット、型定義を扱います。

主な機能

01シーン TSX の生成
02spring と interpolate によるアニメーション実装
03ビジュアルレイアウトとスタイルの構築
04StaticFile アセットの組み込み
05コンポーネントの Props と型定義

活用シーン

01シーン指示から Remotion コンポーネントを作成
02テキストや段階表示のアニメーション実装
03提供アセットをシーンコードに組み込み

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/ncklrs/startup-os-skills --skill remotion-component-gen

インストール後、Claude Code で/remotion-component-genを入力して読み込まれたか確認します。

同梱ファイルrules/_sections.md

詳細

Remotion Component Gen

ビジュアルの方向性とアニメーション仕様に基づき、本番環境で使える Remotion シーンコンポーネントの実装を生成します。このスキルでは、完全に動作するシーンコンポーネントの作成に重点を置いています。

このスキルでできること

以下のコードを生成します。

シーンコンポーネント — 個々のシーンの完全な TSX 実装
アニメーションの統合 — アニメーション設定から spring／interpolate を適用
ビジュアルレイアウト — 位置、サイズ、レイアウトのロジックを実装
アセットの統合 — StaticFile のインポートとアセットの使用
TypeScript 型 — シーンコンポーネントの Props インターフェース

対応範囲

対応範囲内：

完全なシーンコンポーネントの TSX コード
アニメーションの実装（spring、interpolate）
レイアウトとビジュアルスタイル
アセットのインポートと使用
コンポーネントレベルのロジック

対応範囲外：

アニメーション設定の定義（/remotion-animation を使用）
コンポジションのシーケンスレイアウト（/remotion-composition を使用）
プロジェクトのスキャフォールディング（/remotion-scaffold を使用）
アセットの調達（/remotion-asset-coordinator を使用）

入力／出力形式

入力形式：シーンのビジュアル指示

ビジュアルとアニメーションの詳細を含むシーンの説明を受け付けます。

モーション仕様から：

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

必要なアセット

ロゴ画像：public/images/logo.svg（400x400）

アニメーションの概要

ロゴの登場： 滑らかな spring による拡大＋フェード（0～30 フレーム）
サブタイトルの表示： 線形のフェード＋上方向へのスライド（20～50 フレーム）

次のステップ

ロゴアセットを追加：public/images/logo.svg に配置します
プレビューでテスト：タイミングとアニメーションの印象を確認します
定数を調整：必要に応じて（拡大率、タイミングなど）調整します
次のシーンに進む：別の /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>
  );
}

統合ワークフロー

ビジュアル指示を受け取る → このスキルに入力します
シーンコンポーネントを生成する → SCENE_COMPONENT.md
シーンファイルを作成する（scenes/ フォルダー内）
指定されたアセットを追加する
プレビューでテストする
必要に応じてタイミング／スタイルを調整する
次のシーンに進む

他のスキルとの連携

このスキルは次のパイプラインで動作します。

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 でモーションデザイン仕様を形にします。

Markdown 対応

ログインしてコメント

基本情報

作者: ncklrs
リポジトリ: ncklrs/startup-os-skills
カテゴリ: クリエイティブ・メディア
インストール数: 161
GitHub スター: 53

問題を報告

おすすめの Skills

すべての Skills

ai-video-generation

github.com/inference-sh

1.7M

inference.sh CLI で Google Veo、Seedance 2.0、HappyHorse、Wan、Grok など 40 以上のモデルを使って AI 動画を生成する。モデル：Veo 3.1、Seedance 2.0、HappyHorse 1.0、Wan 2.5、Grok Imagine Video、OmniHuman、Fabric、HunyuanVideo。機能：テキストから動画、画像から動画、参照から動画、動画編集、リップシンク、アバターアニメーション、動画アップスケーリング、フォーリー音。用途：ソーシャルメディア動画、マーケティングコンテンツ、解説動画、製品デモ、AI アバター。トリガー：video generation、ai video、text to video、image to video、veo、animate image、video from image、ai animation、video generator、generate video、t2v、i2v、ai video maker、create video with ai、runway alternative、pika alternative、sora alternative、kling alternative、seedance、happyhorse

ai-image-generation

github.com/inference-sh

1.7M

inference.sh CLI で GPT-Image-2.5、FLUX、Gemini、Grok、Seedream、Reve など 50 以上のモデルを使って AI 画像を生成する。モデル：GPT-Image-2.5 Flare、GPT-Image-2.5 Sunburst、GPT-Image-2、FLUX Dev LoRA、FLUX.2 Klein LoRA、Gemini 3 Pro Image、Grok Imagine、Seedream 4.5、Reve、ImagineArt。機能：テキストから画像、画像から画像、インペインティング、LoRA、画像編集、アップスケーリング、テキストレンダリング。用途：AI アート、製品モックアップ、コンセプトアート、ソーシャルメディア用グラフィック、マーケティングビジュアル、イラスト。トリガー：flux、image generation、ai image、text to image、stable diffusion、generate image、ai art、midjourney alternative、dall-e alternative、text2img、t2i、image generator、ai picture、create image with ai、generative ai、ai illustration、grok image、gemini image、gpt image、openai image、chatgpt image

ai-avatar-video

github.com/inference-sh

1.7M

inference.sh CLI で AI アバターやトーキングヘッド動画を作成します。おすすめ：P-Video-Avatar（最速、最安、TTS 内蔵）。その他：OmniHuman、Fabric、PixVerse。音声：Inworld TTS-2（100以上の言語に対応し、キャラクターの感情を調整可能）、ElevenLabs、Kokoro。機能：音声駆動アバター、テキストからアバター、リップシンク動画、トーキングヘッド生成、バーチャルプレゼンター、UGC コンテンツ。用途：AI プレゼンター、解説動画、バーチャルインフルエンサー、吹き替え、マーケティング動画、UGC 広告、ゲームアバター、NPC の会話。トリガー：ai avatar、talking head、lipsync、avatar video、virtual presenter、ai spokesperson、audio driven video、heygen alternative、synthesia alternative、talking avatar、lip sync、video avatar、ai presenter、digital human、ugc、ugc video、ugc ad、avatar ugc

remotion-render

github.com/inference-sh

1.6M

inference.sh を介して React/Remotion コンポーネントコードから動画をレンダリングします。TSX コードを渡すと MP4 を取得できます。useCurrentFrame、useVideoConfig、spring、interpolate、AbsoluteFill、Sequence など、すべての Remotion API に対応します。解像度、FPS、長さ、コーデックを設定できます。用途：プログラムによる動画生成、アニメーショングラフィック、モーションデザイン、データ駆動型動画、React アニメーションの動画化。トリガー：remotion、render video from code、tsx to video、react video、programmatic video、remotion render、code to video、animated video、motion graphics code、react animation video