snapcn 是做什麼的？

Remotion 影片的複製貼上元件。元件透過 shadcn 安裝，並放置在 components/snap-cn/ 目錄下 — 您擁有程式碼的完整所有權。

安裝

先決條件：一個 Remotion 專案（npx create-video@latest）。

# 加入任何元件（使用命名空間的 shadcn 註冊表）
shadcn add @snapcn/text-reveal

# 元件會放置在 components/snap-cn/text-reveal.tsx

@snapcn/<name> 是標準的命名空間形式。不需要額外的 registries 設定 — 命名空間已存在於 shadcn 註冊表目錄中。也可以直接使用原始註冊表 URL https://snapcn.dev/r/<name>.json。

相依性會自動安裝

許多元件會透過 registryDependencies 拉取其他元件 — shadcn 會遞迴安裝它們。例如，shadcn add @snapcn/search-typing 也會一併拉取 @snapcn/snap-cn-ui、@snapcn/input 和 @snapcn/caret。

@snapcn/snap-cn-ui 是共用的核心函式庫（timeline-fold 鉤子、主題上下文、顏色運算）。大多數 UI 基礎元件都依賴它。您很少需要直接安裝它。

兩個層級

snapcn 有兩種元件 — 它們具有不同的 API：

動畫層（snapcn）— 文字動畫、轉場、背景、UI 區塊模擬、品牌/社交卡片、完整場景構成。以影格驅動。共用屬性：speed（時間倍數），以及文字相關：fontSize、color、fontWeight。
UI 基礎元件（snap-cn-ui）— 時間軸驅動的 shadcn 風格基礎元件。目前有兩種：input 和 caret。基於狀態的屬性（state、style、size、theme）— 開啟/輸入狀態是時間軸的純函數。沒有 speed 屬性。 建構在 @snapcn/snap-cn-ui 之上。

元件類別

根據您正在建構的內容來挑選。目錄按照 references/components/ 下的每個元件一個檔案的方式拆分。從 references/components/index.md 開始 — 這是一個路由器表格，按這些類別分組，每個元件都有 Use for / Avoid for 提示。掃描它，挑選候選元件，然後只打開您需要的 references/components/<name>.md 檔案（完整屬性、範例、所有使用/不使用說明）。不要閱讀每個檔案。

類別	層級	元件
文字與標題	`snapcn`	`text-reveal`, `type-morph`, `text-swell`, `text-highlight`, `text-swap`, `text-build`, `text-rewrite`, `text-select`, `word-flip`, `punch-lines`, `word-gather`, `word-wheel`
字幕	`snapcn`	`word-captions`, `karaoke-captions`
AI 聊天輸入	`snapcn`	`prompt-send`, `search-typing`, `prompt-zoom`, `answer-stream`, `answer-highlight`, `agent-steps`
螢幕與裝置	`snapcn`	`phone-frame`, `laptop-frame`, `terminal-simulator`, `screen-recording`, `cursor-track`
標誌	`snapcn`	`logo-assemble`, `logo-flicker`, `logo-collapse`, `logo-drift`, `block-wordmark`, `wordmark-cut`
場景	`snapcn`	`announce-title`, `hero-launch`, `orbit-gallery`, `moodboard-reveal`, `status-cycle`, `count-grid`, `roster-grant`, `orb-swarm`, `reel-collage`, `card-rail`
社會證明	`snapcn`	`follower-rush`, `channel-thread`
特效	`snapcn`	`pulsing-border`
UI 基礎元件	`snap-cn-ui`	`input`, `caret`（+ `snap-cn-ui`，共用核心函式庫）

這就是整個免費註冊表 — 共 47 個項目（最新清單永遠在 https://snapcn.dev/llms.txt?ref=skill-snapcn；另外還有 50 個 Pro 項目，請見下文）。沒有著色器、沒有獨立的轉場元件、沒有圖表或社交卡片元件，除了 input 和 caret 之外也沒有其他 shadcn 基礎元件。如果場景需要，請自行建構（references/anatomy.md §1）— 不要對不在此表中的名稱執行 shadcn add。references/components/index.md 會對應不再安裝的舊名稱。

