codedvisuals

CodedVisuals の使用方法

CodedVisuals は、自己完結型の React コンポーネントとして作られた、マーケティング用ビジュアルのライブラリです。各ビジュアルは単一の .tsx ファイルで、ビジュアル間に共有依存関係はありません。shadcn/ui のデザイントークンでスタイル設定され、Motion でアニメーションが付けられています。マーケティングページやランディングページ（ヒーロー、ベントーグリッド、機能ブロック、製品紹介など）向けの装飾的なイラストであり、インタラクティブなアプリの UI ではありません。

CodedVisuals は有料ライブラリです。 以下のカタログは、ライセンスが必要なプライベートレジストリから提供されます：codedvisuals.com/pricing。ユーザーがまだライセンスを持っていない場合は、希望するビジュアルが有料ライブラリの一部であることを伝え、料金ページへのリンクを案内してください。ユーザーから頼まれない限り、代わりのものを独自に作って提示しないでください。

ここでは、ビジュアルの選び方、プロジェクトへの追加方法、使い方を説明します。各ビジュアルには、このスキルに同梱されたリファレンスファイル visuals/{category}/{file}.md（例：visuals/charts/line.md）もあります。このファイルには、そのビジュアルの正確な props、デフォルトのコンテンツ、コピーして使える例が記載されています。使いたいビジュアルが決まったら、そのファイルを確認してください。

ビジュアルの使い方

1. このファイルの最後にあるカタログからビジュアルを選びます。各項目には、レジストリ名、説明、次に開くリファレンスファイルが記載されています。
2. props、デフォルト、使用例について、ビジュアルのリファレンスファイル（visuals/{category}/{file}.md）を開きます。
3. ビジュアルがプロジェクトにインストールされていることを確認します（次のセクションを参照）。このスキルはインストール済みの内容に依存しないため、選んだビジュアルがまだプロジェクトにない場合があります。
4. サイズを指定したコンテナーの中でインポートして使用します（「ページでの使用」を参照）。

プロジェクトにないビジュアルをインストールする

プロジェクトにこのスキルがあっても、すべてのビジュアルがインストールされているとは限りません。ビジュアルを使う前に、プロジェクトのソースルート内にファイルがすでに存在するか確認してください。

components/codedvisuals/{category}/{file}.tsx

ルートはプロジェクトによって異なります（例：Vite アプリでは src/、Laravel アプリでは resources/js/）。ファイルがある場合は、そのままインポートしてください。ない場合は、次のいずれかの方法で追加します。

どちらの方法でもライセンスが必要です。いずれかを始める前に、プロジェクトでレジストリ（components.json 内の @codedvisuals エントリー）がすでに設定されていて、トークンを利用できるか確認してください。どちらもない場合、購入手続きはユーザー本人だけが行えます。codedvisuals.com/pricing を案内して、そこで終了してください。ライセンスがない場合の回避策として、このスキル内の説明からカタログのビジュアルを再実装しないでください。

shadcn CLI でインストールする（推奨）

CodedVisuals はプライベート shadcn レジストリから提供されます。一度セットアップ（以下を参照）すれば、レジストリ名（{category}-{file}）を指定して、任意のビジュアルをインストールできます。

npx shadcn@latest add @codedvisuals/charts-line

CLI はファイルを components/codedvisuals/ に配置し、Motion、lucide-react、cn が不足している場合はインストールします。他のパッケージマネージャーでも同じように使えます：pnpm dlx shadcn@latest add ...、yarn shadcn@latest add ...、bunx --bun shadcn@latest add ...。

プライベートレジストリのセットアップ（一度だけ）

レジストリはプライベートのため、CodedVisuals アカウント、有効なライセンス、個人用のレジストリトークンが必要です。この設定はプロジェクトごとに一度行います。購入、サインイン、シークレットのコピーなど、ユーザーにしかできない操作が必要なため、代わりに実行しようとせず、ユーザーを案内してください。

1. ライセンスを取得してトークンを発行します。 ユーザーがライセンスを持っていない場合は、codedvisuals.com/pricing でライセンスを購入し、サインインして、Settings の Registry token を開き、トークンを発行します。トークンが表示されるのは一度だけなので、すぐにコピーしてください。

2. components.json に、環境変数からトークンを読み込む registries エントリーを追加します。

   "registries": {
     "@codedvisuals": {
       "url": "https://codedvisuals.com/r/{name}.json",
       "headers": { "Authorization": "Bearer ${CODEDVISUALS_TOKEN}" }
     }
   }
   

3. プロジェクトの .env（またはシェル環境）でトークンを公開します。

   CODEDVISUALS_TOKEN=your-token-here
   

