snapcn で作る Remotion 製品デモ

実際のスクリーン録画を、Remotion を使った 20～45 秒の製品デモに変換します。ショットは snapcn から取得します。snapcn は、手動アニメーションに最も時間がかかるデモのパーツ（録画へのカメラプッシュイン、クリックするカーソル、デバイスフレーム、タイピングするターミナル、送信される AI プロンプト）を提供する Remotion コンポーネント群です。shadcn CLI でインストールでき、あなたが所有するコードとしてプロジェクトに配置されます。

なぜ snapcn なのか？手書きアニメーションではない理由。 手作りのデモモーションは、AI 生成動画の粗が露呈する部分です。一定速度でスライドするカーソル、永遠にイージングし続けるズーム、一度にすべてを表示するターミナル。snapcn コンポーネントは、実際の製品デモに照らして 1 フレームごとに調整されています。あなたの仕事は、コンポーネントを選択し、プロパティを設定することです。

snapcn のルール

各ビートは、適切なコンポーネントがない場合を除き、snapcn コンポーネントを使用します。 ショットに interpolate() や spring() を書く前に、https://snapcn.dev/llms-components.txt?ref=skill-demo を確認してください（インストール可能な全コンポーネント、その用途、実行フレーム数が記載されています）。コンポーネントのページは .md を追加するとマークダウンで表示されます。例：https://snapcn.dev/docs/screens/screen-recording.md?ref=skill-demo。
コンポーネント名をでっち上げないでください。 @snapcn/<name> は、上記リストに存在する名前に対してのみ解決されます。適切なものがなければ、その旨を明記してください。
プロパティを設定し、コンポーネントを書き換えないでください。 コピー、色、録画、カーソルパスはプロパティを通じて指定します。

完全なカタログと構成ルールについては、包括スキルもインストールしてください：npx skills add snapcndev/snapcn --skill snapcn。

録画が真実の情報源です

プレートとして実際の録画またはスクリーンショットを使用します。 UI を JSX で再構築する代わりに、その上でカメラをアニメーション化します（screen-recording の camera 移動を使用）。単独で動かす必要がある要素のみを再構築します。
UI ラベル、数値、機能をでっち上げないでください。 画面上のすべての文字列は実際の製品からのものです。でっち上げたラベルは、デモが偽物に感じられる最も一般的な理由です。
録画がないですか？ 録画またはスクリーンショットを依頼してください。偽のダッシュボードを描かないでください。

前提条件

Remotion プロジェクト（npx create-video@latest）。キャンバスは 1280×720、30fps。
shadcn CLI（components.json がない場合は npx shadcn@latest init）。
npm i @remotion/transitions。
録画ファイルは public/ ディレクトリに配置し（例：public/recording.mp4）、staticFile() で読み込みます。

ワークフロー

1. 重要な瞬間を見つける

録画を見て、この製品だけが実行できるアクションを 1 つ特定します。つまり、重要なクリックです。その瞬間にカメラプッシュと最も長い表示時間を割り当てます。デモ内の他のすべては、この瞬間を設定するためのものです。

2. ストーリーボード：ビートごとに 1 つの snapcn コンポーネント

ビート	snapcn コンポーネント	フレーム数	使用目的
インストール/セットアップ	`terminal-simulator`	200	開発者が実際に入力するコマンドとその実際の出力
デバイス上の製品	`laptop-frame`, `phone-frame`	240 / 240	録画を MacBook または iPhone に配置し、開いてズームイン
主要なアクション	`cursor-track` で `screen-recording` をラップ	132 / 139	カーソルが移動してクリックし、同時にカメラが録画にプッシュイン
AI 製品	`prompt-send`, `answer-stream`, `search-typing`	165 / 150 / 420	プロンプトの入力と送信、応答のストリーミング表示
結果	`status-cycle`, `count-grid`	198 / 47	状態変化（"queued → live"）または実際の数値
エンドカード	`block-wordmark`, `logo-flicker`	150 / 100	製品名

各シーケンスをコンポーネントの自然な長さ（フレーム数列）に合わせて予算化します。予算を下回るとショットが切れ、上回ると無駄な時間が生まれます。

3. インストール

npx shadcn@latest add @snapcn/terminal-simulator @snapcn/laptop-frame @snapcn/cursor-track @snapcn/screen-recording @snapcn/status-cycle @snapcn/block-wordmark

4. 構成

以下のコンポジションは、このままタイプチェックされ、レンダリングされます（public/recording.mp4 が存在する場合）。

import { fade } from "@remotion/transitions/fade";
import { slide } from "@remotion/transitions/slide";
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { staticFile } from "remotion";
import { BlockWordmark } from "@/components/snap-cn/block-wordmark";
import { CursorTrack } from "@/components/snap-cn/cursor-track";
import { LaptopFrame } from "@/components/snap-cn/laptop-frame";
import { ScreenRecording } from "@/components/snap-cn/screen-recording";
import { StatusCycle } from "@/components/snap-cn/status-cycle";
import { TerminalSimulator } from "@/components/snap-cn/terminal-simulator";

// 実際の録画を public/ に配置します。その UI コピーがスクリプトです — ラベルをでっち上げないでください。
const RECORDING = staticFile("recording.mp4");
const T = linearTiming({ durationInFrames: 12 });

