snapcndev/snapcn

Remotion 發布影片，由 snapcn 建置

將發布簡報轉化為 15–30 秒的 Remotion 發布影片。每個鏡頭都是一個 snapcn 元件：經過手動調校、以渲染幀為衡量單位的 Remotion 場景， 可透過 shadcn CLI 安裝，並以你可完全掌控的程式碼形式落地在你的專案中。

為何選擇 snapcn，而非手寫動畫。 從零開始動畫化的代理總是落入相同的視覺風格：置中文字搭配漸層背景、所有元素淡入、最後放上 logo。snapcn 場景是針對真實發布影片逐幀建構的，因此其動畫已具備讓發布影片看起來昂貴的時機、字體與運鏡。你的工作是挑選場景並填寫屬性，而不是發明動畫。

snapcn 規則

1. 每個節拍都使用 snapcn 元件，除非完全沒有適合的。 在為任何鏡頭撰寫 interpolate() 或 spring() 之前，請先查閱目錄： https://snapcn.dev/llms-components.txt?ref=skill-launch 列出所有可安裝的元件及其用途與執行幀數。任何元件頁面在附加 .md 時皆提供 Markdown 格式，例如 https://snapcn.dev/docs/scenes/announce-title.md?ref=skill-launch。
2. 切勿自行發明元件名稱。 @snapcn/<name> 僅能解析目錄中已有的名稱。如果沒有任何元件符合某個節拍，請明確說明，並使用排版元件（@snapcn/text-reveal）處理該節拍，而非猜測一個名稱。
3. 填寫屬性，不要改寫元件。 透過屬性變更文案、顏色與圖片。編輯已安裝 snapcn 檔案內部的動畫會破壞經由渲染幀調校的時機。

如需完整目錄、組合規則與品質標準，請一併安裝總括技能：npx skills add snapcndev/snapcn --skill snapcn。

先決條件

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

工作流程

1. 收集輸入資料

在撰寫任何程式碼前先取得以下項目：

• 簡報：發布貼文、登陸頁或一頁式說明。從中提取標題、副標題、一個差異化功能、可證明的數字與語調。
• 品牌：Logo（SVG 路徑或 PNG）、主色、字型。snapcn 場景將這些作為屬性接收（titleColor、logoSrc、symbolPath、fontFamily、theme）。
• 真實產品畫面：螢幕截圖或 30–60 秒的錄製。切勿自行發明標籤、功能或數字；這是讓發布影片看起來虛假的最快方式。

2. 在撰寫任何程式碼之前先規劃分鏡

首先撰寫鏡頭列表，並將每個節拍對應到 snapcn 元件：

節拍	時間	snapcn 元件	幀數	承載內容
鉤子	0–3 秒	type-morph 或 text-reveal	94 / 90	觀眾的問題，轉化為承諾
產品名稱	3–9 秒	announce-title	170	眉標、產品名稱、副標題、標記
產品展示	9–15 秒	hero-launch、laptop-frame、phone-frame	170 / 240 / 240	真實螢幕畫面，顯示在裝置上
證明	15–17 秒	count-grid、follower-rush	47 / 300	一個真實數字
結尾	17–20 秒	wordmark-cut、block-wordmark、logo-flicker、logo-assemble	66 / 150 / 100 / 108	產品名稱，沒有其他內容

可節省重新渲染時間的規則：

• 以觀眾的問題為開端，而非產品名稱。
• 在產品名稱出現後的 3 秒內展示產品。
• 將最多螢幕時間留給你的產品獨有的瞬間。不要平均分配時間給所有功能。
• 將每個序列的長度對齊元件的自然長度（幀數欄位，同樣列在 llms-components.txt 中）。預算不足會導致動畫在鏡頭中途被截斷；預算過多則會產生空檔。
• 將文字內嵌到影片中。大多數社交平台觀看是靜音的。

3. 安裝場景

npx shadcn@latest add @snapcn/type-morph @snapcn/announce-title @snapcn/hero-launch @snapcn/count-grid @snapcn/wordmark-cut