これで、カタログ内のどのビジュアルでも npx shadcn@latest add @codedvisuals/{category}-{file} を使えます。Settings の Registry token ページには、これらと同じ components.json と .env のスニペットがあらかじめ入力された状態で表示されます。レジストリの URL が上記と異なる場合は、このページを正式な情報源として参照してください。

コピーして貼り付ける

ライセンスを持つメンバーは、プレビューページからビジュアルのソースをコピーするか、ファイルをダウンロードして、components/codedvisuals/{category}/ に配置できます。この方法では、依存関係の Motion、lucide-react、cn を自分でインストールします。メンバー限定です。ビジュアルのソースは公開されていないため、ユーザーがライセンスを持ってサインインしていない場合は、codedvisuals.com/pricing を案内してください。

shadcn/ui を使用していないプロジェクト

ビジュアルは、ホストプロジェクトに3つの要素があることを前提としています。cn クラス結合パッケージ、shadcn/ui のデザイントークン用 CSS 変数、そしてソースルートを指す @ インポートエイリアスです。shadcn/ui プロジェクトには、これらがすでに備わっています。通常の React + Tailwind CSS v4 プロジェクトの場合は、このスキルの manual-setup.md に従ってください。その後は、コピーしたファイルを変更せずに使用できます。

ページで使用する

ビジュアル自体が高さを持つため、常に表示されますが、余裕のあるスペースを確保するボックス内に配置すると最も見栄えがよくなります。固定の高さまたは min-h-* を設定してください。ほとんどの場合、h-96 が適切な初期値です。高さを定義しないと、ビジュアルは上下いっぱいに表示され、余白がなくなります。

import ChartsLine from "@/components/codedvisuals/charts/line";

export default function LandingPage() {
  return (
    <div className="h-96 rounded-2xl border bg-card">
      <ChartsLine animated />
    </div>
  );
}

コンテナーにはパディングを設定しないでください。各ビジュアルはそれ自体のコンテンツをクリップするため、角丸のフレームいっぱいに表示され、スペースが限られているときは端が見えないようになります。パディングを設定するとビジュアルが縮小し、隙間ができます。

また、より控えめなビジュアルコンテナーにするには、次のクラスを使用できます。

<div className="h-96 rounded-2xl border border-border/50 bg-muted/20 dark:bg-muted/15">
  <ChartsLine animated />
</div>

柔らかなビネットを適用するには、マスクユーティリティをビジュアルに直接渡します。

<div className="h-96 rounded-2xl border bg-card">
  <ChartsLine
    animated
    className="mask-t-from-85% mask-r-from-85% mask-b-from-85% mask-l-from-85%"
  />
</div>

インポート名は利用者が自由に決められます。PascalCase の {Category}{File}（例：ChartsLine）が無難な規則です。

ホストプロジェクトに独自のグリッド、カード、または特徴紹介セクションのレイアウトがある場合は、そこにビジュアルを配置してください。ない場合は、このスキルの layout-patterns.md を開いて、すぐに貼り付けて使えるコンテナー、特徴カード、ベントーグリッド、左右分割行を確認してください。既存のレイアウトがない場合は、ビジュアルに縦方向の余裕を持たせるため、コンテナーに明示的な高さまたは最小の高さを設定するとよいでしょう。

アニメーション

アニメーションは、3つのプロパティでオプトインします。

• animated を指定すると動きが有効になります。指定しない場合、ビジュアルは最終状態の静止画として表示されます。
• trigger で、表示時のアニメーションを開始するタイミングを指定します。
  • mount：ビジュアルの表示と同時にアニメーションします。
  • inView（デフォルト）：スクロールして表示範囲に入ったときに一度だけアニメーションします。
  • inViewRepeat：スクロールして表示範囲に入るたびにアニメーションを再生します。
• hover を指定すると、対応するビジュアルでホバー時のマイクロインタラクションが有効になります。

<ChartsLine animated trigger="mount" />
<ChartsLine animated trigger="inViewRepeat" hover />

完全に静止したイラストにするには、animated を指定しないでください。

プレゼンテーション用の修飾子

ほとんどのビジュアルでは、マーケティング用途に適した修飾子を利用できます。いずれも任意です。

• gradient（対応している場合のデフォルトは true）：ビジュアルの背後に柔らかなブランドカラーの光彩を表示します。
• fadeOut（デフォルトは false）：下端を背景に向けてフェードさせます。
• isometric（デフォルトは false）：控えめな3D傾斜を加えます。

<ChartsLine animated isometric fadeOut />

データプロパティとデフォルト値