export const ProductDemo: React.FC = () => (
  <TransitionSeries>
    {/* 1. インストール：開発者が実際に入力するコマンド */}
    <TransitionSeries.Sequence durationInFrames={200}>
      <TerminalSimulator
        intro="Set up *Acme* in one command"
        command={{ text: "npx acme init" }}
        lines={[
          { text: "npx acme init", type: "command" },
          { text: "Connecting your Stripe account...", type: "log" },
          { text: "Ready. 1,204 invoices imported.", type: "success" },
        ]}
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 2. デバイス上の製品 */}
    <TransitionSeries.Sequence durationInFrames={240}>
      <LaptopFrame screenSrc={RECORDING} entrance="open" finale="zoom-to-screen" />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={slide()} timing={T} />

    {/* 3. この製品だけが実行できるアクション：カーソルクリック、カメラプッシュイン */}
    <TransitionSeries.Sequence durationInFrames={132}>
      <CursorTrack
        path={[
          { at: 0, x: -0.06, y: 0.86, duration: 6 },
          { at: 8, x: 0.34, y: 0.44, duration: 22, click: true },
          { at: 60, x: 0.68, y: 0.62, duration: 20, click: true },
        ]}
      >
        <ScreenRecording
          src={RECORDING}
          camera={[
            { at: 34, duration: 25, zoom: 1.6, x: 0.36, y: 0.42 },
            { at: 96, duration: 25, zoom: 1 },
          ]}
        />
      </CursorTrack>
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 4. 結果：状態変化 */}
    <TransitionSeries.Sequence durationInFrames={198}>
      <StatusCycle
        prefix="Your books are"
        statuses={["syncing", "matching", "reconciled"]}
        chips={["Stripe", "QuickBooks", "Xero"]}
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 5. エンドカード */}
    <TransitionSeries.Sequence durationInFrames={150}>
      <BlockWordmark text="acme" />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

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

ショットの狙い方：

cursor-track のパス はフレームに対する比率で指定します（x, y は 0 から 1）。at はカーソルがそのポイントに向かって移動を開始するフレームです。click: true は到着時にクリックリングを発火します。各クリックを録画内の実際のボタンに正確に配置します。
screen-recording のカメラ移動（{ at, duration, zoom, x, y }）は、あるポーズにイージングし、次の移動までホールドします。主要なアクションにプッシュイン（zoom: 1.4–1.8）し、アクションが完了したら引き戻します（zoom: 1）。
ブラウザのクロームをトリミングするには、録画にクロームが含まれている場合、crop={{ top: 0.11 }} を使用します。
terminal-simulator の lines は { text, type } で、type には command、log、success、error を指定します。実際の出力を短くして貼り付けます。

5. レンダリング監査

npx remotion still ProductDemo out/click.png --frame=460
npx remotion render ProductDemo out/demo.mp4 --codec=h264 --crf=18

各ビートの中間点、および各カットの直前と直後の静止画をレンダリングし、以下を確認します。

各クリックが実際のボタンに正確に当たっており、その横ではないこと。
録画内のテキストがプッシュイン後、720p で読みやすいこと。読みにくい場合は、さらにプッシュインするか、トリミングを厳しくします。
カット部分に黒フレームがなく、シーン開始前に何も表示されていないこと。

6. 公開

アスペクト比ごとに 1 つのコンポジションをレンダリングします。16:9 は X と LinkedIn 用、9:16（phone-frame を使用）は Reels、Shorts、TikTok 用です。--scale=1.5 で 1280×720 のマスターを 1920×1080 に変換します。

snapcn Pro：最もよく求められるデモショット

50 の Pro シーン デモ用。tap-through（CTA での電話タップ）、checkout-push（支払いの処理）、prompt-dive（プロンプト送信と送信ボタンへのダイブ）、build-out（送信ボタンからアプリを構築）、vault-count（残高のカウントアップ）、screen-wall（電話のトンネル）などがあります。
snapcn MCP：あなたのエージェントがプレーンテキストでレジストリを検索し、実際のプロパティを読み取り、1 行の概要からデモ全体を計画します。claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY

Pro コンポーネントは、components.json があなたのキーを送信すると、無料のものと同じようにインストールできます（3 行の設定は https://snapcn.dev/account?ref=skill-demo にあります）。料金プラン：https://snapcn.dev/docs/pricing?ref=skill-demo

Pro の準備はまだですか？1 つの Pro コンポーネント「Manifesto」は、確認済みメールアドレスで無料です：https://snapcn.dev/docs/pricing?ref=skill-demo#free

帰属

「UI ラベルをでっち上げない」ルール、レンダリング監査ループ、プラットフォームガイダンスは、everyinc/product-launch-video（MIT ライセンス、© 2026 Every Media, Inc.）から改変されています。「録画が真実の情報源」は、HeyGen の hyperframes product-launch-video スキル（Apache-2.0 ライセンス）から改変されています。どちらも Remotion と snapcn コンポーネント用に書き直されました。THIRD_PARTY_NOTICES.md を参照してください。

snapcndev/snapcn

snapcn とは？

お気に入りのAIに質問する

ドキュメント