6space7/autozoom-demo-scenes

AutoZoom デモ動画

あなたはユーザーのプロジェクト内にいます。機能の実際のコードを読み、その画面を Remotion プロジェクト内の React コンポーネントとして再構築し、AutoZoom がスクリーンレコードを撮影するようにフィルムします。カメラは各アクションに自動的にズームします。コードで構築された画面はスクリーンショットより優れています。テキストは実際の入力フィールドにタイプされ、行はスライドインし、ボタンは状態を変化させ、ズームしてもすべてが鮮明です。

このスキルに含まれるファイル:

• scripts/setup.mjs は Remotion プロジェクトを作成し、インストールします（Remotion + React）。
• assets/remotion-template/ はコピー元のテンプレートです。オートズームカメラ、ウィンドウ、カーソル、スポットライト、オーバーレイ、およびサンプル画面とストーリーが含まれます。デモごとに変更するのは src/story.tsx と src/screens/* のみです。
• references/story-api.md はすべてのストリーフィールド、画面フック、および位置の測定方法を文書化しています。ストーリーを書く前に読んでください。
• references/style.md は AutoZoom の外観です。フレーム、モーション、オーバーレイのルールを定義しています。

ワークフロー

1. ストーリーを確定する

視聴者が学ぶべきことを一文にまとめます（例：「任意の指標を検索し、ワンクリックで共有する」）。動画は 6～15 秒 に抑え、2～4 つのビート に分けます。1 つの動画に 1 つのアイデアのみ。2 つの機能がある場合は、2 つの動画を作成します。表示する機能が不明確な場合にのみ質問し、それ以外は最も印象的なフローを選びます。

2. プロジェクトを読む

デモで表示するものを特定します:

• ルート、ページ、またはコンポーネントとその子要素;
• デザイントークン: Tailwind 設定、CSS 変数、テーマファイル;
• フォント、アイコンライブラリ、ロゴ;
• 現実的なサンプルデータ: フィクスチャ、シード、Storybook ストーリー、モック、テスト。

異なる外観を決して発明しないでください。デモは ユーザーのプロダクト のように見えなければなりません。

3. Remotion をセットアップする

node <skill-dir>/scripts/setup.mjs demo     # ./demo を作成し、インストールする

再実行しても安全です。demo/ をプロジェクトのワークスペースに追加するか、スタンドアロンのままにします。

4. 画面を構築する (demo/src/screens/<Name>.tsx)

ストーリーのビューポート（デフォルト 1440 × 900、ブラウザウィンドウのようなサイズ）で描画します。プロジェクトに合ったルートを選択します:

• A. 実際のコンポーネントをインポートする（React プロジェクト）。 最高の忠実度。コンポーネントがプレゼンテーショナルな場合に機能します。静的な props とデータを渡し、必要なプロバイダー（テーマ、ルーター、クエリクライアント、i18n）をスタブ値でラップします。ネットワークからフェッチしたり、認証を読んだりしないでください。エイリアスが解決され、スタイルが読み込まれるようにします。references/story-api.md › 「プロジェクト自身のコンポーネントを使用する」 を参照。
• B. 再構築する（任意のスタック: Svelte、Vue、Angular、ネイティブ、または重いランタイム依存関係を持つ React）。 同じ構造、クラス名または値、色、半径、間隔、フォント、アイコン、コピーをソースから直接読み取り、画面を React に移植します。画面上に見えるものだけを含めます。

どちらの場合も:

• プロジェクトからの現実的なデータ（名前、数値、ステータス）を使用し、決して Lorem Ipsum は使いません。
• ストーリーがターゲットとする要素に既知の位置を与えます。レイアウトしてボックスを明示できるようにするか、デバッググリッド（ステップ 6）で測定できるようにします。
• 画面は src/lib/hooks.ts のフック（useTyped、useAfter、useProgress、usePop、useCount）を使ってアニメーションするようにします。フレーム番号をストーリーから props として渡し、タイムラインが一箇所に集中するようにします。src/screens/MockDashboard.tsx が実例です。

5. ストーリーを書く (demo/src/story.tsx)

まずタイムラインをコメントとして、フレーム単位（fps 60）で記述します:

0–60     overview; cursor heads to search, clicks (58)
60–130   camera zooms onto search
140–260  query types itself; caption 1
268      ↵; results update
280–345  camera pulls back to the result
...      camera + cursor travel → click → result → toast; caption 2
520–600  camera eases back out

次に、camera、cursor、clicks、keys、captions、toasts、spotlights をすべて画面ピクセル単位で埋めます。rec はオフのままにしておきます。オーバーレイ（隅に配置）はズーム時にもアプリの上に重なります。フィールドリファレンスは references/story-api.md にあります。

6. スチルを確認し、レンダリングする

cd demo
npx remotion still Demo out/f.png --frame=150    # キーフレームを確認（PNG を読む）
npm run studio                                   # ユーザー向けライブプレビュー
npm run render                                   # → out/demo.mp4

ストーリーで debug: true を設定すると、画面上にラベル付き 100px グリッドが描画され、スチルから位置を読み取ることができます。レンダリング前にオフにしてください。各ビートでスチルを確認します。ズーム時に被写体が完全にフレーム内にあること、カーソルの先端がターゲット上にあること、テキストが読めること、オーバーレイがアクションを覆っていないことを確認します。

7. 引き渡す

ユーザーに MP4 のパスを渡し、1～2 フレームを表示します。オプションで、@remotion/player を使用してライブコンポジションをサイトに埋め込むこともできます（references/story-api.md を参照）。

モーションルール（AutoZoom のフィーリング）

• オートズームカメラ: ウィンドウ全体（1×）か、明確なクローズアップ（1.6～2.2×）のどちらか。その中間（1.1～1.5×）はウィンドウを切り取るだけで、壊れたように見えるので避けてください。重要なものにズームし、ホールドし、次のものに直接移動し、最後に 1× に戻します。移動には 60～100 フレームかかり、ホールドは最低 50 フレーム続けます。移動には ease: 'smooth'（デフォルト）を使用し、'snap' は素早い到着のみに使用します。モーションブラーは使用しません。
• カーソル: 最初に到着し、次にクリック（押し込み＋リップル、clicks の各フレームで自動的に発生）、その 2～6 フレーム後に結果が表示されます。タイピング中は、テキストを覆わないようにカーソルを少し横に移動します。
• ビートの順序: カメラが動き始める → カーソルが到着する → クリック → 状態変化 → トーストまたはキーキャップ → キャプションが意味を伝える。
• キャプション: プレゼンターが言うであろう内容で、1 行 3～6 単語、動画全体で最大 2 行。
• オーバーレイ（キャプション、キーキャップ、トースト、REC）はカメラの外側に配置します。ズームされず、アクションを覆いません。
• 制限: アクセントカラーは 1 色のみ。紙吹雪、回転、跳ねるテキストは使用しません。製品が主役です。

品質チェックリスト

• ユーザーのプロダクトのように見える：同じフォント、色、コピー、データ。
• story.tsx の先頭にタイムラインコメントがあり、フレーム番号は一箇所から来ている。
• すべてのビートをスチルで確認し、ズーム時やオーバーレイで重要な部分がクリップされていない。
• カーソルがターゲットに正確に着地し、クリックは結果の前に来る。
• テキストが 1080p で読みやすく、キャプションは短い。
• debug がオフになっており、レンダリングがエラーなく完了する。