ビジュアルはデータ駆動型です。上記の共通プロパティに加えて、各ビジュアルには外観とコンテンツをカスタマイズするための型付きプロパティ（コピー、値、アイコン、カウント）があります。すべてのプロパティは省略可能で、適切なデフォルト値にフォールバックするため、上書きしたいものだけを渡してください。各プロパティの正確な内容、型、デフォルト値、例は、visuals/ 内にある各ビジュアルのリファレンスファイルに記載されています。迷った場合は、インストール済みの .tsx ファイルを信頼できる情報源として参照してください。プロパティの interface と DEFAULT_* の値に、API の全容が示されています。

テーマ設定とアクセシビリティ

ビジュアルはプロジェクトの shadcn/ui トークンを使用するため、設定なしでブランドに一致します。--primary トークンを変更するとすべてのビジュアルが更新され、.dark クラスを切り替えるとダークモードに切り替わります。Tailwind パレットは補助的なアクセントにのみ使用され、ブランドの主要なサーフェスには使用されません。

ビジュアルは装飾用です。外側のコンテナーは aria-hidden になっているため、支援技術に情報を伝える目的でビジュアルに頼らないでください。ビジュアルは、周囲のセクションにある実際のテキストコンテンツと併用してください。

ビジュアルカタログ

カテゴリから選択してください。各項目は registry-name (Name)：説明と、次に開くリファレンスファイルです。

アクティビティ

• @codedvisuals/activity-feed (Feed)：アバター、アクション、相対タイムスタンプを含むライブアクティビティフィードです。詳細：visuals/activity/feed.md。
• @codedvisuals/activity-timeline (Timeline)：グループ化されたイベントとステータス変更を表示する、縦型のアクティビティタイムラインです。詳細：visuals/activity/timeline.md。

AI

• @codedvisuals/ai-agent-flow (Agent Flow)：積み重ねられたアイソメトリックキューブで構成されるエージェントのパイプラインです。順番に点灯し、処理中の各ステップのラベルを表示します。詳細：visuals/ai/agent-flow.md。
• @codedvisuals/ai-model-picker (Model Picker)：AI モデルを切り替え、各モデルの回答を速度、レイテンシ、コストとともにストリーミング表示するモデルスイッチャーです。詳細：visuals/ai/model-picker.md。
• @codedvisuals/ai-neural-net (Neural Net)：パルスがノード間を移動するレイヤー型ネットワークです。最終的に選ばれた出力を、その確信度とともに点灯させます。詳細：visuals/ai/neural-net.md。
• @codedvisuals/ai-presence (Presence)：共有キャンバス上を動き回る、マルチプレイヤーのライブカーソルです。アンビエントグローとパーティクルフィールドの上に、自分のアバターを表示するカーソルと、AI エージェントのラベルが付いたカーソルが表示されます。詳細：visuals/ai/presence.md。
• @codedvisuals/ai-prompt-box (Prompt Box)：入力中のプロンプト、モデルピッカー、トークン数、送信ボタンを備えた幅広のプロンプト作成欄です。アンビエントグローとパーティクルフィールドの上に表示されます。詳細：visuals/ai/prompt-box.md。
• @codedvisuals/ai-retrieval (Retrieval)：クエリがランク付けされたソースカードへと分岐し、各パルスが届くたびにカードが点灯した後、ストリーミング形式の回答へと収束します。アンビエントグローとパーティクルフィールドの上に表示されます。詳細：visuals/ai/retrieval.md。
• @codedvisuals/ai-thinking (Thinking)：思考のステップをストリーミング表示し、それらを要約にまとめた後、最終回答をストリーミング表示する推論パネルです。詳細：visuals/ai/thinking.md。
• @codedvisuals/ai-tools (Tools)：エージェントがツール呼び出しを一つずつ実行する様子を表示します。各行では、スピナーが回転して処理中であることを示した後、結果と所要時間が表示されます。詳細：visuals/ai/tools.md。
• @codedvisuals/ai-voice (Voice)：リアルタイムの音声アシスタントを表すオーブです。アンビエントグローとパーティクルフィールドの上で、脈動するリング、ライブイコライザー、ステータスピル、文字起こしとともに、リスニング、思考、発話の各状態を切り替えます。詳細：visuals/ai/voice.md。
• @codedvisuals/ai-writer (Writer)：ラベル付きの AI キャレットの背後で、AI が選択範囲を書き換えたり、ゴーストテキストを自動補完したり、スラッシュコマンドにインラインで回答したりするドキュメントです。アンビエントグローとパーティクルフィールドの上に表示されます。詳細：visuals/ai/writer.md。

