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は共有コアライブラリです（タイムラインフック、テーマコンテキスト、カラー計算）。ほとんどのUIプリミティブがこれに依存します。直接インストールすることはほとんどありません。
2つの階層
snapcnには2種類のコンポーネントがあり、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/ 以下に1コンポーネント1ファイルで分割されています。references/components/index.mdから始めてください — カテゴリ別にグループ化されたルーターテーブルで、各コンポーネントに「使用する場面」「避ける場面」のシグナルが記載されています。スキャンして候補を選び、必要な 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。コンポーネントはこれに合わせてレイアウトされています。 - 各シーケンスの予算はコンポーネントの自然な長さに合わせてください —
components/index.mdのLength列（および各ファイルのNatural length）を参照。予算を低く見積もるとアニメーションが途切れ、高く見積もると無駄な空白が生まれます。 - トーンの一致: 各カタログエントリには
vibeタグ（tech/premium/data/clean/playful/social）が付いています。ブランドに合ったvibeのコンポーネントを選んでください。 - パレットとフォント: ライブラリのトークン（
references/design.md→ トークン）の範囲内に留めてください。そうすることで、自身の要素が衝突しなくなります。
デザインのデフォルト — 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を使用し、スクロールにスプリングやイージングは使用しません。 - 分割レイアウトでは
overflow: hidden— 幅アニメーション中のコンテンツ崩れを防ぎます。 - カーソル点滅は決定論的 —
Math.floor(frame / 15) % 2 === 0で制御し、インターバルは使用しません。 - 静的ファイルは
public/に配置 —importではなくstaticFile('cursor.svg')で読み込みます。 - ソーシャルカードはオフラインでレンダリング —
avatarUrl=""/coverUrl=""はグラデーションにフォールバックします。フェッチは行いません。
一般的なRemotionルール（Math.random() 禁止、setInterval 禁止、top/left ではなく transform でアニメーション、レンダリング前にフォントをロード）は、Remotion自身のスキルに含まれています。このスキルではありません: npx skills add remotion-dev/skills。
動画の構成
コンポーネントをただ並べるのではなく、一つのストーリーを構成してください。フル動画の作成を依頼された場合（「製品デモを作って」「チェンジログ動画」「ランディングページのイントロ」など）:
- 戦略を決定 — 既存テンプレートを使用するか、コンポーネントから構成するか、新しいコンポーネントを構築するか。
references/anatomy.md§1 を参照。 - ビートに従う — 製品デモは フック → ポジショニング → プロダクト公開 → 機能紹介 → 証明 → CTA（最後の2つはオプション）。
references/anatomy.md§2 を参照。 - レシピを使用 —
references/archetypes/index.mdがアーキタイプ別のビルドにルーティングします: コンテンツ契約（推論 → 質問 → プレースホルダー）、長さのバリエーション、ビート→コンポーネントスロット、および動作する<TransitionSeries>スケルトン。 - 各ビートのコンポーネントを
references/components/index.mdから選択 —vibeタグをブランドに合わせ、各<Sequence durationInFrames>の予算をその自然な長さに合わせます。 - 品質基準を確認 — アクセント1つ、文頭大文字のキネティックタイプ、実際のコンテンツ、グローハローなし、機能リストの列挙なし、タイプの後ろに装飾的なグラデーションウォッシュなし。
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が含まれます。MCPを使用すると、エージェントがレジストリを検索し、すべてのコンポーネントの実際のプロパティを読むことができます。Proコンポーネントは、components.json がキーを送信すると（https://snapcn.dev/account?ref=skill-snapcn の3行）、無料コンポーネントと同様にインストールできます。MCPは claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY です。プラン: https://snapcn.dev/docs/pricing?ref=skill-snapcn
Proの準備がまだできていませんか？1つのProコンポーネント「Manifesto」は、メール確認で無料です: https://snapcn.dev/docs/pricing?ref=skill-snapcn#free
リファレンス
references/anatomy.md— フル動画の構成: 戦略（テンプレート/構成/新規）、製品デモのビート、良品vsスロップの品質基準。references/archetypes/index.md— アーキタイプ別ビルドレシピへのルーター（製品デモ フラッグシップ + チェンジログ、機能アナウンスメント、OSSショーケース、CLIツールデモ、お客様の声リール、年間レビュー、価格公開、ロゴバンパー）: コンテンツ契約、長さのバリエーション、ビート→スロットマップ。references/components/index.md— ルーターテーブル（すべてのコンポーネント、カテゴリ別にグループ化、「使用する場面」/「避ける場面」付き）。1つのコンポーネントの完全なプロパティ、使用例、使用/不使用ノートについてはreferences/components/<name>.mdを開いてください。references/design.md— アンチスロップデザインデフォルト（Do/Avoid）+ デザイントークン（パレット、フォント、キャンバス）。references/motion-principles.md— snapcn + Remotionに適応したモーションデザイン原則。references/anti-patterns.md— よくある生成ミスとその修正方法。