發佈影片
製作一支優質、高能量的 15–60 秒發佈影片，讓觀眾在滑動時能立即停下目光並進行轉換。遵循經典的影片結構弧線 — 鉤子 → 預告 → 揭露 → 功能蒙太奇 → 結尾 CTA — 並根據音樂進行剪輯，最後為每個平台長寬比匯出。
使用時機
- 產品發佈、功能公告、預告片、宣傳短片（15–60 秒）。
- 用於登陸頁面的「炫技」英雄影片。
- 需要與節拍同步的揭露場景，且品牌瞬間落在重拍上。
影片結構弧線
| 節拍 | 任務 | 佔比（以 30 秒為例） |
|---|---|---|
| 鉤子（0–3 秒） | 一個引人注目的畫面或動作，讓觀眾停止滑動 | 0–3 秒 |
| 預告 | 暗示產品；引發好奇，並與節拍同步 | 3–9 秒 |
| 揭露 | 產品/標誌在音樂重拍時出現 | 9–13 秒 |
| 功能蒙太奇 | 快速、動感，每個鏡頭展示一個功能亮點 | 13–25 秒 |
| 結尾卡片 | 標誌 + 標語 + CTA，乾淨地定格 | 25–30 秒 |
上述比例同樣適用於 15 秒（更緊湊）或 60 秒（延長蒙太奇，但鉤子不變長）的影片。
兩條不可妥協的規則
- 聲音設計主導畫面。 先鎖定音樂曲目，標記節拍與重拍點，然後再根據這些標記進行畫面剪輯。切勿為已完成的剪輯再另行配樂 — 揭露畫面必須精準落在重拍上，而非接近重拍。
- 質量重於數量。 少數幾個完美的鏡頭勝過許多平庸的鏡頭。剪掉任何不夠優質的鏡頭。
在重拍上進行節拍同步揭露
找出音訊中重拍的確切時間碼，然後調整揭露的時間點，讓品牌標誌在該影格瞬間完整呈現，並帶有微小的過衝效果以增加衝擊力。
import gsap from "gsap";
const DROP = 9.0; // 秒，從音樂軌道測量
const tl = gsap.timeline({ paused: true });
// 預告在重拍前累積緊張感
tl.to(".tease", { opacity: 1, scale: 1.05, duration: DROP, ease: "power1.in" })
// 揭露在重拍影格瞬間出現
.set(".logo", { opacity: 1 }, DROP)
.fromTo(".logo", { scale: 1.18 }, { scale: 1.0, duration: .18, ease: "power3.out" }, DROP)
.fromTo(".flash", { opacity: .9 }, { opacity: 0, duration: .25 }, DROP); // 白色閃爍
audio.addEventListener("play", () => tl.play());
在瞬態信號處進行剪輯，而非固定的格線：最強烈的剪輯點應落在鼓點（大鼓/小鼓）上；在進入重拍前進行速度調整（時間重映射），然後在重拍後進行硬切。
動態功能蒙太奇
每個鏡頭展示一個功能亮點，持續時間約 0.6–1.0 秒，並在節拍處進行硬切。每個鏡頭 = 一個大膽的關鍵字 + 一個支援性視覺元素。
.feature { opacity:0; }
.feature.in .kw { animation: pop .35s cubic-bezier(.22,1,.36,1) forwards; }
.feature.in .word { display:inline-block; }
@keyframes pop { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:none } }
// 根據從音樂軌道測量到的節拍標記來驅動鏡頭
const beats = [13.0, 13.8, 14.6, 15.4, 16.2]; // 秒
beats.forEach((t, i) => scheduleAt(t, () => showFeature(i)));
在整個蒙太奇中保持統一的動作語言（相同的進場曲線、相同的離場方式），讓速度感傳達出自信，而非混亂。
結尾卡片
將標誌 + 標語 + CTA 保持靜止且乾淨地定格至少 2 秒。不要讓任何動態元素與 CTA 競爭；讓品牌穩定呈現。將品牌瞬間落在最強烈的剩餘節拍上，然後再加上一個清晰的按鈕/網址。
多種長寬比匯出
使用中心安全區域進行構圖，以便一個主版本可以乾淨地裁切成所有長寬比。
| 長寬比 | 用途 | 解析度 | 安全區域 |
|---|---|---|---|
| 16:9 | YouTube、登陸頁英雄、X | 1920×1080 | 將關鍵內容保持在中心 90% 區域內 |
| 9:16 | Reels、TikTok、Shorts、Stories | 1080×1920 | 文字保持在中心 80% 高度內；避免頂部 12% / 底部 18% 區域（UI） |
| 1:1 | Feed 貼文 | 1080×1080 | 16:9 畫面的中心正方形區域 |
將英雄畫面/標誌/CTA 設計在 1:1 中心正方形 內，以確保能適應所有裁切。先渲染 16:9 主版本，然後從同一個專案中重新構圖（而不僅僅是加上黑邊）出 9:16 和 1:1 版本。
輸出檢查清單
- 音樂軌道先鎖定；揭露畫面精準落在重拍上。
- 鉤子在最初 3 秒內成功吸引注意。
- 蒙太奇：每個鏡頭展示一個功能亮點，在節拍處硬切，統一的動作語言。
- 結尾卡片至少停留 2 秒，並包含一個清晰的 CTA。
- 匯出 16:9 + 9:16 + 1:1 版本，關鍵內容位於中心安全區域內。
- 只使用優質鏡頭 — 任何平庸的素材都無法通過剪輯。
交付與驗證（渲染靜止幀 → MP4）
打包好的輔助工具 (
scripts/)：使用scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png將你的靜止幀拼接成聯繫表，然後使用scripts/probe-mp4.sh out.mp4 [WxH] [fps]驗證編碼。詳見scripts/README.md。
如果發佈影片是使用 Remotion 建立/渲染的，請將其視為重量級方案：註冊一個 <Composition>（加上 zod schema 和 defaultProps），所有值都透過 useCurrentFrame() 來驅動 — 在渲染時不要使用 GSAP 時間軸 / 音訊事件回調 / Date.now() / Math.random()（將節拍和重拍時間碼烘焙到 props 中）。可交付產出物 = 每個長寬比的渲染 out/*.mp4 檔案（以及專案本身）。
驗證循環 — 渲染靜止幀 → 檢查 → 編碼。 取樣整個結構弧線，並使用「已出貨」的 props（真實的標題/標語/CTA），而非僅使用 defaultProps。
# 在鉤子 → 揭露 → 結尾卡片處取得精確影格的靜止幀
npx remotion still Launch out/f-hook.png --frame=24 --props=props/launch.json # 鉤子在最初 3 秒內成功吸引注意
npx remotion still Launch out/f-reveal.png --frame=270 --props=props/launch.json # 標誌在揭露影格瞬間出現
npx remotion still Launch out/f-end.png --frame=899 --props=props/launch.json # 結尾卡片：標誌+標語+CTA，乾淨定格
# 檢查每個靜止幀：解析度（產品/標誌、標語、CTA 文字完全正確、品牌顏色正確、揭露畫面在揭露影格）
# 以及瑕疵（文字溢出、超出畫布、CTA 在 9:16 底部三分之一區域、缺少字體、閃爍影格卡住）
多種長寬比 — 在編碼所有版本之前，先驗證主版本在每個長寬比下的表現。 一個重新構圖的錯誤（例如英雄畫面被推出安全區域）會在所有長寬比中重複出現；只需檢查一次。
for ar in 16x9 9x16 1x1; do # 檢查每個長寬比的揭露 + 結尾卡片
npx remotion still Launch "out/reveal-${ar}.png" --frame=270 \
--props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
done
# 所有長寬比的靜止幀都乾淨？ → 然後開始編譯每個版本：
for ar in 16x9 9x16 1x1; do
npx remotion render Launch "out/launch-${ar}.mp4" --props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
done
npx remotion render Launch out/demo.gif --codec=gif --props=props/launch.json # README 用示範 GIF
在完成之前：
npx remotion still在鉤子 / 揭露 / 結尾卡片處能乾淨渲染 — 無錯誤，無缺少字體或素材。- 標誌/標語/CTA 文字完全正確，品牌顏色正確；揭露畫面落在揭露影格；關鍵內容位於中心安全區域內，且避開 9:16 的底部三分之一區域。
- 僅使用影格驅動 — 無 GSAP/音訊回調定時、無
Date.now()、無Math.random()（節拍/重拍已烘焙到 props 中）。 - 已出貨的 props 能正確渲染（不僅是
defaultProps）；結尾卡片至少停留 2 秒且包含一個 CTA。 - 在編碼前先驗證主版本在 16:9 + 9:16 + 1:1 的表現；MP4 可正常播放；（可選）爲 README 生成 GIF。
參考檔案
references/launch-structure.md— 一份完整的逐鏡頭模板，包含 30 秒影片的時間碼（可擴展至 15–60 秒）、節拍同步揭露的時間點、動態蒙太奇的鏡頭組合配方、聲音設計主導畫面的工作流程，以及針對 16:9 / 9:16 / 1:1 的詳細安全區域圖。