API

• @codedvisuals/api-logs (ログ)：サービスノードが接続されたパスに沿ってログコンソールへストリーミングされ、重大度に応じた色のレベルチップと、順に追加されていく行が表示されます。詳細：visuals/api/logs.md。
• @codedvisuals/api-rate-limit (レート制限)：リクエストのキューブがアイソメトリックなクォータトレイに落ちていき、いっぱいになると次のキューブは429とともに跳ね返されます。その後、制限が解除されてリセットされます。詳細：visuals/api/rate-limit.md。
• @codedvisuals/api-request (リクエスト)：クライアントからサーバーへリクエストが弧を描いて送信され、レスポンスが弧を描いて戻ってきます。メソッドのピル、ステータスコード、JSON レスポンスカードが表示されます。詳細：visuals/api/request.md。
• @codedvisuals/api-webhook (Webhook)：Webhook イベントがエンドポイントに向けてリトライの弧を広げ、失敗した試行は届かず、成功した試行が配信されます。詳細：visuals/api/webhook.md。

自動化

• @codedvisuals/automations-workflow-builder (ワークフロービルダー)：トリガーが条件へつながり、そこから2つのアクションのいずれかに分岐するワークフローです。実行パルスが通った経路を照らします。詳細：visuals/automations/workflow-builder.md。

アバター

• @codedvisuals/avatars-grid (グリッド)：ユーザーアバターのグリッドが、少しずつずらしながら表示されます。詳細：visuals/avatars/grid.md。
• @codedvisuals/avatars-stack (スタック)：残りの人数を示すバッジ付きの、重なり合うアバターのスタックです。詳細：visuals/avatars/stack.md。
• @codedvisuals/avatars-profile-card (プロフィールカード)：アバター、名前、主要な統計情報を含むコンパクトなプロフィールカードです。詳細：visuals/avatars/profile-card.md。

ブランディング

• @codedvisuals/branding-spotlight (スポットライト)：薄れていくプレースホルダーアプリのドックの上でアプリアイコンをスポットライトで照らし、アンビエントグローとパーティクルフィールドを表示します。詳細：visuals/branding/spotlight.md。

ブラウザー

• @codedvisuals/browser-loading (読み込み)：ページの読み込み状態がアニメーションで表示されるブラウザーウィンドウのモックアップです。詳細：visuals/browser/loading.md。
• @codedvisuals/browser-simple (シンプル)：スクリーンショットや UI の表示に使える、すっきりとしたブラウザーウィンドウのフレームです。詳細：visuals/browser/simple.md。
• @codedvisuals/browser-tabs (タブ)：タブを切り替えられるアドレスバー付きのブラウザーウィンドウです。詳細：visuals/browser/tabs.md。

カレンダー

• @codedvisuals/calendar-date-picker (日付ピッカー)：選択した日と範囲のハイライトを表示する、カレンダーの日付ピッカーです。詳細：visuals/calendar/date-picker.md。
• @codedvisuals/calendar-event-list (イベントリスト)：今後のカレンダーイベントを予定表形式で一覧表示します。詳細：visuals/calendar/event-list.md。
• @codedvisuals/calendar-month-view (月表示)：イベントが各日に配置された、1か月分のカレンダーグリッドです。詳細：visuals/calendar/month-view.md。

チャート

• @codedvisuals/charts-bar (Bar)：値、トレンドバッジ、グリッドを備えたアニメーション棒グラフです。詳細：visuals/charts/bar.md。
• @codedvisuals/charts-block-stack (Block Stack)：ブロックが積み上がるにつれて列が伸びるアイソメトリック棒グラフです。ブロックが着地するたびに、弾むような動きでスタックが押し縮められます。詳細：visuals/charts/block-stack.md。
• @codedvisuals/charts-donut (Donut)：中央に合計値と凡例を表示するアニメーションのドーナツグラフです。詳細：visuals/charts/donut.md。
• @codedvisuals/charts-funnel (Funnel)：段階ごとに細くなるスラブが一つずつ流れ込むコンバージョンファネルです。各段階の件数とコンバージョン率を表示します。詳細：visuals/charts/funnel.md。
• @codedvisuals/charts-gauge (Gauge)：値まで弧が伸びる半円形ゲージです。ゾーン付きトラック、中央の数値、範囲ラベルを任意で表示できます。詳細：visuals/charts/gauge.md。
• @codedvisuals/charts-heatmap (Heatmap)：ラベル付きの行と列からなるグリッド形式のヒートマップです。セルが斜めに順番に点灯し、強度の凡例も表示します。詳細：visuals/charts/heatmap.md。
• @codedvisuals/charts-line (Line)：値、トレンドバッジ、グラデーション塗りつぶしを備えたアニメーション折れ線グラフです。詳細：visuals/charts/line.md。
• @codedvisuals/charts-sparkline (Sparkline)：狭いスペースや統計カードに適した、コンパクトなインラインスパークラインです。詳細：visuals/charts/sparkline.md。

