dolly: product videos and motion graphics in code

該影片是 Remotion 專案：React 元件逐影格渲染。starter/ 在此檔案旁包含兩個運作中的影片：Video（一個 41 秒的 Termary 啟動影片剪輯，由真實錄製內容製作）和 Promo（一個 25 秒的動態圖形剪輯，僅由範本製作）。兩者皆可在 8 種風格和 4 種格式中渲染。您將它們轉換為使用者的，同時保留其有效之處。

規劃 → 素材（錄製它，或掃描使用者的）→ 建置場景 → 審查影格 → 渲染

您無法觀看影片，因此您透過渲染連絡表和讀取 PNG 來審查它。每次變更後都這樣做：大多數不良動態在連絡表中是可見的。

只讀取工作所需的部分。 路徑是相對於此技能資料夾：

時機	讀取
您在 Mac 上錄製產品（被觀察者操作它）：一個應用程式、一個網站、iOS 模擬器	`references/record-mac.md`
使用者必須錄製：Windows、真實手機、您無法操作的裝置或帳戶	`references/record-elsewhere.md`
使用者提供他們錄製的內容	`references/your-footage.md`
從錄製內容建置的場景：3D 工具包和攝影機移動	`references/camera.md`
非產品啟動的影片：活動、招聘、更新日誌、數據故事…	`references/agendas.md`
挑選元件：範本、文字、圖形、繪圖、背景、轉場	`starter/src/library/CATALOG.md`
某物渲染錯誤，或您正在撰寫新元件	`references/gotchas.md`

1. 開始

<此技能資料夾>/new.sh my-video     # 檢查 Node，複製 starter，安裝所有內容
cd my-video && npx remotion studio         # 可選：使用者可以在 localhost:3000 檢視

如果缺少 Node，new.sh 會使用 Homebrew 安裝它，執行 npm install（也會產生音效），下載 Remotion 渲染使用的無頭 Chrome，並顯示是否已安裝 observee。在 Windows 上，在 Git Bash 中執行它，在 winget install OpenJS.NodeJS.LTS 之後。對於現有的 Remotion 4.0.320+ 專案，複製 src/kit.tsx、src/look.tsx、src/parts.tsx、src/sequence.tsx、src/backdrop.tsx 和 src/library/。

檔案	內容
`src/brand.ts`	產品：名稱、URL、標誌（在 `public/` 中）、強調色和警示色、其風格、其字型（如果有的話）
`src/look.tsx`	8 種風格和 4 種格式，以及 `useLook()`，每個部分都透過它讀取它們
`src/Video.tsx`、`src/Promo.tsx`	一個影片：其場景按順序排列及其長度，以及聲音提示
`src/scenes/`	基於錄製素材的場景。`takes.ts` 說明素材中的位置
`src/library/`	元件庫，每個項目一個資料夾；`CATALOG.md` 列出它們及其 props
`src/sequence.tsx`、`src/backdrop.tsx`	`Scenes` 使用轉場連接場景；`Backdrop` 繪製風格的頁面
`src/parts.tsx`	覆蓋在鏡頭上的內容：`Caption`、`Tap`、`Callout`、`Speed`、`Pop`
`src/kit.tsx`	3D 工具包和攝影機移動（`references/camera.md`）
`public/takes/`	錄製內容。將它們替換為使用者自己的
`scripts/`	`take.sh` 錄製一個素材，`scan.mjs`（`npm run scan`）讀取錄製內容，`sfx.mjs` 和 `music.mjs` 製作聲音，`voice.mjs` 製作旁白，`library.mjs` 重建目錄，`check.mjs`（`npm run check`）測量渲染，`web.mjs`（`npm run web`）製作上傳副本

Remotion 對個人和最多 3 人的公司是免費的；較大的公司需要公司授權（remotion.pro）。如果適用的話，告知使用者一次。

2. 規劃

首先閱讀產品的網站，然後與使用者確定以下事項，僅詢問您無法推斷的內容：

影片播放位置，這決定了格式和長度。渲染他們需要的每種格式；為主要格式設計並檢查其他格式。

格式	構圖	尺寸	適用於	長度
landscape	`Video`	1920×1080	YouTube、X、LinkedIn、網站、演講	啟動 45–90 秒
vertical	`Vertical`	1080×1920	Reels、TikTok、YouTube Shorts、Stories	15–35 秒
square	`Square`	1080×1080	X、LinkedIn、Instagram 的動態消息	15–45 秒
portrait	`Portrait`	1080×1350	Instagram 和 LinkedIn 動態消息 (4:5)	15–45 秒

動態消息以靜音播放：文字承載故事，且前 2 秒必須能獨自吸引人。

