remocn

remocn

Remotion 動画向けのコピー＆ペースト可能なコンポーネントです。コンポーネントは shadcn でインストールすると、 components/remocn/ に配置されます。コードの所有権はあなたにあります。

カタログは remocn.dev にあります

このスキルにはコンポーネントカタログのコピーは含まれていません。コンポーネントは約 240 個あり、内容も変わるため、同梱したコピーは気付かないうちに古くなります。代わりに最新のドキュメントを参照してください。

コンポーネントの検索は毎回ここから始めてください：

https://remocn.dev/llms-components.txt

カテゴリごとに 1 つの表があり、インストール可能なすべてのコンポーネントが掲載されています。各行には Use for / Avoid for、自然な長さ、雰囲気、ティア、依存関係、詳細ページへのリンクが記載されています。内容を確認して候補を絞り込み、その候補のページだけを取得してください。

コンポーネントの詳細リファレンス — 説明付きの props、実例、使用上の注意と避けるべき用途は、URL の末尾に .md を付けたドキュメントで確認できます：

https://remocn.dev/docs/typography/blur-out-up.md
https://remocn.dev/docs/transitions/whip-pan.md
https://remocn.dev/docs/ui/components/dialog.md

インデックスには各コンポーネントの正確な URL が記載されています。名前からセクションを推測しないでください。複数のコンポーネントは、名前からは分かりにくい場所にあります。

利用可能な環境の機能（ウェブ取得ツール、curl、WebFetch）を使って取得してください。ネットワークが利用できない場合は、その旨を伝えて終了してください。記憶を頼りに props、デフォルト値、時間を作り出したり、読んでいないコンポーネントで代用したりしないでください。誤った prop 名はビルドに失敗し、作り出した時間はアニメーションを気付かないうちに途中で切ります。

インストール

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

shadcn add @remocn/blur-out-up

@remocn/<name> は標準の名前空間付き形式です（components.json の registries で設定します）。通常のレジストリ URL https://remocn.dev/r/<name>.json も使用できます。

依存関係は自動でインストールされます

多くのコンポーネントは registryDependencies を通じてほかのコンポーネントを取り込みます。shadcn はそれらも依存関係としてインストールします。 たとえば、shadcn add @remocn/typewriter を実行すると、@remocn/remocn-ui と @remocn/caret も取り込まれます。

• @remocn/remocn-ui は共有コアライブラリです（タイムライン折りたたみフック、テーマコンテキスト、色計算）。 ほとんどの UI プリミティブはこれに依存します。直接インストールすることはほとんどありません。

2 つのティア

remocn には 2 種類のコンポーネントがあり、API が異なります：

• アニメーションティア（remocn）— テキストアニメーション、トランジション、背景、UI ブロックのシミュレーション、 ブランド／ソーシャルカード、完全なコンポジション。フレーム駆動です。共通 props：speed（時間倍率）、 テキストの場合は fontSize、color、fontWeight。
• UI プリミティブ（remocn-ui）— タイムライン駆動の shadcn スタイルのプリミティブ（button、dialog、 select、command-menu、tooltip など）。状態ベースの props（state、style、variant、theme）を使います。 speed prop はありません。 @remocn/remocn-ui を基盤としています。

インデックスの Tier 列を見れば、ページを開く前にどちらか分かります。

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

規約はティアによって異なります。アニメーションティアの props がプリミティブにも使えると思い込まないでください。

アニメーションティア（remocn）

• コンポーネントごとに名前付きの Props インターフェースがあります（例：BlurOutUpProps）。
• speed?: number — グローバルな時間倍率（デフォルトは 1）。frame * speed として適用されます。
• テキストコンポーネント：fontSize、color、fontWeight。
• トランジション：小文字のファクトリー関数（例：whipPan(props)）が TransitionPresentation を返します。presentation を介して TransitionSeries.Transition に渡し、linearTiming／springTiming で速度を調整します。
• ルートに className?: string を指定できます。

トランジションに分類されたものがすべてプレゼンテーションとは限りません。slide-swap と spring-settle は scenes 配列を受け取り、タイムライン全体を管理するシーンシーケンサーです。該当する種類は各ページに記載されています。

UI プリミティブ（remocn-ui）

• 状態ベースであり、speed ベースではありません：state（例："open"／"closed"）、style、variant、 size、theme?: Partial<RemocnTheme>。
• 開いた状態／閉じた状態／アクティブ状態は、タイムライン（キーフレーム付きプリセット）によって純粋関数として決まります。
• モーダルレイヤーのプリミティブ（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}>
  <Typewriter text="npm install remocn" />
</Sequence>

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

キャンバスとタイミング

• キャンバスの標準： 1280×720 @ 30fps。コンポーネントはこのサイズに合わせて配置されています。
• Length はコンポーネント自体の動きの長さであり、ビート全体の長さではありません。 トランジションの場合は linearTiming / springTiming に渡す値です。それ以外の場合は、アニメーションが終了するフレームです。Sequence の最小値として扱い、要素が落ち着いた後も画面に残す場合は保持時間を追加してください。state-driven は、コンポーネントが state プロパティに基づいて描画され、独自の再生時間を持たないことを意味します。
• トーンの一致： 各項目には vibe タグ（tech/premium/data/clean/playful/social/paper）が付いています。ブランドに合った vibe のコンポーネントを選んでください。paper はストップモーションのキットです。1秒あたり約10ポーズの量子化されたクロック、手書き文字、インクを特徴とします。これらのコンポーネントは同じ世界観で構成されているため、滑らかな動きの階層とは組み合わせず、相互に組み合わせてください。

デザインのデフォルト — AI らしい粗雑さを避ける

