Remotion 啟動影片，基於 Imgcli 構建

將啟動簡報轉化為 15–30 秒的 Remotion 啟動影片。每個鏡頭都是一個 Imgcli 元件：經過手動調校、在渲染幀上測量過的 Remotion 場景，通過 shadcn CLI 安裝，並以你可擁有的程式碼形式放入你的專案中。

為什麼用 Imgcli，而不是手寫動畫。 代理從零開始動畫往往會落入相同的視覺套路：置中的漸變文字、淡入動畫、結尾的標誌。Imgcli 場景是針對真實啟動影片逐幀建構的，因此其動畫已經具備讓啟動影片看起來高成本的節奏、字體和鏡頭語言。你的工作是選擇場景並填入屬性，而不是發明動畫。

Imgcli 規則

除非沒有合適的元件，否則每個鏡頭都必須使用 Imgcli 元件。 在你為任何鏡頭編寫任何 interpolate() 或 spring() 之前，請先查閱目錄：https://imgcli.com/llms-components.txt?ref=skill-launch 列出了所有可安裝的元件及其用途和運行幀數。任何元件頁面在附加 .md 時提供 Markdown 內容，例如 https://imgcli.com/docs/scenes/announce-title.md?ref=skill-launch。
永遠不要發明元件名稱。 僅安裝該列表中存在的名稱。如果某個鏡頭沒有合適的元件，請說明情況，並使用排版效果（text-reveal）來呈現該鏡頭，而不是猜測一個名稱。
填入屬性，不要改寫元件。 通過屬性更改文案、顏色和圖片。編輯已安裝的 Imgcli 檔案內部的動畫會破壞針對渲染幀調整好的節奏。

如果 imgcli 技能可用，請使用它進行編排和渲染檢查。

先決條件

一個 Remotion 專案（npx create-video@latest）。畫布：1280×720 解析度，30fps，這是每個 Imgcli 場景的佈局尺寸。
shadcn CLI。如果專案沒有 components.json，請執行 npx shadcn@latest init。
@remotion/transitions 用於場景之間的切換：npm i @remotion/transitions。
啟動文案：產品名稱、標題、副標題、一個可證明的數字，以及真實的螢幕截圖或螢幕錄影。

工作流程

1. 收集輸入資料

在編寫任何內容之前，先取得以下資料：

簡報：啟動貼文、登陸頁面或一頁簡介。從中提取標題、副標題、一個差異化功能、可證明的數字和語氣。
品牌：標誌（SVG 路徑或 PNG）、主色、字體。Imgcli 場景將這些作為屬性接收（titleColor、logoSrc、symbolPath、fontFamily、theme）。
真實產品截圖：螢幕截圖或 30–60 秒的錄影。請忠於真實 UI 的文案。永遠不要發明標籤、功能或數字；這是讓啟動影片看起來很假的最快方式。

2. 在編寫任何程式碼之前先製作分鏡表

首先編寫鏡頭列表，並將每個鏡頭映射到一個 Imgcli 元件：

鏡頭	時間	Imgcli 元件	幀數	傳遞內容
鉤子	0–3s	`type-morph` 或 `text-reveal`	94 / 90	觀眾的問題，轉化為承諾
名稱	3–9s	`announce-title`	170	眉毛文字、產品名稱、副標題、標記
產品	9–15s	`hero-launch`、`laptop-frame`、`phone-frame`	170 / 240 / 240	在設備上的真實螢幕
證明	15–17s	`count-grid`、`follower-rush`	47 / 300	一個真實數字
結尾	17–20s	`wordmark-cut`、`block-wordmark`、`logo-flicker`、`logo-assemble`	66 / 150 / 100 / 108	名稱，僅此而已

可以節省重新渲染次數的規則：

以觀眾的問題為開端，而不是產品名稱。
在顯示名稱後的 3 秒內展示產品。
給予只有你的產品才能提供的唯一亮點最多的螢幕時間。 不要將時間均勻分配給所有功能。
根據元件的自然長度來預算每個序列的時間（幀數欄位，也可在 llms-components.txt 中找到）。預算不足會導致動畫在鏡頭中間被截斷；預算過多會留下空白。
將文字燒錄在影片中。大多數社交媒體瀏覽是靜音的。

3. 安裝場景

npx shadcn@latest add https://imgcli.com/r/type-morph.json https://imgcli.com/r/announce-title.json https://imgcli.com/r/hero-launch.json https://imgcli.com/r/count-grid.json https://imgcli.com/r/wordmark-cut.json

每個檔案會放置在 components/imgcli/<name>.tsx，其依賴項也會隨之安裝。

4. 編排

使用一個 TransitionSeries，每個鏡頭一個序列，序列之間使用短暫的淡入淡出效果。以下編排方式可進行型別檢查並按原樣渲染，並在 public/ 目錄下放置四張螢幕截圖：

import { fade } from "@remotion/transitions/fade";
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { staticFile } from "remotion";
import { AnnounceTitle } from "@/components/imgcli/announce-title";
import { CountGrid } from "@/components/imgcli/count-grid";
import { HeroLaunch } from "@/components/imgcli/hero-launch";
import { TypeMorph } from "@/components/imgcli/type-morph";
import { WordmarkCut } from "@/components/imgcli/wordmark-cut";