風格。 以每種風格渲染一個影格（npm run styles，為另一個影格或格式加上 --props='{"frame":420,"format":"vertical"}'），向使用者展示，並設定 brand.style。從品牌建議一個：深色開發者工具 → midnight 或 terminal，消費者應用程式 → soft 或 bold，高級或平靜的產品 → editorial 或 swiss，預告片 → cinema，創意或工藝產品 → paper。

風格	外觀
`editorial`	淺色紙張，襯線標題搭配斜體強調短語，硬切。平靜且昂貴：Termary 影片
`midnight`	近乎黑色，強調色發光，緊湊的無襯線字體，文字模糊進入焦點，縮放轉場
`bold`	強調色作為頁面，巨大的粗體字型，強調短語從區塊中鏤空，彈性彈出，滑動
`swiss`	米白色，黑色字型在欄位網格上，節制使用強調色，方形卡片，硬擦除
`soft`	強調色的柔和色調，圓角字型，強調短語在藥丸形狀上，有彈性的彈出，圓形揭示
`terminal`	全部等寬，標題打字輸入並帶有游標，掃描線，故障切換
`cinema`	預告片：近乎黑色，大而安靜的襯線字體，影片顆粒，透過黑色緩慢淡入淡出
`paper`	用程式碼繪圖：軟薰衣草色頁面上的紙卡，輕襯線搭配粗體強調色，卡片翻轉

觀眾應記住的一句話，產品中證明它的真實時刻，以及結束卡的要求（URL、下載、候補名單）。
素材的來源。 具有 UI 的產品會獲得真實素材，這勝過任何模擬：您錄製它、使用者錄製它，或者使用者已經擁有它（上表說明了要讀取的內容）。如果無法存取產品，或者用於預告片或解說影片，則從庫中建置。

然後依序撰寫場景：痛點（鉤子，絕非標誌），產品（標誌在節拍上），證明（真實時刻，或功能、指標、前/後對比），要求（結束卡）。其他議程保留其形狀及其自己的中間部分（references/agendas.md）。螢幕上最多同時顯示 7 個單字，每個單字停留 1 秒 + 0.3 秒。將簡報放在 Video.tsx 頂部的註解中。

3. 素材

無論以何種方式取得，使其可用的要素相同：停留（每個動作前後 4–5 秒的狀態：從中剪輯鏡頭），真實產品（絕非示範模式的罐頭結果，也絕非私人資料），以及您從中讀取的時間。npm run scan 讀取任何錄製內容：其停留、變更和聲音，並附有影格連絡表，因此您可以根據未經任何人向您描述的素材進行規劃。這些時間是鏡頭播放的 at 值。

4. 建置場景

場景是填充影格的元件。Video.tsx（或 Promo.tsx）中的 SCENES 列出它們及其長度；風格的轉場連接它們，且場景可以命名自己的轉場（transition: 'iris'，進入它的轉場）。在每次移動整個影格的轉場（滑動、甩動、縮放）下，播放一個呼嘯聲。

庫（src/library/）包含每個現成的部分，每個項目一個資料夾：範本（完整場景）、文字效果、圖形、繪圖、語音部分、背景和轉場。在建置之前先閱讀 src/library/CATALOG.md：每個項目的摘要、可按原樣使用的用法行，以及它的 props。從庫匯入（import {Stat, Statement} from './library'）。每個項目透過 useLook() 讀取風格，取得 start（從其場景開始的影格）以及（在可以離開的地方）exit。npm run gallery 渲染每個項目的範例，並附有其程式碼標籤（--props='{"only":"graphics","style":"bold","format":"vertical"}' 可縮小範圍）。

範本是整個場景，因此它直接放入 SCENES：

{name: 'Features', seconds: 4.5, component: () => (
  <Features title="Everything in" accent="one window." items={[{icon: Columns3, title: 'Split panes', text: '…'}]} />
)},

來自錄製內容的場景將視窗、窗格或手機在 3D 中浮動於 Caption 下方，攝影機在其上移動：references/camera.md。

善用庫。

Metric、Stat 和 Quote 僅使用真實數字和真實引用，並經許可。
繪圖會向品牌顏色著色：以獲得更具手工藝感、人性化的感覺，以及在 paper 風格中。
語音： npm run voice -- script.txt name 使用 Mac 或 Windows 的內建語音（或使用錄製的 WAV）將腳本朗讀到 public/voice/name/ 和 src/voice/name.ts。Voiceover 播放它，voiceTiming/voiceEnd 將場景與它同步，而 Captions 和 Waveform 跟隨它。動態消息以靜音播放：有旁白的影片仍然需要其字幕。內建語音用於草稿；對於已發布的影片，請錄製真人或使用使用者擁有權限的語音。
目錄稱為 WebGL 著色器的轉場僅是強調用：檢查最終渲染中圍繞它的每個影格。
回饋影片發明的內容。 其他影片可能使用的佈局、晶片或移動將成為專案庫中的一個項目（一個包含元件、其範例在 <name>.demo.tsx 和 item.json 中的資料夾，然後執行 npm run library），並提供使用者將其也新增到 dolly 自己的庫中。