チャット

• @codedvisuals/chat-ai-chat (AI Chat)：ストリーミング応答とプロンプトボックスを備えたAIチャットインターフェースです。詳細：visuals/chat/ai-chat.md。
• @codedvisuals/chat-bubbles (Bubbles)：2人の間で交わされる、チャットバブル形式の会話です。詳細：visuals/chat/bubbles.md。
• @codedvisuals/chat-thread (Thread)：返信とリアクションを表示するスレッド形式のメッセージビューです。詳細：visuals/chat/thread.md。

コード

• @codedvisuals/code-editor (Editor)：構文ハイライトとファイルタブを備えたコードエディターのモックアップです。詳細：visuals/code/editor.md。
• @codedvisuals/code-snippet (Snippet)：言語ラベル付きの、コピー可能なコードスニペットカードです。詳細：visuals/code/snippet.md。
• @codedvisuals/code-terminal (Terminal)：コマンドの入力と出力を表示するターミナルウィンドウです。詳細：visuals/code/terminal.md。

接続

• @codedvisuals/connections-converge (Converge)：複数のソースが単一の接続先ノードに集約されます。詳細：visuals/connections/converge.md。
• @codedvisuals/connections-flow (Flow)：データパスで接続されたノードが流れるアニメーションです。詳細：visuals/connections/flow.md。
• @codedvisuals/connections-layer-stack (Layer Stack)：パイプラインの各ステップをアイソメトリックなスラブで表現し、一つずつ積み重ねます。リリースが出荷されて持ち上がるまで、スタックは押し縮められていきます。詳細：visuals/connections/layer-stack.md。
• @codedvisuals/connections-pipeline (Pipeline)：進行状況が動く、直線的な段階構成のパイプラインです。詳細：visuals/connections/pipeline.md。
• @codedvisuals/connections-sync (Sync)：データが双方向に移動しながら同期する2つのシステムです。詳細：visuals/connections/sync.md。

データ

• @codedvisuals/data-filters (Filters)：各ルールが順番に適用され、結果の件数と進捗バーを絞り込んでいくフィルタービルダーです。詳細：visuals/data/filters.md。
• @codedvisuals/data-import (Import)：各ソース列を対応する宛先フィールドにつなぐCSVインポートマッパーです。マッピングされていない列はスキップされます。詳細：visuals/data/import.md。
• @codedvisuals/data-query (Query)：条件を組み立てて実行時にスイープし、一致する行をストリーミング表示するビジュアルクエリビルダーです。処理時間も表示します。詳細：visuals/data/query.md。
• @codedvisuals/data-table (Table)：並べ替え可能な列と行、ステータスピルを備えたデータテーブルです。詳細：visuals/data/table.md。

ダッシュボード

• @codedvisuals/dashboard-mini-panel (Mini Panel)：指標とミニチャートを備えたコンパクトなダッシュボードパネルです。詳細：visuals/dashboard/mini-panel.md。
• @codedvisuals/dashboard-widget-grid (Widget Grid)：ダッシュボードウィジェットとサマリーカードのグリッドです。詳細：visuals/dashboard/widget-grid.md。

デバイス

• @codedvisuals/devices-laptop (Laptop)：スクリーンショットや UI を表示するためのノートパソコンのデバイスフレームです。詳細：visuals/devices/laptop.md。
• @codedvisuals/devices-phone (Phone)：モバイル画面を紹介するためのスマートフォンのデバイスフレームです。詳細：visuals/devices/phone.md。
• @codedvisuals/devices-tablet (Tablet)：アプリやページを紹介するためのタブレットのデバイスフレームです。詳細：visuals/devices/tablet.md。

メール

• @codedvisuals/email-compose (Compose)：宛先、件名、本文を備えたメール作成ウィンドウです。詳細：visuals/email/compose.md。
• @codedvisuals/email-inbox (Inbox)：送信者、プレビュー、未読状態を表示するメール受信トレイの一覧です。詳細：visuals/email/inbox.md。

ファイル

