Imgcli から構築する Remotion ローンチ動画

製品ローンチの概要を、15～30秒の Remotion 製ローンチフィルムに変換します。すべてのショットは Imgcli コンポーネントです。これらのコンポーネントは、ハンドチューンされ、実際にレンダリングされたフレームで調整された Remotion シーンであり、shadcn CLI でインストールすると、あなたが所有するコードとしてプロジェクトに配置されます。

なぜ Imgcli なのか、手書きアニメーションではないのか。 エージェントがゼロからアニメーションを作成すると、毎回同じような見た目（中央揃えのテキストにグラデーション、すべてがフェードイン、最後にロゴ）に陥ります。Imgcli のシーンは、実際のローンチフィルムを参考にフレームごとに構築されているため、動きはすでに「高価」に見えるためのタイミング、タイポグラフィ、カメラワークを備えています。あなたの仕事は、シーンを選んでプロップスを埋めることであり、動きを発明することではありません。

Imgcli のルール

すべてのビートは、適切なものがない場合を除き、Imgcli コンポーネントです。 ショットに interpolate() や spring() を書き始める前に、カタログを確認してください。 https://imgcli.com/llms-components.txt?ref=skill-launch には、インストール可能なすべてのコンポーネントとその目的、実行フレーム数がリストされています。任意のコンポーネントページは、.md を追加するとマークダウンを返します（例：https://imgcli.com/docs/scenes/announce-title.md?ref=skill-launch）。
コンポーネント名を発明しないでください。 リストにある名前のみをインストールします。ビートに合うものがなければ、その旨を伝え、そのビートはタイポグラフィ（text-reveal）で対応し、名前を推測しないでください。
プロップスを埋め、コンポーネントを書き換えないでください。 コピー、色、画像はプロップスを通じて変更します。インストールされた Imgcli ファイル内の動きを編集すると、レンダリングされたフレームに合わせて調整されたタイミングが崩れます。

imgcli スキルが利用可能な場合は、合成とレンダリングチェックにそれを使用してください。

前提条件

Remotion プロジェクト（npx create-video@latest）。キャンバスサイズは 1280×720、30fps。これはすべての Imgcli シーンがレイアウトされるサイズです。
shadcn CLI。プロジェクトに components.json がない場合は、npx shadcn@latest init を実行してください。
シーン間のカット用に @remotion/transitions：npm i @remotion/transitions。
ローンチ用コピー：製品名、見出し、タグライン、証明できる数値、そして実際のスクリーンショットまたはスクリーンレコーディング。

ワークフロー

1. 入力情報を収集する

何かを書き始める前に、以下を取得してください。

概要: ローンチ投稿、ランディングページ、またはワンページャー。見出し、タグライン、差別化できる機能、証明となる数値、トーンを抽出します。
ブランド: ロゴ（SVG パスまたは PNG）、プライマリカラー、フォント。Imgcli シーンはこれらをプロップス（titleColor、logoSrc、symbolPath、fontFamily、theme）として受け取ります。
実際の製品ショット: スクリーンショットまたは30～60秒の録画。実際の UI コピーを反映させてください。ラベル、機能、数値を決して発明しないでください。 それはローンチを偽物のように見せる最も早い方法です。

2. コードの前にストーリーボードを作成する

最初にショットリストを書き、すべてのビートを Imgcli コンポーネントにマッピングします。

ビート	時間	Imgcli コンポーネント	フレーム数	伝える内容
フック	0～3秒	`type-morph` または `text-reveal`	94 / 90	視聴者の問題を約束に変える
名前	3～9秒	`announce-title`	170	アイブロー、製品名、タグライン、マーク
製品	9～15秒	`hero-launch`、`laptop-frame`、`phone-frame`	170 / 240 / 240	デバイス上の実際の画面
証明	15～17秒	`count-grid`、`follower-rush`	47 / 300	実際の数値
クローズ	17～20代	`wordmark-cut`、`block-wordmark`、`logo-flicker`、`logo-assemble`	66 / 150 / 100 / 108	製品名のみ

再レンダリングを減らすルール：

製品名ではなく、視聴者の問題で始めること。
名前が出てから3秒以内に製品を見せること。
自社の製品だけが提供できる瞬間に最も多くの画面時間を割り当てること。 機能に均等に時間を配分しないでください。
各シーケンスは、コンポーネントの自然な長さ（フレーム数の列、llms-components.txt にも記載）に予算を合わせること。 予算を少なく見積もるとアニメーションが途中で切れ、多く見積もると無音の時間が発生します。
テキストは画面に焼き付けること。 ほとんどのソーシャル動画はミュートで視聴されます。

3. シーンをインストールする

npx shadcn@latest add https://imgcli.com/r/type-morph.json https://imgcli.com/r/announce-title.json https://imgcli.com/r/hero-launch.json https://imgcli.com/r/count-grid.json https://imgcli.com/r/wordmark-cut.json

各ファイルは components/imgcli/<name>.tsx に配置され、依存関係も一緒にインストールされます。

4. 合成する

1つの TransitionSeries、ビートごとに1つのシーケンス、その間に短いフェードを配置します。この合成は型チェックが行われ、そのままレンダリングされます。public/ には4枚のスクリーンショットを配置してください。

import { fade } from "@remotion/transitions/fade";
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { staticFile } from "remotion";
import { AnnounceTitle } from "@/components/imgcli/announce-title";
import { CountGrid } from "@/components/imgcli/count-grid";
import { HeroLaunch } from "@/components/imgcli/hero-launch";
import { TypeMorph } from "@/components/imgcli/type-morph";
import { WordmarkCut } from "@/components/imgcli/wordmark-cut";

