Imgcli

Imgcli は何をしますか？

Remotion ビデオ向けのコピペコンポーネント。コンポーネントは shadcn でインストールされ、components/imgcli/ に配置されます — あなたがコードを所有します。

インストール

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

# Imgcli レジストリからインストール
npx shadcn@latest add https://imgcli.com/r/text-reveal.json

# コンポーネントは components/imgcli/text-reveal.tsx に配置されます

短い @imgcli/<name> 形式を使うには、components.json で @imgcli を https://imgcli.com/r/{name}.json にマッピングします。プロジェクトのセットアップについてはインストールガイドを参照してください。

依存関係は自動インストール

多くのコンポーネントは registryDependencies 経由で他のコンポーネントを引き込みます — shadcn が推移的にインストールします。例えば、search-typing をインストールすると、snap-cn-ui、input、caret も一緒にインストールされます。

• @imgcli/snap-cn-ui は共有コアライブラリです（timeline-fold フック、テーマコンテキスト、カラー演算）。ほとんどの UI プリミティブがこれに依存します。直接インストールすることはほとんどありません。

2つのティア

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

• アニメーションティア（シーンとアニメーション） — テキストアニメーション、トランジション、背景、UIブロックシミュレーション、ブランド/ソーシャルカード、フルコンポジション。フレーム駆動。共通プロパティ：speed（時間倍率）、テキスト用：fontSize、color、fontWeight。
• UI プリミティブ（snap-cn-ui） — タイムライン駆動の shadcn スタイルプリミティブ。現在出荷されているのは input と caret の2つ。状態ベースのプロパティ（state、style、size、theme） — 開いている/入力中の状態はタイムラインの純関数です。speed プロパティはありません。 @imgcli/snap-cn-ui 上に構築されています。

コンポーネントカテゴリ

構築しているものに応じて選択します。カタログは references/components/ 以下に1コンポーネント1ファイルで分割されています。references/components/index.md から始めてください — これらのカテゴリごとにグループ化され、コンポーネントごとに「使用する用途」/「避ける用途」が示されたルーターテーブルです。それをスキャンして候補を選び、必要な references/components/<name>.md ファイルだけを開いてください（全プロパティ、使用例、すべての使用/非使用ノート）。すべてのファイルを読む必要はありません。

カテゴリ	ティア	コンポーネント
テキスト & タイトル	アニメーション	text-reveal、type-morph、text-swell、text-highlight、text-swap、text-build、text-rewrite、text-select、word-flip、punch-lines、word-gather、word-wheel
キャプション	アニメーション	word-captions、karaoke-captions
AI チャット入力	アニメーション	prompt-send、search-typing、prompt-zoom、answer-stream、answer-highlight、agent-steps
スクリーン & デバイス	アニメーション	phone-frame、laptop-frame、terminal-simulator、screen-recording、cursor-track
ロゴ	アニメーション	logo-assemble、logo-flicker、logo-collapse、logo-drift、block-wordmark、wordmark-cut
シーン	アニメーション	announce-title、hero-launch、orbit-gallery、moodboard-reveal、status-cycle、count-grid、roster-grant、orb-swarm、reel-collage、card-rail、cut-lockup、bloom-lockup、gather-lockup、sky-lockup
ソーシャルプルーフ	アニメーション	follower-rush、channel-thread
エフェクト	アニメーション	pulsing-border
UI プリミティブ	snap-cn-ui	input、caret（+ 共有コアライブラリ snap-cn-ui）

インストール可能な名前を確認するにはライブコンポーネントインデックスを使用してください。以下のリファレンスには古い名前とその置き換えが含まれています。

コンポーネントパターン

慣例はティアによって異なります — プリミティブにアニメーションティアのプロパティを想定しないでください。

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

• コンポーネントごとに名前付き 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 を参照してください。

落とし穴（Imgcli 特有）

• トランジションコンポーネントは出荷されません — シーンの変更は Imgcli コンポーネントではなく、@remotion/transitions の <TransitionSeries.Transition> を使用します。text-swap は行を入れ替えるもので、シーンではありません。
• 端末のスクロールは瞬時 — ステップ関数の translateY で、スクロールにスプリングやイージングは使いません。
• 分割レイアウトでは overflow: hidden — 幅アニメーション中のコンテンツの破損を防ぎます。
• カーソルの点滅は決定論的 — Math.floor(frame / 15) % 2 === 0 で、インターバルは使いません。
• 静的ファイルは public/ に配置 — インポートではなく staticFile('cursor.svg') でロードします。
• ソーシャルカードはオフラインでレンダリング — avatarUrl="" / coverUrl="" はグラデーションにフォールバックし、フェッチは行いません。

一般的な Remotion ルール（Math.random() 禁止、setInterval 禁止、top/left ではなく transform をアニメーション、レンダリング前にフォントをロード）は、このスキルではなく、Remotion 自身のスキルに含まれています：npx skills add remotion-dev/skills。

ビデオの構成

コンポーネントをただ並べるのではなく — 一つのストーリーを構成してください。フルビデオ（「プロダクトデモを作って」「チェンジログ動画」「ランディングページのイントロ」）の作成を求められた場合：

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. 各ビートのコンポーネントを references/components/index.md から選択；vibe タグをブランドに合わせ、各 <Sequence durationInFrames> の予算をその自然な長さに合わせます。
5. 品質基準を確認 — アクセント1つ、文頭大文字のキネティックタイポグラフィ、実際のコンテンツ、グローのハローなし、機能リストの列挙なし、タイポグラフィの背後に装飾的なグラデーションウォッシュなし。references/anatomy.md §3 を参照。

ワークフロー

ビデオ全体には、利用可能な場合は対応するワークフロースキルを使用してください。それぞれが Imgcli コンポーネントをビートごとに構成し、結果を Remotion で確認します。エージェントガイドでは、インストールと公開コンポーネントの発見について説明しています。

• remotion-launch-video — ローンチフィルム、発表、Product Hunt / X プロモーション用。
• remotion-product-demo — 実際のスクリーンレコーディングを使ったウォークスルー、CLIおよびAIアプリのデモ用。
• remotion-motion-graphics — キネティックタイポグラフィ、ロゴスティング、統計、短いオープナー用。
• remotion-kinetic-typography — アニメーションテキストとタイトルカード用。
• remotion-logo-animation — ロゴのリビール、イントロおよびアウトロスティング用。
• remotion-explainer-video — バーンインキャプション付きのナレーション解説用。

リファレンス

• references/anatomy.md — フルビデオの構成：戦略（テンプレート/コンポーネントから/新規ビルド）、プロダクトデモのビート、良品対スロップの品質基準。
• references/archetypes/index.md — アーキタイプごとのビルドレシピへのルーター（プロダクトデモ旗艦 + チェンジログ、機能発表、OSSショーケース、CLIツールデモ、 testimonialリール、イヤーインレビュー、価格発表、ロゴバンパー）：コンテンツ契約、期間バリアント、ビート→スロットマップ。
• references/components/index.md — ルーターテーブル（全コンポーネント、カテゴリ別にグループ化、「使用する用途」/「避ける用途」付き）。1つのコンポーネントの全プロパティ、使用例、使用/非使用ノートについては references/components/<name>.md を開いてください。
• references/design.md — アンチスロップデザインのデフォルト（使用/避ける例）+ デザイントークン（パレット、フォント、キャンバス）。
• references/motion-principles.md — Imgcli + Remotion に適合したモーションデザイン原則。
• references/anti-patterns.md — よくある生成ミスとその修正。