• @codedvisuals/files-explorer (Explorer)：フォルダーツリーとファイル一覧を備えたファイルエクスプローラーです。詳細：visuals/files/explorer.md。
• @codedvisuals/files-simple (Simple)：名前、種類、サイズを表示するシンプルなファイルカードです。詳細：visuals/files/simple.md。
• @codedvisuals/files-stacked (Stacked)：奥行きのある、重なり合ったファイルカードのスタックです。詳細：visuals/files/stacked.md。
• @codedvisuals/files-upload (Upload)：進行状況とドラッグ＆ドロップに対応したファイルアップロード領域です。詳細：visuals/files/upload.md。

地理情報

• @codedvisuals/geo-edge-network (Edge Network)：リクエストが最寄りのエッジノードに到達する様子を示すドットの世界地図です。レイテンシチップで、エッジと遠方のオリジンサーバーを比較します。詳細：visuals/geo/edge-network.md。
• @codedvisuals/geo-geofence (Geofence)：淡くぼかした道路地図に描画されたゾーンと、その不規則な道路を走る追跡対象デバイスを表示します。デバイスがゾーンに入るたびにトーストが表示されます。詳細：visuals/geo/geofence.md。
• @codedvisuals/geo-globe (Globe)：ドットで描かれた大陸を持つ回転する地球儀です。位置マーカーと、描画される接続アークを表示します。詳細：visuals/geo/globe.md。
• @codedvisuals/geo-pin-drop (Pin Drop)：同心円状の波紋が広がる、抽象的なレーダー上に位置ピンが落ちていく様子を表示します。詳細：visuals/geo/pin-drop.md。
• @codedvisuals/geo-world-map (World Map)：選択した都市から外側へ広がるドットの世界地図です。点滅する位置マーカー、色付きのカバレッジ領域、都市間に描画される接続アークを表示します。詳細：visuals/geo/world-map.md。

Git

• @codedvisuals/git-branch-graph (Branch Graph)：フィーチャーブランチが分岐し、それぞれでコミットを行ってからマージされるコミットレールです。すべての経路をパルスが移動します。詳細：visuals/git/branch-graph.md。
• @codedvisuals/git-diff (Diff)：追加行と削除行を表示するファイル差分です。統合表示または左右分割表示に対応し、変更カウンターが増えるにつれて、行ごとにスイープします。詳細：visuals/git/diff.md。
• @codedvisuals/git-pull-request (Pull Request)：CI チェックが順に実行され、その後、承認状態になってマージボタンが点灯するプルリクエストカードです。詳細：visuals/git/pull-request.md。

画像

• @codedvisuals/images-carousel (Carousel)：スライドとナビゲーションコントロールを備えた画像カルーセルです。詳細：visuals/images/carousel.md。
• @codedvisuals/images-gallery (Gallery)：ホバー状態に対応したレスポンシブな画像ギャラリーのグリッドです。詳細：visuals/images/gallery.md。

インテグレーション

• @codedvisuals/integrations-hub (Hub)：周囲のインテグレーションロゴと接続された中央アプリです。詳細：visuals/integrations/hub.md。
• @codedvisuals/integrations-logo-orbit (Logo Orbit)：中央のブランドマークの周りを周回するインテグレーションロゴです。詳細：visuals/integrations/logo-orbit.md。
• @codedvisuals/integrations-logo-marquee (Logo Marquee)：インテグレーションロゴが交互に反対方向へ流れる複数の行で、両端に向かってフェードアウトします。詳細：visuals/integrations/logo-marquee.md。
• @codedvisuals/integrations-logo-reel (Logo Reel)：インテグレーションロゴが1つずつ中央のスポットライトへスライドし、通過する際にぼやけていきます。詳細：visuals/integrations/logo-reel.md。
• @codedvisuals/integrations-plugin-slot (Plugin Slot)：インテグレーションのキューブが並ぶアイソメトリックなボードで、新しいロゴが空きスロットに落ちて接続されます。詳細：visuals/integrations/plugin-slot.md。

キーボード

• @codedvisuals/keyboard-half (Half)：キーの組み合わせを押す様子を示す半分のキーボードです。詳細：visuals/keyboard/half.md。
• @codedvisuals/keyboard-isometric-keys (Isometric Keys)：押すと沈み、跳ね戻る触感のあるキーキャップでショートカットを入力するアイソメトリックなキーボードです。各コマンド名はピル型のラベルで表示されます。詳細：visuals/keyboard/isometric-keys.md。
• @codedvisuals/keyboard-shortcut (Shortcut)：ラベル付きのキーキャップで表現したキーボードショートカットです。詳細：visuals/keyboard/shortcut.md。

メディア