独自に追加する要素（テキスト、シーンの装飾、カードなど。組み込みコンポーネントは除きます）は、控えめにしてください。デフォルトの文字間隔、文頭のみ大文字の表記、単色のテキスト、控えめな1pxの浮き上がりを基本とし、装飾的な文字間隔、すべて大文字の表記、グラデーションのテキスト塗り、光彩の影は使わないでください。効果そのものが本質であるコンポーネント（tracking-in、ソーシャルカードのグラデーション、デザインされた浮き上がりなど）から、そうした特徴を取り除かないでください。

詳しい例、デザイントークン、モーションの原則、アンチパターンの一覧は Craft セクションにあります。

https://remocn.dev/docs/craft/design-defaults.md
https://remocn.dev/docs/craft/motion-principles.md
https://remocn.dev/docs/craft/anti-patterns.md

注意点（remocn 固有）

• ターミナルのスクロールは瞬時に行われます — スクロールにはステップ関数の translateY を使い、スプリングやイージングは使わないでください。
• 分割レイアウトでは overflow: hidden を使います — 幅のアニメーション中にコンテンツが崩れるのを防ぎます。
• カーソルの点滅は決定論的です — インターバルではなく、Math.floor(frame / 15) % 2 === 0 を使います。
• 静的ファイルは public/ に置きます — インポートではなく、staticFile('cursor.svg') で読み込みます。
• ソーシャルカードはオフラインで描画されます — avatarUrl="" / coverUrl="" はグラデーションにフォールバックします。フェッチは行いません。

remotion-best-practices スキルには、Remotion の一般的なルール（Math.random() を使わない、setInterval を使わない、top / left ではなく transform をアニメーションさせる、描画前にフォントを読み込む）が記載されています。

Remotion スキルと併用する

remocn は Remotion の上に重ねるコンポーネント層であり、Remotion のガイドをもう一つ提供するものではありません。Remotion 独自のスキル（remotion-create、remotion-render、remotion-best-practices）がインストールされている場合は、Remotion の仕組み（プロジェクトのセットアップ、アニメーション API、描画、設定）についてはそれらに任せ、このスキルは画面に何を表示するか（どの remocn コンポーネントを使うか、実行時間をどれくらいにするか、ビートをどうつなげるか）に使ってください。ここや回答で Remotion API のドキュメントを繰り返さず、それらのスキルまたは remotion.dev を案内してください。

動画を構成する

コンポーネントを並べるのではなく、ひとつのストーリーを構成しましょう。「製品デモを作って」「変更履歴動画を作って」「ランディングページ用のイントロを作って」など、動画全体の作成を依頼された場合に、remocn プラグインの video スキルがインストールされていれば、それに従ってください。以下のブリーフ → ストーリーボード → インストール → 構成 → レビューという一連のフローを実行し、結果を Remocn Studio に渡します。そうでない場合は、次の手順に従います。

1. 戦略を決める — 既成テンプレート、コンポーネントから構成、新しいコンポーネントの作成のいずれかを選びます。references/anatomy.md §1 を参照してください。
2. ビートに従う — 製品デモは、Hook → Positioning → Product reveal → Features → Proof → CTA の順です（最後の2つは省略可能です）。references/anatomy.md §2 を参照してください。
3. レシピを使う — references/archetypes/index.md から、アーキタイプごとの制作手順を確認できます。内容の決め方（推測 → 質問 → プレースホルダー）、長さのバリエーション、ビートからコンポーネントへの割り当て、および <TransitionSeries> の実例を含むひな形が記載されています。
4. 各ビートのコンポーネントを選ぶ — https://remocn.dev/llms-components.txt から選びます。vibe タグをブランドに合わせ、上記のキャンバスとタイミングに従って Sequence の尺を割り当てます。
5. 音声にキャプションを付ける — 動画にナレーションまたはトーキングヘッドがある場合は、文字起こしを行い（https://remocn.dev/docs/captions/getting-started/get-a-transcript.md）、コンポーネントインデックスのキャプション表から caption-* を選び、https://remocn.dev/docs/captions/getting-started/positioning.md に従って配置します。音声がなく、画面上に表示するために書かれたテキストは、タイポグラフィとして扱います。
6. 品質基準を確認する — アクセントカラーは1色、キネティックタイポグラフィは文頭のみ大文字、コンテンツは実際のものを使い、グローのハローや機能の羅列は避けます。references/anatomy.md §3 を参照してください。

リファレンス

このスキルに同梱 — コンポーネントごとに変わらない判断基準です。

• references/anatomy.md — 動画全体の構成：戦略（テンプレート／構成／新規作成）、製品デモのビート、良質な動画と粗雑な動画の品質基準。
• references/archetypes/index.md — アーキタイプ別の制作レシピへの案内（製品デモのフラッグシップ版と変更履歴、機能発表、OSS の紹介、CLI ツールのデモ、推薦コメント集、年間振り返り、価格発表、ロゴの締めくくり）：内容の決め方、長さのバリエーション、ビートからスロットへの対応表。

remocn.dev から取得 — コンポーネントに関する情報です。

• https://remocn.dev/llms-components.txt — コンポーネントインデックス。必ずここから始めてください。
• https://remocn.dev/docs/<section>/<name>.md — 各コンポーネントの詳細なリファレンス。
• https://remocn.dev/docs/craft/design-defaults.md — 粗雑さを避けるための既定値とデザイントークン。
• https://remocn.dev/docs/craft/motion-principles.md — remocn 向けに調整されたモーションの原則。
• https://remocn.dev/docs/craft/anti-patterns.md — よくある生成ミスとその修正方法。
• https://remocn.dev/llms.txt — 他の情報が必要な場合に使う、ドキュメント全体のインデックス。