1仕組みと動作原理
中心命題：画面録画特有のカーソルのブレや1箇所の変更に伴う再録の手間といった構造的課題を解決するため、静止画スクリーンショット＋コードアニメーションで画面録画を代替する。
skills/product-demo-video/SKILL.md
| Real cursor drifts, overshoots, jitters | Cursor follows an eased path to an exact target |
比較表ではエンジニアリング的な再現性を最大のセールスポイントとしています。
入力は必ず2×（DPR 2）でキャプチャし、2×ズーム時でも解像度を損なわないようにする。
skills/product-demo-video/SKILL.md
Capture inputs at twice the display size (retina / `deviceScaleFactor: 2`) so a 2× zoom stays sharp.
referenceでは、カーソルやCookieバナーを非表示にし、クリックごとの最終状態のみをキャプチャすることを推奨しています。
カーソルにはsmoothstepイージング（非線形）を使用し、波紋エフェクトと画面の状態変化は全く同一のclickAtフレームで発生させる。
skills/product-demo-video/SKILL.md
The cursor uses **smoothstep** so it accelerates out of rest and decelerates into the target (a linear cursor reads as robotic). Fire the ripple *and* the screen's state change on the same `clickAt` frame so cause and effect line up.
「因果の同フレーム化」が、クリックをリアルに見せるための鍵です。
フォーカス部へのズームはtransform-originで対象ピクセルを指定し、上限約2×で2〜4秒間維持した後に元の縮尺へ戻す。
skills/product-demo-video/SKILL.md
Cap zoom around 2× (over 3× loses context and disorients). Hold the zoomed state 2–4s — long enough to read the detail — then ease back out before moving to the next screen.
referenceではeaseOutCubicを採用し、クリック後6フレームで開始して30フレームで完了します。
同一瞬間に許容されるモーションは1種類のみ：カメラワーク（zoom）か、カーソルの移動かのいずれか。
skills/product-demo-video/SKILL.md
Move the camera *or* the cursor, rarely both at once — two simultaneous motions split attention.
今回の複数スキルに共通する「視線誘導・注意の規律」に準拠しています。
すべての画面をbrowser/deviceの外枠コンポーネントに収め、実在するURLを入力する。そうしないとスクリーンショットがバグ報告のように見えてしまう。
skills/product-demo-video/SKILL.md
A raw screenshot reads as a bug report; a framed one reads as product. Wrap every screen in a browser or device chrome on a branded background.
referenceのBrowserFrame/PhoneFrameでは、アドレスバーに実際のパスを入力します。
座標ワークフローを厳格化：すべてのカーソル／ズーム対象はdisplay space（2×画像から取得した値は2で除算）で計測する。
skills/product-demo-video/references/screenshot-demo.md
Because the cursor `to` and the zoom target are screen-pixel coordinates, measure them once against the screenshot at display size (1280×800 here, even though the PNG is 2560×1600).
「ピクセルの計測方法」を明確化し、頻発するorigin空間の不一致を防ぎます。
検証サイクルの焦点は「正しい画像が読み込まれているか、カーソルが正確に対象ピクセル上に位置しているか」。
skills/product-demo-video/SKILL.md
The demo ingests user assets — screenshots/designs, optional logo — so verification is mostly *did the right image actually load and land in frame*.
チェックリストは忠実性（fidelity）とアーティファクト（境界逸脱、拡大による粗、キャプションのはみ出し）の双方を網羅しています。
注記レイヤーはハードコードではなくデータ駆動：スポットライト、矢印コールアウト、typed captionトラック、4種類の画面間トランジションをすべてフレーム単位で制御。
skills/product-demo-video/references/annotation-and-transitions.md
const captions = [ { text: "Open any report", in: 30, out: 110 },
コールアウトは1回につき1つのみ、キャプションは完全な文ではなく名詞句とする規律も定めています。
2コア機能
01browser / phone 外枠コンポーネント（実際のURL表示と統一テーマに対応）
02フレーム駆動のカーソル＋クリック波紋（smoothstep移動、press縮小、波紋のspring拡散）
03zoom-to-region（transform-originによる対象ピクセル指定＋easeOutCubic）
04スポットライトマスクによるハイライト（box-shadow 9999pxによる切り抜き）
05typed captionトラック（データ配列として管理され、フレーム範囲でイン／アウト）
06テンポの規律：ステップ数のみを削減し、settleとreadの静止・読了時間を削らない
074種類の画面間トランジション（push / cross-zoom / crossfade / match-cut）とその選定基準
08マルチアスペクト比対応（16:9マスター＋9:16リフレーム。カーソルターゲットは中央80%以内に配置）
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| package | remotion（AbsoluteFill/Sequence/Img/staticFile/useCurrentFrame/interpolate/spring） |
| package | playwright（含首次下载 Chromium 二进制） |
| network | 用户目标应用 URL（抓图时由无头浏览器访问；示例为占位域名） |
| cli | npx remotion still / render（首帧预览与编码） |
| cli | ffmpeg / ffprobe（仓库共享 contact-sheet.sh、probe-mp4.sh） |
| network | iart.ai（reference 尾部推广链接，具 utm 参数；仅读者点击才请求） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: スキルディレクトリ内に独自の同梱スクリプトはなし。reference内でエージェントに `node capture.mjs` の実行を指示（Playwrightによる画像キャプチャ、ソースコードはドキュメント内に記載）
- 网络端点: 外部ネットワークアクセスの宣言: キャプチャ段階：ヘッドレスChromiumが**ユーザーから提供されたアプリのURL**（例: app.example.com などのプレースホルダー）にアクセス。これがスキル経路内で唯一のネットワーク通信
- 本地工作目录: ファイルの読み書きと成果物の出力: ユーザープロジェクト内に `public/shots/*.png`（キャプチャ成果物）、`out/f-settle.png`/`out/f-click.png`/`ou...` などを書き込み
監査ノート： 。トリガー条件は分類基準「サードパーティのプラグイン、ミラー、リモートパッケージへの依存」：提供パスとして remotion（npm）および playwright（npm + Chromiumバイナリのダウンロード）を要求し、キャプチャ段階でヘッドレスブラウザがユーザー対象の実オリジンにアクセスします。同一リポジトリの `remotion-video` と同様の基準でOrange（警告）と判定されており、これと整合しています。**明確に非該当な項目**：process.env / APIキー / トークン / Cookie / キーチェーンの読み取りはなし（トークンスキャンで実質的なヒットはゼロ、reference内の唯一の「cookie」という語句はCookieバナーを非表示にするCSS）；素材をいかなる外部生成サービスにもアップロードしない（キャプチャとレンダリングはローカルで完結）；TLSのダウングレードなし、`--no-verify` なし、サンドボックス無効化なし、AutomationControlled のような自動化検知回避なし（標準的なPlaywrightキャプチャのみ）。トリガー条件：キャプチャおよびレンダリング時にのみ発生。ユーザーが保存済みの独自のスクリーンショットを使用する場合は、完全にネットワーク非接続で実行可能。
5二重目の独立検証
- [discrepancy] 抓图脚本的目标 URL 是否可直接使用 — reference 的 SHOTS 列表硬编码 https://app.example.com/dashboard 等占位 URL（含 /reports/42?export=open 这类路径），原样运行必然失败；SKILL.md 未提示必须先替换成真实或本地 URL。
- [discrepancy] Callout 组件的可渲染性 — annotation-and-transitions.md 的 Callout 把 HTML div 包在 SVG 元素 g 里（g 只在 SVG 上下文有效），作为 React 组件直接放入 HTML 层会得到无效结构；该片段需改写才能用。
- [ok] 光标/涟漪与 clickAt 的因果同步是否有实现支撑 — screenshot-demo.md 的 Cursor 用 since = frame - clickAt 同时驱动 ripple 与 press 缩放，并把「ripple 与状态变化不同帧」列入失败模式，与 SKILL.md 的因果同帧要求一致。
- [ok] 2× 抓取与 ≤2× 缩放口径 — SD 的 deviceScaleFactor: 2（→2560×1600）与 SKILL.md/reference 的 zoom scale 2（个别 1.8）自洽。
- [ok] 多比例安全区口径 — AT 的 16:9/9:16 表（caption 在下方 80–120px；9:16 保留中心 80% 宽、避开底部 18%）与 SKILL.md 的 Keep captions in the lower third 一致。
- [unlocatable] 需登录的目标页如何处理 — skill 未提供任何会话/凭证注入方式（无 storageState、无 cookie 导入）；「需要登录的应用怎么抓图」源码内无解答，记 unlocatable（也正因此不存在凭证读取面）。
6結論
最適な用途： SaaSやアプリのチームが製品デモ、機能告知、オンボーディング動画を制作するケース：手元に画面録画がなくスクリーンショットやデザインカンプのみが存在し、再現性があり、素材差し替え・再レンダリングが可能で、細部を美しくズーム表示できるデモ動画を必要とする場合。
不向きな用途： すでに高品質な画面録画があり再現性を必要としないケース；ログインが必要だが公開ページを用意できない対象アプリ（スキル内にセッション注入手段がないため）；実際のユーザー操作（ローディング状態などの動的コンテンツを含む）の録画を必要とするデモ。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload product-demo-video.tar.gz
sha256:
Option B · Copy Guide for Agent1e7d345b4981c5db…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 2bd0dd19c9.