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の2つが出荷されています。状態ベースのプロパティ（state、style、size、theme）— 開いている/タイピング中の状態はタイムラインの純粋関数です。speedプロパティはありません。@snapcn/snap-cn-ui上に構築されています。
コンポーネントカテゴリ
作成する内容に応じて選択してください。カタログは references/components/ 以下にコンポーネントごとに1ファイルで分割されています。references/components/index.md から始めてください — これらのカテゴリでグループ化され、コンポーネントごとに Use for / Avoid for が示されたルーターテーブルです。ざっと目を通して候補を絞り、必要な references/components/<name>.md ファイルだけを開いてください（全プロパティ、例、使用/非使用の注意事項）。すべてのファイルを読む必要はありません。
| カテゴリ | ティア | コンポーネント |
|---|---|---|
| テキストとタイトル | snapcn | text-reveal、text-swell、text-highlight、text-swap、text-build、word-flip |
| キャプション | snapcn | word-captions、karaoke-captions |
| AI チャット入力 | snapcn | search-typing、prompt-zoom、answer-stream |
| スクリーンとデバイス | snapcn | phone-frame、laptop-frame、terminal-simulator |
| ロゴ | snapcn | logo-assemble、logo-flicker、block-wordmark |
| シーン | snapcn | announce-title、hero-launch、orbit-gallery、moodboard-reveal、status-cycle |
| ソーシャルプルーフ | snapcn | follower-rush |
| エフェクト | snapcn | pulsing-border |
| UI プリミティブ | snap-cn-ui | input、caret（+ snap-cn-ui：共有コアライブラリ） |
これがレジストリのすべてです — 27アイテム。 シェーダー、スタンドアロンのトランジションコンポーネント、チャートやソーシャルカードコンポーネント、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）が付いています — ブランドに合った雰囲気のコンポーネントを選んでください。 - パレットとフォント: ライブラリのトークン（
references/design.md→ トークン）の範囲内に収めて、自作の要素が衝突しないようにしてください。
デザインデフォルト — AI スロップを避ける
自作のテキスト、シーンの装飾、カード（プリビルドコンポーネント以外）を作成する場合は、抑制を効かせてください:
- 追加する本文/見出しテキストに装飾的な
letter-spacingを付けない。 text-transform: uppercase/ すべて大文字のデフォルトを避ける — 文の先頭だけ大文字（LAUNCHではなくLaunch）を推奨。- グラデーションテキストフィルや装飾的なグラデーションウォッシュを避ける — グラデーションは意図的な背景のみ。
- グロー/色付きドロップシャドウや大きなブラー半径（
blur > ~24px、スプレッド、マルチレイヤー）を避ける — 控えめな1pxの浮き上がりのみ。
例外: 効果が本質であるコンポーネント（word-flip のグラデーションワード、block-wordmark のカラーデッキ、announce-title のグロー、pulsing-border 自体、キャプションプリセットの太いアウトライン）からこれらを取り除かないでください。ルールはあなたが追加するものに適用され、ライブラリには適用されません。
使用/非使用の完全な例: 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、インターバルは使用しません。 - 静的ファイルは
public/に配置 — インポートではなくstaticFile('cursor.svg')で読み込みます。 - ソーシャルカードはオフラインレンダリング —
avatarUrl=""/coverUrl=""はグラデーションにフォールバックします。フェッチは行いません。
一般的な Remotion ルール（Math.random() 禁止、setInterval 禁止、transform でアニメーション、top/left でアニメーションしない、レンダリング前にフォントを読み込む）は Remotion 自身のスキルに含まれているため、このスキルにはありません:
npx skills add remotion-dev/skills
ビデオの構成
コンポーネントをただ並べるのではなく、一つのストーリーを構成してください。フルビデオ（「プロダクトデモを作成」、「チェンジログ動画」、「ランディングページのイントロ」）の作成を依頼された場合:
- 戦略を決定する — 既製テンプレートを使うか、コンポーネントから構成するか、新しいコンポーネントを構築するか。
references/anatomy.md§1 を参照。 - ビートに従う — プロダクトデモは Hook → Positioning → Product reveal → Features → Proof → CTA（最後の2つはオプション）。
references/anatomy.md§2 を参照。 - レシピを使用する —
references/archetypes/index.mdがアーキタイプ別のビルドにルーティングします: コンテンツ契約（推測 → 質問 → プレースホルダー）、時間長バリアント、ビート→コンポーネントスロット、作成済みの<TransitionSeries>スケルトン。 - 各ビートのコンポーネントを選ぶ —
references/components/index.mdから選び、vibeタグをブランドに合わせ、各<Sequence durationInFrames>を自然な長さに基づいて予算を組む。 - 品質基準を確認する — 1つのアクセント、文頭大文字のキネティックタイプ、実際のコンテンツ、グローハローなし、機能リストの列挙なし、タイプの背後に装飾的なグラデーションウォッシュなし。
references/anatomy.md§3 を参照。
リファレンス
references/anatomy.md— フルビデオの構成: 戦略（テンプレート/構成/新規）、プロダクトデモのビート、良いものとスロップの品質基準。references/archetypes/index.md— アーキタイプ別ビルドレシピへのルーター（プロダクトデモ旗艦 + チェンジログ、機能発表、OSSショーケース、CLIツールデモ、推薦ビデオ、年間レビュー、価格発表、ロゴバンパー）: コンテンツ契約、時間長バリアント、ビート→スロットマップ。references/components/index.md— ルーターテーブル（すべてのコンポーネント、カテゴリ別にグループ化、Use for/Avoid for付き）。1つのコンポーネントの全プロパティ、例、使用/非使用の注意事項についてはreferences/components/<name>.mdを開いてください。references/design.md— アンチスロップデザインデフォルト（使用/非使用）+ デザイントークン（パレット、フォント、キャンバス）。references/motion-principles.md— snapcn + Remotion に適応されたモーションデザイン原則。references/anti-patterns.md— 一般的な生成ミスとその修正方法。