• @codedvisuals/media-audio-waveform (Audio Waveform)：アニメーションする波形とコントロールを備えたオーディオプレーヤーです。詳細：visuals/media/audio-waveform.md。
• @codedvisuals/media-video-player (Video Player)：コントロールとプログレスバーを備えた動画プレーヤーのフレームです。詳細：visuals/media/video-player.md。

メトリクス

• @codedvisuals/metrics-comparison (Comparison)：差分を含む、変更前と変更後のメトリクス比較です。詳細：visuals/metrics/comparison.md。
• @codedvisuals/metrics-stat-card (Stat Card)：値、ラベル、傾向を表示する単一の統計カードです。詳細：visuals/metrics/stat-card.md。
• @codedvisuals/metrics-trend (Trend)：傾向線と期間ごとの変化を示すメトリクスです。詳細：visuals/metrics/trend.md。

通知

• @codedvisuals/notifications-bell (Bell)：未読バッジとポップアニメーションを備えた通知ベルです。詳細：visuals/notifications/bell.md。
• @codedvisuals/notifications-list (List)：アイコンとタイムスタンプ付きの通知リストです。詳細：visuals/notifications/list.md。
• @codedvisuals/notifications-toast (Toast)：スライドインするアニメーション付きのトースト通知です。詳細：visuals/notifications/toast.md。

決済

• @codedvisuals/payments-checkout (Checkout)：明細項目と支払いボタンを含むチェックアウトの概要です。詳細：visuals/payments/checkout.md。
• @codedvisuals/payments-credit-card (Credit Card)：ブランド、番号、チップを表示するクレジットカードのビジュアルです。詳細：visuals/payments/credit-card.md。
• @codedvisuals/payments-usage-meter (Usage Meter)：利用量バーとクォータ、項目別の従量課金、推定合計を含む従量課金の概要です。詳細：visuals/payments/usage-meter.md。

検索

• @codedvisuals/search-command-palette (Command Palette)：入力済みのクエリ、グループ化されたコマンド、キーボードヒントを表示し、リストを順に移動する選択項目を備えたコマンドパレットです。詳細：visuals/search/command-palette.md。
• @codedvisuals/search-results (Results)：フィルターチップ、検索結果数、該当箇所でハイライト表示された一致語を含む検索結果パネルです。詳細：visuals/search/results.md。
• @codedvisuals/search-semantic (Semantic)：クエリが埋め込み空間に配置され、半径を走査して最も近い一致候補を類似度スコアとともに点灯させます。詳細：visuals/search/semantic.md。

セクション

• @codedvisuals/sections-auth (Auth)：ソーシャルボタン、入力欄、サインインボタンを備えたログインセクションです。詳細：visuals/sections/auth.md。
• @codedvisuals/sections-backgrounds (Backgrounds)：背景スタイル（メッシュ、グリッド、ドット、光線）を切り替えてプレビューできるセクションです。切り替え用のピッカーが付いています。詳細：visuals/sections/backgrounds.md。
• @codedvisuals/sections-bento (Bento)：注目タイルとサイズの異なるカードを配置した、弁当箱型のグリッドセクションです。詳細：visuals/sections/bento.md。
• @codedvisuals/sections-blog (Blog)：記事カードとメタデータを備えたブログ一覧セクションです。詳細：visuals/sections/blog.md。
• @codedvisuals/sections-blog-post (Blog Post)：タイトル、メタ情報、本文を含むブログ記事のレイアウトです。詳細：visuals/sections/blog-post.md。
• @codedvisuals/sections-comments (Comments)：アバター、返信、投票を備えたコメントスレッドです。詳細：visuals/sections/comments.md。
• @codedvisuals/sections-components (Components)：UI コンポーネントや構成要素を並べたショーケースグリッドです。詳細：visuals/sections/components.md。
• @codedvisuals/sections-contact (Contact)：フォームと連絡先情報を備えたお問い合わせセクションです。詳細：visuals/sections/contact.md。
• @codedvisuals/sections-cta (CTA)：見出しとボタンを備えた行動喚起セクションです。詳細：visuals/sections/cta.md。
• @codedvisuals/sections-error (Error)：コード、メッセージ、アクションを表示するエラー状態のセクションです。詳細：visuals/sections/error.md。
• @codedvisuals/sections-faq (FAQ)：開閉できる項目を備えた、よくある質問のセクションです。詳細：visuals/sections/faq.md。
• @codedvisuals/sections-features (Features)：アイコン、タイトル、説明を備えた機能紹介セクションです。詳細：visuals/sections/features.md。
• @codedvisuals/sections-footers (Footers)：ブランド、リンク、ソーシャルリンクを備えたマーケティング用フッターです。詳細：visuals/sections/footers.md。
• @codedvisuals/sections-headers (Headers)：ナビゲーションとアクションを備えたマーケティング用ヘッダーです。詳細：visuals/sections/headers.md。
• @codedvisuals/sections-hero (Hero)：見出し、コピー、ボタンを備えたマーケティング用ヒーローセクションです。詳細：visuals/sections/hero.md。
• @codedvisuals/sections-logos (Logos)：顧客やパートナーのブランドロゴを並べたセクションです。詳細：visuals/sections/logos.md。
• @codedvisuals/sections-newsletter (Newsletter)：メールアドレス入力欄を備えたニュースレター登録セクションです。詳細：visuals/sections/newsletter.md。
• @codedvisuals/sections-pricing (Pricing)：プランカードと機能を備えた料金セクションです。詳細：visuals/sections/pricing.md。
• @codedvisuals/sections-process (Process)：番号付きの段階を示す、手順を追ったプロセスセクションです。詳細：visuals/sections/process.md。
• @codedvisuals/sections-stats (Stats)：主要な数値を強調する統計セクションです。詳細：visuals/sections/stats.md。
• @codedvisuals/sections-team (Team)：メンバーカードと役割を紹介するチームセクションです。詳細：visuals/sections/team.md。
• @codedvisuals/sections-testimonials (Testimonials)：引用と投稿者を掲載するお客様の声セクションです。詳細：visuals/sections/testimonials.md。
• @codedvisuals/sections-timeline (Timeline)：マイルストーンと日付を示すタイムラインセクションです。詳細：visuals/sections/timeline.md。