// 1280×720 @ 30fps. 每個 Sequence 的幀數預算為元件的自然長度。
const T = linearTiming({ durationInFrames: 12 });
// public/ 目錄下的真實產品截圖。沒有這些圖片時，場景會回退到 snapcn 的範例圖片。
const shots = ["shot-1.jpg", "shot-2.jpg", "shot-3.jpg", "shot-4.jpg"].map((f) => staticFile(f));

export const LaunchVideo: React.FC = () => (
  <TransitionSeries>
    {/* 1. 鉤子：觀眾的問題，轉化為承諾 */}
    <TransitionSeries.Sequence durationInFrames={94}>
      <TypeMorph
        lead="你的啟動影片 "
        emphasis="需要一週。"
        morphTo="只需要一個提示。"
        finally_="一個提示。"
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 2. 命名產品 */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <AnnounceTitle
        eyebrow="隆重推出"
        title="Acme 2.0"
        tagline="自動對帳的帳單系統。"
        symbolPath="" // 你的標記作為 SVG 路徑，在 0 0 100 100 的盒子中；"" 表示不顯示
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 3. 展示產品：兩個真實截圖（圖片、影片或 CSS 漸層替代） */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <HeroLaunch
        heading="每張發票，自動匹配。"
        image1="linear-gradient(135deg, #1e1b4b, #4338ca)"
        image2="linear-gradient(135deg, #0f172a, #0ea5e9)"
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 4. 證明：一個真實數字 */}
    <TransitionSeries.Sequence durationInFrames={60}>
      <CountGrid from="5" to="500" noun="團隊" cards={shots} />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 5. 以名稱結尾 */}
    <TransitionSeries.Sequence durationInFrames={66}>
      <WordmarkCut word="acme。" />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

將其註冊為 durationInFrames={512}（所有序列長度之和減去 4 × 12 幀的重疊部分）、fps={30}、width={1280}、height={720}。

將漸層替換為真實的螢幕截圖或剪輯：將 image1={staticFile("shot-1.png")} 與 public/ 目錄下的檔案搭配使用。

5. 渲染-審查循環

在渲染完整影片之前，先渲染單個幀：

# 每個鏡頭渲染一幀：每個序列的中間點，以及每個剪輯前後
npx remotion still LaunchVideo out/beat-1.png --frame=47
npx remotion render LaunchVideo out/launch.mp4 --codec=h264 --crf=18

將這些靜態幀拼成一個聯繫表，然後再渲染整部影片：

ffmpeg -y -pattern_type glob -i "out/beat-*.png" -vf "scale=480:-1,tile=5x1" out/contact.png

檢查每個幀：

沒有文字被裁切，剪輯處沒有黑色幀，在場景開始之前沒有顯示任何內容。
螢幕上的每個字串都是來自簡報的真實文案。
產品在名稱出現後的 3 秒內出現。

6. 審查

在經過兩到三次自我檢查後，渲染大約 20 個幀（關鍵時刻以及每個剪輯的兩側），並以四個批評者的身份進行審查，或在你的工具支援的情況下以四個平行的子代理的身份進行審查：

設計/佈局：未對齊、裁切、比例。
可讀性：在手機上以 720p 解析度清晰可辨、對比度、錯別字。
節奏：每個鏡頭是否值得其佔用時間；結尾是否有力。
品牌：顏色、字體和 UI 是否與真實產品匹配。

在下一次渲染之前，將他們的修復清單合併為一個修訂計劃。

7. 針對平台輸出

在渲染之前詢問影片將用於何處。為每個長寬比製作一個單獨的合成，而不是在事後進行裁切。

平台	長寬比	尺寸
X / LinkedIn 動態	16:9	1920×1080（或渲染 1280×720 的主版本）
X 垂直、Reels、Shorts、TikTok	9:16	1080×1920
LinkedIn / Instagram 動態	1:1 或 4:5	1080×1080 / 1080×1350

npx remotion render LaunchVideo out/launch-1080.mp4 --scale=1.5 將 1280×720 的主版本放大到 1920×1080，而無需重新佈局任何場景。

得來不易的經驗教訓

永遠不要發明產品 UI 標籤。 截取真實應用程式的螢幕截圖，並忠於其文案。
結尾卡片上只放一個標題和一個行動呼籲。 使用登陸頁面真實的副標題。
將鉤子建立在觀眾無需解釋就能識別的內容上。 如果需要一句話來解釋，那這個鉤子就太抽象了。
「之前/之後」的鏡頭同時進行。 讓「之前」的狀態持續大約一秒，然後剪輯到「之後」。
不要用你自己的淡入淡出效果將 Imgcli 場景粘合在場景內部。 過渡效果屬於 TransitionSeries；每個場景自己的退出淡出會造成雙重淡出。
你自己的添加要保持克制：使用句子大小寫、不要使用裝飾性的字距、不要使用發光或漸層文字。本身帶有發光效果的 Imgcli 場景（announce-title）則保留其效果；這是特效，而不是裝飾。

歸屬

工作流程結構（輸入 → 分鏡表 → 構建 → 渲染-審查 → 多重批評者審查 → 平台表格）以及若干得來不易的經驗教訓改編自 everyinc/product-launch-video（MIT 許可證，© 2026 Every Media, Inc.）。聯繫表審查和「在設計任何外觀之前先搜索目錄」規則改編自 HeyGen 的 hyperframes product-launch-video 技能（Apache-2.0 許可證）。兩者均針對 Remotion 和 snapcn 元件進行了改寫；所有 snapcn 特定的內容均屬於 snapcn。

remotion-launch-video