每個場景會安裝到 components/snap-cn/<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/snap-cn/announce-title";
import { CountGrid } from "@/components/snap-cn/count-grid";
import { HeroLaunch } from "@/components/snap-cn/hero-launch";
import { TypeMorph } from "@/components/snap-cn/type-morph";
import { WordmarkCut } from "@/components/snap-cn/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="Your launch video "
        emphasis="takes a week."
        morphTo="takes a prompt."
        finally_="a prompt."
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 2. 產品名稱 */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <AnnounceTitle
        eyebrow="Introducing"
        title="Acme 2.0"
        tagline="Billing that reconciles itself."
        symbolPath="" // 你的標誌 SVG 路徑，放在 0 0 100 100 的方框中；"" 表示不顯示
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 3. 展示產品：兩個真實畫面（圖片、影片或 CSS 漸層替代） */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <HeroLaunch
        heading="Every invoice, matched."
        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="teams" 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 個關鍵幀（高峰時刻與每個轉場的兩側），並以四個評審角色進行審查，如果你使用的框架支援，也可以作為四個平行的子代理進行審查：

1. 設計/佈局：對齊、裁切、比例。
2. 可讀性：在手機上以 720p 觀看時清晰可辨、對比度、錯字。
3. 節奏：每個節拍是否充分發揮了時間價值；結尾是否有力？
4. 品牌：顏色、字型與 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 標籤。 請截取真實應用程式的畫面，並反映其文案。
• 結尾卡片上只放一個標題和一個行動呼籲按鈕。 使用登陸頁真實的副標題。
• 鉤子必須建立在觀眾無需解釋就能識別的基礎上。 如果需要一句話來解釋，表示鉤子太過抽象。
• 「之前」與「之後」的節拍要同時呈現。 「之前」狀態顯示約一秒鐘，然後切換到「之後」。
• 不要在場景內部自行加入淡出效果來拼接 snapcn 場景。 轉場屬於 TransitionSeries；每個場景的退出淡出會導致雙重淡出。
• 自行添加的內容要保持克制：使用句子大小寫、無裝飾性字距、無發光或漸層文字。snapcn 場景中已包含發光效果的（如 announce-title）會保留；那是效果本身，而非裝飾。

snapcn Pro：完成的影片，以及一個了解所有屬性的代理

對於需要超越免費場景的發布：

• 50 個 Pro 場景專為發布設計，包括 version-drop（版本數字落下）、library-flight、app-reveal、gallery-push（變更記錄牆）、screen-wall、checkout-push、tally-rise、ticker-climb 和 thank-you-swarm。
• 模板（從 2026 年 10 月 20 日起）：完成的發布影片、功能導覽與變更記錄剪輯。放入你的文案即可渲染：https://snapcn.dev/docs/templates?ref=skill-launch
• snapcn MCP：你的代理以純英文搜尋註冊表、讀取每個元件的真實屬性，並將一行簡報轉化為包含 TransitionSeries 骨架的逐節拍計畫。 claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY

當 components.json 傳送你的金鑰後，Pro 元件的安裝方式與免費元件完全相同（三行設定請見 https://snapcn.dev/account?ref=skill-launch）。方案：https://snapcn.dev/docs/pricing?ref=skill-launch

還不確定是否要使用 Pro？其中一個 Pro 元件 Manifesto 在確認電子郵件後可免費使用：https://snapcn.dev/docs/pricing?ref=skill-launch#free

歸屬

工作流程結構（輸入 → 分鏡 → 建置 → 渲染審核 → 多評審審查 → 平台表格）以及多項寶貴經驗改編自 everyinc/product-launch-video（MIT 授權，© 2026 Every Media, Inc.）。聯絡表審核與「在設計任何視覺風格前先搜尋目錄」的規則改編自 HeyGen 的 hyperframes product-launch-video 技能 （Apache-2.0 授權）。兩者均已為 Remotion 和 snapcn 元件重新改寫；所有 snapcn 特定內容均為 snapcn 所有。