セキュリティ

• @codedvisuals/security-fingerprint (Fingerprint)：成功状態を表示する、アニメーション付きの指紋スキャンです。詳細：visuals/security/fingerprint.md。
• @codedvisuals/security-lock (Lock)：セキュリティとアクセス制御を伝える鍵のビジュアルです。詳細：visuals/security/lock.md。
• @codedvisuals/security-shield (Shield)：保護と信頼を伝える盾のビジュアルです。詳細：visuals/security/shield.md。
• @codedvisuals/security-two-factor (Two-Factor)：2つの入力グループにワンタイムコードを入力すると、同心円状に広がる波紋とともに鍵がチェックマークに変わります。詳細：visuals/security/two-factor.md。

状態

• @codedvisuals/states-empty (空): 破線のプレースホルダースロットが並ぶ空のグリッドです。追加操作をきっかけに波紋が広がり、1つのスロットが一時的に現れてから、再び溶けるように消えていきます。詳細：visuals/states/empty.md。
• @codedvisuals/states-error (エラー): リクエストのパルスがサービスカードに届いてそれを破壊し、アラートバッジの下でサービスのタイルが次々と障害状態に変化します。詳細：visuals/states/error.md。
• @codedvisuals/states-maintenance (メンテナンス): サービスのタイルが積み重なり、そのうち1つが取り出されて作業中の状態になっています。タイルは空いたスロットの上に浮かび、その下では進捗のスイープが実行されます。詳細：visuals/states/maintenance.md。
• @codedvisuals/states-not-found (見つかりません): リクエストのスパイクがルートを進み、大きなステータスコードの位置にある障壁にぶつかって、同心円状のパルスを放ちます。見つからないページは破線のゴーストタイルとして残ります。詳細：visuals/states/not-found.md。

ステータス

• @codedvisuals/status-health-check (ヘルスチェック): ステータスインジケーター付きのサービスヘルスチェックです。詳細：visuals/status/health-check.md。
• @codedvisuals/status-resource-monitor (リソースモニター): グリッド状のプロット上でCPUとメモリの使用量をストリーミング表示するライブリソースモニターです。凡例には各系列の現在の読み取り値が表示されます。詳細：visuals/status/resource-monitor.md。
• @codedvisuals/status-uptime-bar (稼働時間バー): 日ごとの稼働状況を示す稼働時間バーです。詳細：visuals/status/uptime-bar.md。

タスク

• @codedvisuals/tasks-checklist (チェックリスト): 項目が1つずつ完了していくチェックリストです。詳細：visuals/tasks/checklist.md。
• @codedvisuals/tasks-kanban (カンバン): 列とドラッグ可能なカードを備えたカンバンボードです。詳細：visuals/tasks/kanban.md。
• @codedvisuals/tasks-sort-lanes (レーン並べ替え): タスクキューブが等角投影の「To do」「In progress」「Done」レーンを滑るように移動し、各キューブは弾むように押し込まれて着地します。それに合わせてレーンの件数が切り替わります。詳細：visuals/tasks/sort-lanes.md。