單圖運鏡講稿

場景投影片：一圖一鏡

場景投影片是一種存在於單一插圖中的演講形式。每一頁都代表同一張圖片上的一個攝影機位置。攝影機會推進到細節、沿著繪製的路徑滑行到下一個物體、跳躍到場景的另一端，最後拉回寬景做結束。文字則以螢幕空間卡片的形式呈現，並且會在攝影機到位後延遲一瞬出現，讓觀眾在閱讀之前先看見場景。

此技能是產出一個包含 22 個鏡頭、20 分鐘會議演講的方法，基於 @open-slide/core 2.2 版本。open-slide 沒有攝影機 API，因此攝影機是在頁面元件內驅動的。template/index.tsx 是完整的引擎與七個範例鏡頭；複製它並替換場景、錨點與卡片即可。

何時使用

• 演講有一個具體地點：教室、手術室、工廠車間、城市街區。該地點中的物體對應到故事的各個站點。
• 講者想要 Prezi 的感受（放大進行說明、拉遠觀看全貌、滑行到下一個地點）但不必使用 Prezi。
• 鏡頭數量在 15 到 25 個之間。更少的話一般投影片即可；更多的話攝影機動作會變成一種背景效果。

不要將其用於資料密集型投影片、即時示範，或需要他人用 PowerPoint 編輯的內容。它是一個網頁，只能在 Chrome 中播放。

工作流程（按順序）

1. 先進行故事板。 一個場景、一個站點清單、每個站點一個攝影機位置與一張卡片，以及你還需要的真實素材（螢幕截圖、日誌、照片）清單。在進行任何美術或程式碼之前先寫下來。references/storyboard.md 包含表格以及需要與講者確定的問題。
2. 製作場景。 生成三個寬景的美術風格候選，讓講者挑選，然後透過影像生成編輯（移除物件、添加故事所需的一個元素、保留螢幕空白）來修正圖片。僅在攝影機距離世界像素僅數百單位時才生成近景圖板。references/art.md
3. 使用網格測量錨點，絕不在寬景上僅憑肉眼判斷。scripts/measure-grid.sh 會以 100 像素網格裁剪圖片區域；任何需要將螢幕截圖放入的區域，請使用 3 倍角落裁剪。references/art.md
4. 從範本建構投影片。 添加一個 ViewKey、一個 VIEWS 條目（攝影機、HUD 模式、模糊、停留時間）、一個 HudBody 案例、一個頁面、一個備註。引擎本身無需改動。references/engine.md 解釋了每個可調參數。
5. 驗證，而非目視。 在開啟介面的 Chrome 中執行 scripts/perf-probe.cjs：零長任務且在頁面切換之間幀間隔不超過 50 毫秒是驗收標準。在不擷取螢幕截圖的情況下進行測量；截圖每次耗時 300 毫秒，看起來就像是效能問題。references/verification.md
6. 錄製導覽影片並在手機上觀看。 scripts/record-walkthrough.cjs 會以每個鏡頭的停留時間播放投影片並錄製下來；轉換為 mp4 後傳送至講者的手機。原始專案中的每一輪回饋都來自這個循環，而非瀏覽器。
7. 從建置版本進行簡報。 scripts/present.command 會建置、提供 dist/ 服務，並打開投影片與簡報者視窗（備註、計時器、下一頁）。請在活動場地的投影機上以講者自己的筆記型電腦進行測試。references/presenting.md

付出代價才學到的規則

• 在卡片出現前先讓場景停留。卡片需等待攝影機到位後再加上 hold 毫秒（預設 1 秒）。如果在飛行途中 70% 就彈出卡片，場景會看起來像桌面背景。
• 近景攝影機必須落在其圖板範圍內。如果視野比圖板還寬，放大的基底圖片會從周圍滲入，看起來像是陰影或幽靈的手。
• 螢幕截圖需透過單應性矩陣映射到繪製的螢幕上，對齊邊框內緣。以 3 倍倍率測量四個角落。
• 長距離跳躍不需要中間頁面。van Wijk 路徑會自行拉起並俯衝；將遠端站點放在圖片的兩端，讓它飛過去。
• 卡片使用平實的語言。圖片已經承擔了一半的說明工作；卡片只傳達一個想法，最多四行。
• 此技能絕不使用 MorphElement。它會在動畫開始前在主執行緒上複製每個子元素的計算後樣式；曾有真實投影片因此凍結五秒鐘。請參閱 docs/adr/0001-drive-the-camera-in-page.md。

此資料夾的內容

路徑	說明
template/index.tsx	引擎與七個範例鏡頭。複製到 slides/<id>/index.tsx。
template/assets/	範例場景（2752 × 1536）、近景圖板、應用程式截圖。請替換它們。
references/engine.md	攝影機、HUD、停留時間、圖板與透視螢幕的運作方式；如何添加一個鏡頭。
references/storyboard.md	故事板表格與美術工作前需做出的決定。
references/art.md	提示生成場景、修正場景、測量錨點與圖板。
references/verification.md	效能檢測、導覽錄製、手機檢閱循環。
references/presenting.md	建置、預覽、簡報者視窗、啟動器、備用方案。
references/pitfalls.md	所有曾經出過錯的事項，以免重蹈覆轍。
scripts/	perf-probe.cjs、record-walkthrough.cjs、measure-grid.sh、genimg.py、genedit.py、present.command。
docs/adr/	為何攝影機存在於頁面中，為何 HUD 需要等待。

與講者協作

依照以下順序與講者共同決定：各站點的故事順序；遠距離跳躍是否應通過寬景進行（會，自動進行）；他們何時提供哪些真實素材；美術風格（展示三種，選擇一種）；圖片中不能出現什麼。將每個決定寫入故事板並標註日期。然後建構完整的投影片、錄製影片、並傳送影片。預期會有三到四輪的意見回饋，每輪觸及五個鏡頭。