單一專案中的多個品牌（客戶的變體，或每個產品一個影片）： <LookProvider style="soft" brand={{name, url, logo, accent}}> 為其中所有內容設定它們，而 useBrand() 讀取品牌。

每種格式。 場景從 useLook() 讀取影格：look.safe（平台用自己的按鈕覆蓋的內縮：將文字保持在內部），look.band（頂部的標題區域），look.aim（傳遞給 focusOn），look.size（標題大小），look.tall，以及 byShape(look, {wide, tall, square}) 以挑選佈局。

5. 品味

無論何種風格，讓它看起來昂貴的因素：

產品自身的外觀。 它的強調色、它的字型（brand.fonts）、它的標誌、適合它的風格。
每個鏡頭上都有標題， 在頂部的區域中，強調短語以風格的方式設定。
真實事物，緊密裁切。 整個視窗、作為浮動卡片的單個窗格、Mac 旁的手機。一個場景通常是兩到三個剪輯，並且標題隨著剪輯而改變。緊密裁切在推入所針對的內容周圍。
顯示輸入。 Tap 在點按處，Callout 或 Spotlight 在重要內容周圍，範本上的 Cursor，每當素材加快時顯示 Speed 晶片。
每個轉折點都有聲音，其他則很少。 public/sfx/ting.wav 在故事轉折的每個時刻，在其變得可讀的影格上（而非在之後的小節線）；click.wav 在點按時；whoosh.wav 僅在整個影格移動（影片在一個移動的轉場下播放一個：滑動、甩動、縮放、翻轉，最多每 8 秒一個），一個影片大約兩個。保持效果約每 10 秒 5 個，讓音樂承載其他剪輯：使用者獲得授權的曲目，或 npm run music -- <seconds>。
避免生成設計的跡象： 漸層文字、紫到藍漸層、深色背景上的青色、每個卡片相同、每個字都有特效、一個影片中使用五種轉場。一個想法一個效果，一個影片一種轉場風格（加上一個強調），先使用風格的預設值。

動態規則。 根據它們檢查每個鏡頭。

移動攝影機，而非物體。 每個鏡頭一個攝影機路徑；深度提供視差。
每個鏡頭一個移動，有其原因：揭示、跟隨，或推向重要的事物。
平面以便閱讀。 當有文字要閱讀時，它面向攝影機並緩慢移動。
全都緩動。 用 ease.out 到達，用 ease.in（更快）離開，在停留之間使用 ease.inOut。僅在風格有彈性時或在標誌上彈跳。
絕不靜止。 為每個鏡頭提供一個緩慢的漂移（useShot 的第二個引數）。
停留足夠長的時間以閱讀，然後剪輯。如有疑問，停留更長時間並縮短下一個場景。
在節拍上剪輯（120 BPM 時為 0.5 秒），並保持剪輯時的移動方向：一個場景離開的方式與下一個場景到達的方式相同。
克制。 產品是明星：最多每 10 秒一個炫耀的移動或效果。

頂級啟動影片達到的數字（逐影格測量）：圖片在 0.1 秒內移動，第一個單字在 0.4 秒內可讀；產品在四分之一處出現在螢幕上；大約每 0.7 秒發生一些變化，即使在長鏡頭內也是如此；正在閱讀的文字移動約低於每秒 3 像素；關鍵主張上有一個 1–1.6 秒的設計停留，沒有其他超過 0.8 秒的靜止；最重要的時刻大約在執行時間的 80%，然後是一個約 2 秒的平靜結束卡。

references/gotchas.md 包含陷阱：什麼會壓平 3D、什麼會破壞逐影格渲染、捆綁的 ffmpeg 的限制。

6. 審查

npx remotion still Sheet out/sheet.png                                          # 影片，1 影格/秒
npx remotion still Sheet out/focus.png --props='{"scene":"NeedsYou","every":6}' # 一個場景，5 影格/秒
npx remotion still Sheet out/v.png --props='{"format":"vertical","guides":true}' # 另一種格式，繪製安全區域
npx remotion still Vertical out/f140.png --frame=140                            # 一個影格，全尺寸
npm run styles && npm run formats                                               # 每種風格/格式一個影格

讀取每個 PNG。檢查：

前 2 秒在沒有聲音和沒有上下文的情況下有意義；
任何可讀的內容都正對攝影機並停留（連續幾個幾乎相同的單元格）；
文字位於每種格式的虛線安全區域內，且主體位於虛線之間；
沒有重要的東西被影格邊緣裁切、隱藏在較近的圖層後面或標題下方；
沒有影格是空白或鏡像的（攝影機在內部或後方）；
相鄰的單元格...

[翻譯至此截斷]

dolly：Remotion 發表片，一次出全尺寸