reel

Reelは、Webアプリケーションやコマンドラインインターフェースのための「デモ-as-code」を生成するオープンソースツールです。小さなYAML仕様ファイルが実際のアプリケーション（ChromiumブラウザでのPlaywright経由、またはリアルなターミナル）を制御し、実際に起こったことを記録します。その記録された映像は、常に最新のGIF、MP4、WebMファイル、PNGストーリーボード、そしてHyperFramesによって動作するインタラクティブなHTMLコンポジションにレンダリングされます。 このワークフローは仕様ファイルを中心に構成されており、それを書き込むかキャプチャし、`reel check`で各ステップがまだ機能しているか確認した後、`reel shoot`で映像を生成します。`reel compose`でHyperFramesプロジェクトをスキャフォールディングし、作成者はシーンの説明を入力してレンダリングを行います。 主な機能には以下のものがあります： - **キャプチャモード**：手動でアプリを操作し、Reelが安定したアクセシビリティベースのセレクターを含む仕様を自動的に記録します。 - **シーン文法**：タイトルカード、コールアウト、ハイライト、トランジション、図表（Mermaid）、ズーム、スクロール、ドラッグジェスチャーなどを、生の録画ではなく方向付きのシーケンスとして構造化します。 - **配信プリセット**：README、ソーシャルメディア、ドキュメント、高品質共有用に最適化された出力形式を提供します。 - **音声**：ElevenLabsやOpenAIによるオプションのナレーション、合成音響効果、バックグラウンド音楽（ボイス同期付き）をサポートします。 - **字幕とローカライズ**：言語ごとのLLM翻訳バージョンを持つサイドカーファイル（SRT/VTT）を提供します。 - **認証処理**：オフカメラで一度だけサインインし、保存されたPlaywrightセッションを使用して認証を維持します。パスワードを仕様に露出することなく再現できます。 - **決定論的動作**：クロックを停止し、アニメーションを無効化し、ロケール/タイムゾーンを固定することで再現性のあるレンダリングを実現します。 - **Claude Codeプラグイン**：`/reel`および`/reel-polish`スキルを通じて自然言語でデモを構築・磨き上げられます。 - **スタジオUI**：仕様編集、ライブプレビューでの録画、AIによる作成、変更のチェックが可能なローカルNext.jsインターフェースです。 - **CI統合**：`reel check`は、デモフローが壊れた場合にパイプラインを失敗させるスモークテストとして機能します。 - **エディタサポート**：VS Code、JetBrains、Neovim向けのYAMLスキーマのオートコンプリートを提供します。 すべてはローカルで実行され、100% MITライセンスで、SaaSやホスティングは必要ありません。Node.js 22以降とTypeScriptが必要です。