元件模式

約定因層級而異 — 不要假設動畫層的屬性存在於基礎元件上。

動畫層（`snapcn`）

每個元件都有命名為 Props 的介面（例如 TextRevealProps）。
speed?: number — 全域時間倍數（預設為 1），套用為 frame * speed。
文字元件：fontSize、color、fontWeight。
場景到場景的轉場不在此註冊表中 — 請使用 Remotion 自己的 @remotion/transitions（slide、wipe、fade、flip）並置於 <TransitionSeries> 內部。
根元素上可選的 className?: string。

UI 基礎元件（`snap-cn-ui`）

基於狀態，不是基於 speed：state（例如 "open" / "closed"）、style、variant、size、theme?: Partial<SnapCnTheme>。
開啟/關閉/活躍狀態是時間軸的純函數（使用關鍵影格預設）。
將模態層基礎元件（對話框、警示對話框、抽屜）與觸發元素組合 — 請參閱每個元件的範例。

動畫 API

import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";

const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
const scale = spring({ fps, frame, config: { damping: 12, mass: 1, stiffness: 100 } });

// 確定性隨機（絕不使用 Math.random()）
import { random } from "@remotion/random";
const jitter = random(`seed-${frame}`);

構成結構

import { Sequence, Series } from "remotion";

<Sequence from={30} durationInFrames={60}>
  <TextReveal text="Ship it in React" />
</Sequence>

<Series>
  <Series.Sequence durationInFrames={60}><SceneA /></Series.Sequence>
  <Series.Sequence durationInFrames={60}><SceneB /></Series.Sequence>
</Series>

畫布與時間

畫布標準： 1280×720 @ 30fps。元件為此畫面配置。
根據元件的自然長度來規劃每個 Sequence 的預算 — 請參閱 components/index.md 中的 Length 欄位（以及每個檔案中的 Natural length）。預算不足會截斷動畫；預算過多會留下空白時間。
風格匹配： 每個目錄項目都帶有 vibe 標籤（tech/premium/data/clean/playful/social）— 選擇風格符合品牌的元件。
調色盤與字型： 請保持在函式庫的 token 範圍內（references/design.md → tokens），以便您自己的元素不會產生衝突。

設計預設 — 避免 AI 生成的廉價感

當您撰寫自己的文字、場景裝飾或卡片（非預建元件）時，請保持克制：

您加入的主體/標題文字不要使用裝飾性的 letter-spacing。
不要使用 text-transform: uppercase / 全大寫 預設 — 偏好句子大小寫（Launch，而不是 LAUNCH）。
不要使用漸層文字填充或裝飾性漸層色彩 — 漸層僅作為有意的背景使用。
不要使用發光 / 彩色投影或大的模糊半徑（blur > ~24px、擴張、多層）— 僅使用微妙的 1px 陰影。

例外： 切勿從本質就是特效的元件中移除這些效果 — word-flip 的漸層文字、block-wordmark 的色彩組合、announce-title 的發光效果、pulsing-border 本身以及字幕預設的粗輪廓都是合理的。這些規則約束的是您添加的部分，而不是函式庫本身。

完整的 do/avoid 範例：references/design.md。關於動畫品質（時間、預備動作、舞台化、緩動），請參閱 references/motion-principles.md。

注意事項（snapcn 特有）

沒有提供轉場元件 — 場景變更應使用 @remotion/transitions 的 <TransitionSeries.Transition>，而不是 snapcn 元件。text-swap 交換的是一行文字，而不是一個場景。
終端機滾動是即時的 — 使用階梯函數 translateY，切勿使用 spring 或 ease 來做滾動。
分割佈局使用 overflow: hidden — 防止在寬度動畫期間內容被破壞。
游標閃爍是確定性的 — Math.floor(frame / 15) % 2 === 0，而不是使用 setInterval。
靜態檔案放在 public/ — 透過 staticFile('cursor.svg') 載入，而不是使用 import。
社交卡片離線渲染 — avatarUrl="" / coverUrl="" 會回退為漸層；不會進行網路請求。

