tcut × Remotion — 実際のターミナル映像を使ったローンチ動画

tcut はピクセルパーフェクトなターミナルクリップを生成し、Remotion は React でスプリング、タイポグラフィ、レイアウトを使ってそれらを合成します。両方を組み合わせることで、ターミナル映像が本物で、再現可能、かつ再レンダリング可能な、フルモーションデザインのローンチ動画が作成できます。

まず両方のスキルをインストールします: npx skills add AmanVarshney01/tcut remotion-dev/skills

パイプライン

tcut で録画（tcut スキルを参照）。Remotion で使うクリップの場合:
- fps: 30 — Remotion のコンポジションに合わせる。margin: 0, borderRadius: 0 とし、カード（角丸、シャドウ）は React で描画させる。windowBar: "colorful" を維持 — 信号機の色が「本物のターミナル」に見える
- 1920×1080 コンポジションの場合、--font-size 30 で録画（80 カラムで約 1480 px 幅）し、クリップが拡大されないようにする
- maxPause: "1s" でクリップをタイトに保つ。keys: true は、視聴者がキーストロークを見る必要がある場合のみ追加
- MP4（H.264）で出力 — Remotion の <OffthreadVideo> がフレーム単位で正確に読み取る
- 各ステップの前に t.chapter("名前") を挿入: チャプター情報が MP4 に埋め込まれ、ffprobe -show_chapters -print_format json clip.mp4 で正確なタイムスタンプを取得できる。これをオーバーレイの同期（例：実行中のスクリプト行をハイライト — 「コード→動画」の最も強力なショット）に使う
- 1つのキャストを複数のテーマで再レンダリング — tcut render hero.cast --theme nord -o themes/nord.mp4 のようにして、フレームごとに <OffthreadVideo src> を切り替える: 同じタイムラインでテーマがライブ切り替えする
Remotion をスキャフォールド: bun create video（blank を選択）、または remotion、@remotion/cli、react、react-dom を registerRoot を持つプロジェクトに追加
合成: tcut の MP4 を public/ にコピーし、次のようにフレームに配置:

import { AbsoluteFill, OffthreadVideo, staticFile, spring, useCurrentFrame, useVideoConfig } from "remotion";

const Clip: React.FC<{ src: string; caption: string }> = ({ src, caption }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const enter = spring({ frame, fps, config: { damping: 200 } });
  return (
    <AbsoluteFill style={{ background: "#11111b", justifyContent: "center", alignItems: "center" }}>
      <div style={{ transform: `scale(${0.92 + 0.08 * enter})`, borderRadius: 16, overflow: "hidden", boxShadow: "0 30px 80px rgba(0,0,0,.6)" }}>
        <OffthreadVideo src={staticFile(src)} style={{ width: 1060 }} muted />
      </div>
      <h2 style={{ color: "#cdd6f4", fontFamily: "ui-monospace, monospace", fontSize: 38, marginTop: 26, opacity: enter }}>{caption}</h2>
    </AbsoluteFill>
  );
};

シーンを <Sequence from={...} durationInFrames={...}> で並べる。シーンの長さは各クリップの実際の再生時間に合わせる（ffprobe -show_entries format=duration）。startFrom/endAt（フレーム単位）でトリミングする。

margin が埋め込まれたクリップは、overflow: hidden のカード内でビデオを videoW / (videoW - 2 * margin) 倍に拡大することでクロップできる。

レンダリング: bunx remotion render <CompositionId> out/promo.mp4 --crf 15 --image-format png で高品質なマスターを出力（PNG 中間ファイル、ほぼロスレスの H.264）。コンポジションの fps を tcut クリップに合わせてリサンプリングを防ぐ。レイアウト確認は bunx remotion still <Id> still.png --frame N でシーンごとの 1 フレームを確認。
Web ページとしても配信（オプション）: 同じコンポジションを @remotion/player でブラウザ上でライブ実行 — <Player component={Promo} durationInFrames fps compositionWidth={1920} compositionHeight={1080} controls autoPlay loop initiallyMuted acknowledgeRemotionLicense style={{ width: "100%" }} />。<OffthreadVideo> は Player 内では自動的に <Video> にフォールバック。クリップの URL は 1 つのヘルパー（staticFile(ASSET_BASE + path)）で管理し、プロジェクトとサイトで異なるフォルダを指せるようにする。クリップをサイトの public/ にコピーし、同じフォント（例：@fontsource-variable/jetbrains-mono）を読み込む。タイトルは実際の DOM テキストになり、動画全体をスクラブ可能。tcut.amanv.dev/promo がその例。

プロフェッショナルに見せるデザインノート

ターミナルクリップはテキストを鮮明に保つ: 100% 以上に拡大しない。代わりにフレーム付きのカード内で 85〜95% 程度に少し縮小
ターミナルテーマのパレット（例：背景 #0b0b12、文字色 #e8e8f2）でフラットでベタな背景を使用。ウィンドウカードにシャドウで奥行きを持たせる。グラデーション、グロー、ドットグリッドは避ける — 鮮明なターミナルテキストと競合する
タイトルカード: 等幅フォントでタイプオンする見出し（フレームごとに文字列をスライス）は「ターミナルネイティブ」に読める
エンドカード: コピーペースト可能なブロックで表示されるインストールコマンドはロゴよりも効果的
シーンごとに 1 つのアイデア、大きな等幅見出しとその処理を行う tcut API の 1 行。クリップ内で何かが現れた瞬間にカットする。機能ツアーは約 70 秒、SNS カットは 30 秒以内に抑える

この組み合わせの利点

ターミナル映像はビルド成果物であり、画面キャプチャではない。tcut のスクリプトやテーマを変更し、再実行し、プロモーションを bunx remotion render で再レンダリングする — 完全に再現可能なローンチ動画パイプラインを TypeScript でエンドツーエンドで実現。

AmanVarshney01/tcut

tcut とは？

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

ドキュメント

tcut × Remotion — 実際のターミナル映像を使ったローンチ動画

パイプライン

プロフェッショナルに見せるデザインノート

この組み合わせの利点

Individual skills in this repo