snapcn

snapcn

Remotion の動画向けコピー＆ペースト用コンポーネントです。コンポーネントは shadcn でインストールされ、components/snap-cn/ に配置されます。コードは自分で管理できます。

インストール

前提条件：Remotion プロジェクト（npx create-video@latest）。

# Add any component (namespaced shadcn registry)
shadcn add @snapcn/text-reveal

# Component lands at components/snap-cn/text-reveal.tsx

@snapcn/<name> が標準の名前空間付き形式です。名前空間は shadcn レジストリディレクトリに含まれているため、registries の項目は必要ありません。通常のレジストリ 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 を確認してください。ここには、各カテゴリ別にまとめたルーター表があり、コンポーネントごとに「用途」／「非推奨の用途」が示されています。内容を確認して候補を選び、必要な 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 で提供されています。詳細は後述）。シェーダー、単独のトランジションコンポーネント、チャートやソーシャルカードのコンポーネントはなく、shadcn プリミティブも input と caret 以外にはありません。シーンに必要なものがある場合は、自分で作成してください（references/anatomy.md §1）。この表にない名前で shadcn add を実行する指示は出さないでください。references/components/index.md には、現在はインストールできない旧名称が記載されています。

コンポーネントのパターン

ティアによって規約が異なるため、プリミティブにアニメーションティアのプロパティがあると思い込まないでください。

アニメーション層（snapcn）

• コンポーネントごとに名前付きの Props インターフェースを使用します（例：TextRevealProps）。
• speed?: number — 全体の時間倍率（デフォルトは 1）で、frame * speed として適用されます。
• テキストコンポーネント：fontSize、color、fontWeight。
• シーン間のトランジションはこのレジストリには含まれません — <TransitionSeries> 内で Remotion 独自の @remotion/transitions（slide、wipe、fade、flip）を使用してください。
• ルート要素に className?: string を指定できます。

UI プリミティブ（snap-cn-ui）

• speed ベースではなく、状態ベースです：state（例："open" / "closed"）、style、variant、 size、theme?: Partial<SnapCnTheme>。
• 開閉／アクティブ状態は、タイムライン（キーフレーム付きプリセット）の純粋関数です。
• モーダルレイヤーのプリミティブ（dialog、alert-dialog、drawer）はトリガー要素と組み合わせてください — 各コンポーネントの例を参照してください。

アニメーション 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 } });

// Deterministic randomness (NEVER 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 → tokens）の範囲内に収めてください。

デザインのデフォルト — 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 固有）

• トランジションコンポーネントは含まれていません — シーンの切り替えには snapcn コンポーネントではなく、@remotion/transitions の <TransitionSeries.Transition> を使います。text-swap が切り替えるのはシーンではなく、行です。
• ターミナルのスクロールは即時です — スクロールにはステップ関数の translateY を使い、スプリングやイージングは適用しないでください。
• 分割レイアウトには overflow: hidden を指定します — 幅のアニメーション中にコンテンツが崩れるのを防ぎます。
• カーソルの点滅は決定論的です — インターバルではなく、Math.floor(frame / 15) % 2 === 0 を使用します。
• 静的ファイルは public/ に置きます — インポートではなく、staticFile('cursor.svg') で読み込みます。
• ソーシャルカードはオフラインでレンダリングされます — avatarUrl="" / coverUrl="" の場合はグラデーションが代わりに表示され、フェッチは行われません。

Math.random() を使わない、setInterval を使わない、top／left ではなく transform をアニメーションさせる、レンダリング前にフォントを読み込む、といった Remotion の一般的なルールは、このスキルではなく Remotion 独自のスキルに記載されています： npx skills add remotion-dev/skills。

動画の構成

コンポーネントを並べるだけではなく、ひとつのストーリーを構成しましょう。動画全体の作成を依頼された場合（「製品デモを作って」「変更履歴動画を作って」「ランディングページ用のイントロを作って」など）：

1. 戦略を決める — 既成のテンプレートを使うか、コンポーネントを組み合わせるか、新しいコンポーネントを作るかを決めます。references/anatomy.md §1 を参照してください。
2. ビートに沿って構成する — 製品デモは「フック → ポジショニング → 製品紹介 → 特徴 → 裏付け → CTA」の順です（最後の2つは省略可能）。references/anatomy.md §2 を参照してください。
3. レシピを使う — references/archetypes/index.md から、アーキタイプごとの構成方法を確認できます。内容の取り決め（推測 → 質問 → プレースホルダー）、尺のバリエーション、ビートとコンポーネントの対応、実例付きの <TransitionSeries> の骨組みが記載されています。
4. references/components/index.md からビートごとのコンポーネントを選び、vibe タグをブランドに合わせます。また、それぞれの <Sequence durationInFrames> は自然な長さに応じて設定します。
5. 品質基準を確認する — アクセントカラーは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 など）、テンプレート、そしてエージェントがレジストリを検索し、各コンポーネントの実際の props を確認できる snapcn MCP を利用できます。components.json にキーを設定すれば（https://snapcn.dev/account?ref=skill-snapcn で3行を追加）、Pro コンポーネントも無料のコンポーネントと同じようにインストールできます。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 — 動画全体の構成：戦略（テンプレート／組み合わせ／新規作成）、製品デモのビート、品質基準（良い例と粗悪な例）。
• references/archetypes/index.md — アーキタイプごとの構成レシピへの案内（製品デモの主力版＋変更履歴、機能発表、オープンソース紹介、CLI ツールのデモ、お客様の声を集めた動画、年間振り返り、料金発表、ロゴバンパー）：内容の取り決め、尺のバリエーション、ビートとスロットの対応表。
• references/components/index.md — コンポーネント一覧のルーター表（カテゴリ別に分類し、「用途」と「避ける用途」を記載）。各コンポーネントの props 全体、使用例、使い方と避けるべき使い方については、references/components/<name>.md を開いてください。
• references/design.md — 粗悪なデザインを避けるためのデフォルト（推奨／回避）とデザイントークン（パレット、フォント、キャンバス）。
• references/motion-principles.md — snapcn と Remotion に合わせたモーションデザインの原則。
• references/anti-patterns.md — 生成時によくあるミスと、その修正方法。