一般的 Remotion 規則（不用 Math.random()、不用 setInterval、使用 transform 動畫而非 top/left、渲染前載入字型）位於 Remotion 自己的技能中，而非此處：npx skills add remotion-dev/skills。

組成影片

不要只是傾倒元件 — 要組成一個故事。當被要求建構完整影片時（「製作產品示範」、「更新日誌影片」、「為我的登陸頁面製作介紹」）：

決定策略 — 使用現成範本 vs 從元件組合 vs 建構新元件。請參閱 references/anatomy.md §1。
遵循節奏 — 產品示範的節奏是：鉤子 → 定位 → 產品展示 → 功能 → 證明 → 行動呼籲（最後兩項可選）。請參閱 references/anatomy.md §2。
使用配方 — references/archetypes/index.md 會導向每個原型（archetype）的建構：內容合約（推斷 → 詢問 → 佔位符）、持續時間變體、節奏→元件對應表，以及一個完整的 <TransitionSeries> 骨架範例。
為每個節奏挑選元件 — 從 references/components/index.md 中選擇；將 vibe 標籤與品牌匹配，並根據其自然長度規劃每個 <Sequence durationInFrames> 的預算。
檢查品質標準 — 一個重點色、句子大小寫的動態字、真實內容、無發光光暈、無功能列表枚舉、無文字背後的裝飾性漸層色彩。請參閱 references/anatomy.md §3。

工作流程

對於完整影片，請安裝對應的工作流程技能。每個技能都會將這些元件逐節奏組合，形成一個類型安全且可渲染的影片構成：

npx skills add snapcndev/snapcn --skill remotion-launch-video：啟動影片、公告、Product Hunt / X 宣傳。
npx skills add snapcndev/snapcn --skill remotion-product-demo：來自真實螢幕錄製、CLI 和 AI 應用程式示範的操作說明。
npx skills add snapcndev/snapcn --skill remotion-motion-graphics：動態字型、標誌片頭、統計數據和短開場。
npx skills add snapcndev/snapcn --skill remotion-kinetic-typography：動畫文字和標題卡片。
npx skills add snapcndev/snapcn --skill remotion-logo-animation：標誌展示、開場和結尾片頭。
npx skills add snapcndev/snapcn --skill remotion-explainer-video：帶有內嵌字幕的旁白解說。

snapcn Pro

額外 50 個元件（version-drop、library-flight、read-through、focus-pull、tap-through、checkout-push、comment-storm、tally-rise 等）、範本以及 snapcn MCP（模型上下文協定），它允許您的 AI 代理程式搜尋註冊表並讀取每個元件的真實屬性。Pro 元件的安裝方式與免費元件相同，只需在 components.json 中設定金鑰即可（三行設定，請至 https://snapcn.dev/account?ref=skill-snapcn）；MCP 的設定為 claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY。方案：https://snapcn.dev/docs/pricing?ref=skill-snapcn

還不準備使用 Pro？一個 Pro 元件 Manifesto，只要確認電子郵件即可免費獲得：https://snapcn.dev/docs/pricing?ref=skill-snapcn#free

參考資料

references/anatomy.md — 組成完整影片：策略（範本/組合/新建）、產品示範節奏，以及好品質 vs 廉價感的標準。
references/archetypes/index.md — 導向每個原型建構配方的路由器（產品示範旗艦版 + 更新日誌、功能公告、開源專案展示、CLI 工具示範、推薦影片、年度回顧、價格揭示、標誌 bumper）：內容合約、持續時間變體、節奏→對應表。
references/components/index.md — 路由器表格（所有元件，按類別分組，附有 Use for / Avoid for 提示）。打開 references/components/<name>.md 查看單一元件的完整屬性、範例以及使用/不使用說明。
references/design.md — 反廉價感的設計預設（do/avoid）+ 設計 token（調色盤、字型、畫布）。
references/motion-principles.md — 適用於 snapcn + Remotion 的動作設計原則。
references/anti-patterns.md — 常見的生成錯誤及其修正方法。

snapcndev/snapcn

snapcn 是什麼？

在你喜歡的 AI 中提問

說明文件