snapcn で作る Remotion エクスプレイナービデオ

Remotion を使ったナレーション付き説明動画：音声がタイミングを決定し、キャプションは焼き込まれ、画面上のすべてのビートは snapcn シーンです。snapcn シーンは shadcn CLI でインストールされ、あなたが所有するコードとしてプロジェクトに追加されます。

なぜスライドの手書きではなく snapcn なのか。 ゼロから作られたナレーション動画は、結局グラデーションの上にフェードインする箇条書きになってしまいがちです。snapcn は各ビートに本格的なショットを与えます：強烈に切り込むステートメント、状態が変化するステータス、拡大する数字、デバイス上の製品。

snapcn のルール

どのビートにも合うものがない場合を除き、すべてのビートは snapcn コンポーネントにする。 カタログと長さ： https://snapcn.dev/llms-components.txt?ref=skill-explainer；任意のページをマークダウンで表示（例：https://snapcn.dev/docs/captions/word-captions.md?ref=skill-explainer）。
コンポーネント名を勝手に作らない。 上記リストにある名前のみインストール可能。
すべてのテキストプロパティを設定する。 シーンにはサンプルコピーが付属しますが、そのまま動画に残らないようにしてください。

完全なカタログを利用するには、包括的なスキルもインストールしてください： npx skills add snapcndev/snapcn --skill snapcn

ワークフロー

1. まずスクリプト

コードの前に音声ナレーションを書き、一文につき1ビートとします。150語で約1分です。

ビート	内容	snapcn シーン	フレーム
フック	視聴者の言葉で問題を提示	`punch-lines`, `type-morph`	144 / 94
仕組み	2～3のステップまたは状態	`status-cycle`, `word-flip`, `card-rail`	198 / 180 / 108
デモ	製品が動作している様子	`laptop-frame`, `phone-frame`, `screen-recording`	240 / 240 / 139
証明	ひとつの実際の数字	`count-grid`	47
締め	製品名	`wordmark-cut`, `block-wordmark`	66 / 150

2. 音声と単語タイミング

音声を収録または生成します。public/voiceover.mp3 に配置してください。
単語レベルのタイミングを { text, startMs, endMs }[] （@remotion/captions 形式）で取得します。Whisper（@remotion/install-whisper-cpp）またはTTSプロバイダーを利用します。
音声が長さを決定します。 各ビートのシーケンスをそのセンテンスに合わせて伸ばし、シーンの自然な長さ（フレーム列の値）より短くしないでください。

3. キャプション

word-captions：トランスクリプトをページ送りする焼き込みキャプション。captions を渡します。スタイルは preset で指定。aspect="9:16" で縦長動画に対応。
karaoke-captions：1つの強調引用のために、単語ごとに埋まる1行のキャプション。
キャプションはすべてのシーンの上に配置され、背後にあるシーンに対して透過的です。

4. ビルド

npx shadcn@latest add @snapcn/punch-lines @snapcn/status-cycle @snapcn/count-grid @snapcn/wordmark-cut @snapcn/word-captions

約15秒の説明動画：問題 → 仕組み → 証明 → 名前、ナレーション付き、キャプションあり。public/voiceover.mp3 と4枚のスクリーンショットがあれば、型チェックが通り、そのままレンダリングされます：

import { AbsoluteFill, Audio, Series, staticFile } from "remotion";
import { CountGrid } from "@/components/snap-cn/count-grid";
import { PunchLines } from "@/components/snap-cn/punch-lines";
import { StatusCycle } from "@/components/snap-cn/status-cycle";
import { WordCaptions } from "@/components/snap-cn/word-captions";
import { WordmarkCut } from "@/components/snap-cn/wordmark-cut";

// Whisper（または @remotion/captions）からの単語レベルタイミング：{ text, startMs, endMs }[]。
const captions = [
  { text: "Closing", startMs: 0, endMs: 400 },
  { text: "the", startMs: 400, endMs: 550 },
  { text: "books", startMs: 550, endMs: 1000 },
  { text: "takes", startMs: 1000, endMs: 1350 },
  { text: "a", startMs: 1350, endMs: 1450 },
  { text: "week.", startMs: 1450, endMs: 2100 },
];

// public/ 内の実際の製品スクリーンショット。これがない場合、シーンはsnapcnのサンプル画像にフォールバックします。
const shots = ["shot-1.jpg", "shot-2.jpg", "shot-3.jpg", "shot-4.jpg"].map((f) => staticFile(f));

// 約15秒の説明動画：問題 → 仕組み → 結果 → 名前、ナレーション付き、キャプション焼き込み。
export const Explainer: React.FC = () => (
  <AbsoluteFill>
    <Series>
      <Series.Sequence durationInFrames={144}>
        <PunchLines script="Closing the books / takes a week. | Acme / does it overnight." />
      </Series.Sequence>
      <Series.Sequence durationInFrames={198}>
        <StatusCycle
          prefix="Every invoice gets"
          statuses={["imported", "matched", "reconciled"]}
          chips={["Stripe", "QuickBooks", "Xero"]}
        />
      </Series.Sequence>
      <Series.Sequence durationInFrames={60}>
        <CountGrid from="5" to="500" noun="teams" cards={shots} />
      </Series.Sequence>
      <Series.Sequence durationInFrames={66}>
        <WordmarkCut word="acme." />
      </Series.Sequence>
    </Series>
    <WordCaptions captions={captions} />
    <Audio src={staticFile("voiceover.mp3")} />
  </AbsoluteFill>
);

durationInFrames={468}、fps={30}、width={1280}、height={720} で登録します。実際の説明動画では、各シーケンスの長さをセンテンスのタイミングから導出し、合計を音声の長さから設定します。

5. 確認とレンダリング

npx remotion still Explainer out/beat.png --frame=250
npx remotion render Explainer out/explainer.mp4 --codec=h264 --crf=18

各シーンは、そのセンテンスが話されている間、画面に表示されます。音声付きで一度確認してください。
キャプションがシーンの見出しを覆わないようにしてください。覆う場合は、シーンのコピーを移動するか、より短いキャプションページ（maxWords）を使用します。
画面上のすべてのテキストはスクリプトからのものであり、デフォルトのサンプルコピーが残っていないことを確認します。

ルール

言ってから、見せる。 シーンは音声が主張した内容を表示し、同時に別のテキストを読ませることはしない。
1ビートにつき1アイデア、各約5～8秒。
キャプションを焼き込む。 ほとんどの視聴はミュートで始まります。
実数のみ。 証明ビートのために指標を創作してはいけません。

snapcn Pro

Pro では、orbit-flow（3つのラベル付き停留所で仕組みを説明）、proof-line、hex-tally、metric-morph（数字が着地する）、read-through などの説明ビートと、テンプレート、snapcn MCP（スクリプトからビートを計画）が追加されます：claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY。Pro コンポーネントは、components.json がキーを送信するよう設定されていれば（https://snapcn.dev/account?ref=skill-explainer）、無料のものと同じようにインストールできます。料金プラン：https://snapcn.dev/docs/pricing?ref=skill-explainer

Pro の準備はまだですか？1つのProコンポーネント「Manifesto」は、メール確認済みのユーザーに無料で提供されています：https://snapcn.dev/docs/pricing?ref=skill-explainer#free

snapcndev/snapcn

snapcn とは？

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

ドキュメント