// 1280×720 @ 30fps。各シーケンスはコンポーネントの自然な長さに予算が合わされています。
const T = linearTiming({ durationInFrames: 12 });
// public/ 内の実際の製品スクリーンショット。これがない場合、シーンは snapcn のサンプル画像にフォールバックします。
const shots = ["shot-1.jpg", "shot-2.jpg", "shot-3.jpg", "shot-4.jpg"].map((f) => staticFile(f));

export const LaunchVideo: React.FC = () => (
  <TransitionSeries>
    {/* 1. フック：視聴者の問題を約束に変える */}
    <TransitionSeries.Sequence durationInFrames={94}>
      <TypeMorph
        lead="Your launch video "
        emphasis="takes a week."
        morphTo="takes a prompt."
        finally_="a prompt."
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 2. 製品名を伝える */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <AnnounceTitle
        eyebrow="Introducing"
        title="Acme 2.0"
        tagline="Billing that reconciles itself."
        symbolPath="" // 0 0 100 100 のボックス内のSVGパスでマークを指定。"" で非表示
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 3. 製品を見せる：実際のショット2枚（画像、動画、またはCSSグラデーションの代用） */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <HeroLaunch
        heading="Every invoice, matched."
        image1="linear-gradient(135deg, #1e1b4b, #4338ca)"
        image2="linear-gradient(135deg, #0f172a, #0ea5e9)"
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 4. 証明：実際の数値 */}
    <TransitionSeries.Sequence durationInFrames={60}>
      <CountGrid from="5" to="500" noun="teams" cards={shots} />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 5. 製品名で閉じる */}
    <TransitionSeries.Sequence durationInFrames={66}>
      <WordmarkCut word="acme." />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

durationInFrames={512}（シーケンスの合計から4×12フレームのオーバーラップを引いた値）、fps={30}、width={1280}、height={720} で登録します。

グラデーションを実際のスクリーンショットやクリップに置き換えるには：image1={staticFile("shot-1.png")} とし、ファイルを public/ に配置します。

5. レンダリングと監査のループ

フル動画をレンダリングする前に、単一フレームをレンダリングします。

# ビートごとに1フレーム：各シーケンスの中間点、および各カットの直前と直後
npx remotion still LaunchVideo out/beat-1.png --frame=47
npx remotion render LaunchVideo out/launch.mp4 --codec=h264 --crf=18

静止画を1枚のコンタクトシートに並べて、全体をレンダリングする前に確認します。

ffmpeg -y -pattern_type glob -i "out/beat-*.png" -vf "scale=480:-1,tile=5x1" out/contact.png

各フレームをチェックします。

テキストがクリップされていない、カット時に黒フレームがない、シーン開始前に何かが表示されていない。
画面上のすべての文字列が、概要からの実際のコピーである。
製品が名前の3秒以内に表示されている。

6. レビュー

2～3回のセルフパスの後、約20フレーム（ピークモーメントと各カットの両側）をレンダリングし、4人の批評家として、またはハーネスがサポートする場合は4つの並列サブエージェントとしてレビューします。

デザイン/レイアウト: 位置ずれ、トリミング、比率。
可読性: スマートフォンの720pで判読可能か、コントラスト、タイプミス。
ペーシング: 各ビートに適切な時間が割り当てられているか、クローズは強力か。
ブランド: 色、フォント、UIが実際の製品と一致しているか。

修正リストを1つの改訂計画にまとめてから、次のレンダリングに進みます。

7. プラットフォームに合わせて納品する

レンダリング前に動画の使用場所を確認します。アスペクト比ごとに1つの合成を作成し、後からクロップしないようにします。

プラットフォーム	アスペクト比	サイズ
X / LinkedIn フィード	16:9	1920×1080（または1280×720のマスターをレンダリング）
X 縦型、Reels、Shorts、TikTok	9:16	1080×1920
LinkedIn / Instagram フィード	1:1 または 4:5	1080×1080 / 1080×1350

npx remotion render LaunchVideo out/launch-1080.mp4 --scale=1.5 で、1280×720のマスターを1920×1080にアップスケールします（シーンのレイアウトを変更する必要はありません）。

苦労して得た教訓

製品のUIラベルを決して発明しないでください。 実際のアプリをスクリーンショットし、そのコピーを反映させてください。
エンドカードには1つの見出しと1つのCTAだけを使用してください。 ランディングページの実際のタグラインを使用してください。
フックは、説明なしで視聴者が認識できるものに基づいてください。 説明に一文必要な場合、そのフックは抽象的すぎます。
Before/Afterのビートは同時に行わないでください。 「Before」を約1秒間表示し、その後「After」にカットしてください。
Imgcliシーン内で独自のフェードを使用してシーンを接着しないでください。 トランジションは TransitionSeries に属します。シーンごとの出口フェードは二重フェードになります。
独自の追加要素は控えめにしてください。 文の先頭のみ大文字、装飾的な文字間隔なし、グローやグラデーションテキストなし。グローを伴うImgcliシーン（announce-title）はそのままにします。それはエフェクトであり、装飾ではありません。

クレジット

ワークフロー構造（入力 → ストーリーボード → 構築 → レンダリング監査 → マルチ批評家レビュー → プラットフォームテーブル）と、いくつかの苦労して得た教訓は、everyinc/product-launch-video（MIT、© 2026 Every Media, Inc.）を参考にしています。コンタクトシート監査と「ルックをデザインする前にカタログを検索する」ルールは、HeyGen の hyperframes product-launch-video スキル（Apache-2.0）を参考にしています。両方とも Remotion と snapcn コンポーネント用に書き直されています。snapcn固有のコンテンツはすべて snapcn 独自のものです。

remotion-launch-video