term-repro — ターミナル動画ジェネレーター

スクリプト

YAML 形式で編集可能

プレビュー

出力形式

サンプル

Hello World（最小構成）

cols: 60
rows: 12
fps: 15
events:
  - type: prompt
    text: "user@host:~$ "
  - type: write
    text: "echo 'Hello, World!'"
    ms: 80
  - type: pause
    ms: 300
  - type: output
    text: "Hello, World!\n"
  - type: prompt
    text: "user@host:~$ "
  - type: pause
    ms: 1000

Git ワークフロー

cols: 80
rows: 20
fps: 15
events:
  - type: prompt
    text: "user@repo:~/project$ "
  - type: write
    text: "git add ."
    ms: 80
  - type: pause
    ms: 200
  - type: prompt
    text: "user@repo:~/project$ "
  - type: write
    text: "git commit -m 'feat: add feature'"
    ms: 60
  - type: pause
    ms: 200
  - type: output
    text: |
      [main a1b2c3d] feat: add feature
       3 files changed, 42 insertions(+)
  - type: prompt
    text: "user@repo:~/project$ "
  - type: write
    text: "git push origin main"
    ms: 70
  - type: pause
    ms: 400
  - type: output
    text: |
      Enumerating objects: 7, done.
      To github.com:user/project.git
         a1b2c3d..e4f5g6h  main -> main
  - type: prompt
    text: "user@repo:~/project$ "
  - type: pause
    ms: 1000

npm ビルド

cols: 80
rows: 18
fps: 15
events:
  - type: prompt
    text: "user@host:~/app$ "
  - type: write
    text: "npm run build"
    ms: 80
  - type: pause
    ms: 600
  - type: output
    text: |
      > app@1.0.0 build
      > tsc && vite build

      vite v5.0.0 building for production...
      ✓ 12 modules transformed.
      dist/index.html          0.46 kB
      dist/assets/index.js   142.32 kB
      ✓ built in 1.24s
  - type: prompt
    text: "user@host:~/app$ "
  - type: pause
    ms: 1000

リファレンス

トップレベルプロパティ

プロパティ	型	必須	説明
cols	integer	✓	ターミナルの列数（文字幅）。標準は 80
rows	integer	✓	ターミナルの行数。標準は 24
fps	number	✓	録画フレームレート。WebM は 15〜30、GIF は 10〜15 が目安
events	Event[]	✓	イベントの配列。上から順に実行される

イベント一覧

type	text	ms	説明・用途
prompt	表示文字列	—	プロンプト文字列を即時表示。`"user@host:~$ "` のように末尾スペースを忘れずに
write	入力テキスト	文字間隔 (ms) 省略時: 80	1 文字ずつ ms 間隔で書き込む。タイピング演出に使用。末尾に自動で改行 `\r\n` が挿入される
output	出力テキスト	—	コマンド出力を即時表示。`\n` は自動で `\r\n` に変換。YAML ブロックスカラー（`\|`）が便利
pause	—	待機時間 (ms) 省略時: 0	指定ミリ秒だけ待機。コマンド実行後の間合いやカーソル停止演出に使用
clear	—	—	ターミナルをクリア（`clear` コマンド相当）。スクロールバックも削除される

ヒント

▸YAML ブロックスカラー（text: |）を使うと複数行の出力を自然に書ける。末尾の改行が自動付与される
▸write の ms を 40〜60 にするとタイプが速く見える。120 以上でゆっくりになる
▸プロンプト → write → pause → output の 4 ステップで 1 コマンド実行の流れを表現できる
▸GIF 出力 は fps を 10〜12 にするとサイズと滑らかさのバランスが良い。fps を上げるとファイルサイズが増加する
▸cols / rows を実際の録画サイズに合わせると文字が折り返さず見やすくなる