AgentBuild: 30のAIエージェントがページを構築するエフェクト

ページ読み込み時のエフェクト：各コンテンツブロックがワイヤーフレームで隠され、名前付きカーソルが飛来し、選択範囲をドラッグしてブロックを「構築」します。DOMとCSSトランジションのみを使用（Canvas不要、ライブラリ不要）。30体のカーソルでもリソース消費はほぼゼロです。

assets/ 内のファイル：

ファイル	使用タイミング
`agent-build.js`	コア。`<script>` タグ（`window.AgentBuild` を作成）またはバンドラーでの `import`（CommonJS）で使用。
`agent-build.css`	必須、コアに同梱。`--ab-*` 変数で色を変更可能。
`agent-build.d.ts`	コアのTypeScript型定義。
`AgentBuild.tsx`	React/Next.js用ラッパー（クライアントコンポーネント）。
`demo.html`	サンプルページ。ブラウザで直接開いて実行可能。

組み込み方

通常のWeb HTML

agent-build.js と agent-build.css をプロジェクトにコピー。
<head> にCSSを、<body> の最後にスクリプトを配置し、DOMにコンテンツが存在した後に start を呼び出します：

<link rel="stylesheet" href="agent-build.css" />
<script src="agent-build.js"></script>
<script>
  AgentBuild.start({
    root: "main",                       // 構築対象の領域。カーソルはこの領域内に配置される
    targets: "main h1, main p, .card",  // 構築するブロック。優先順位順
    seenKey: "home",                    // ページごとに一意のキー
    labels: { status: "{agents} エージェント · {edits} 編集", building: "ページ構築中", done: "構築完了", skip: "スキップ" },
  });
</script>

React / Next.js (App Router)

agent-build.js、agent-build.d.ts、AgentBuild.tsx を同じディレクトリ（例: src/components/agent-build/）にコピー。
共通スタイルシートで agent-build.css を1回インポート（@import "../components/agent-build/agent-build.css";）。
コンポーネントを構築対象領域の最初の子要素として配置。コンポーネントは親要素をルートとして使用：

<div className="landing">
  <AgentBuild targets=".landing h1, .landing p, .card" seenKey="landing" />
  ...
</div>

サーバーサイドレンダリングされたページでも正常に動作します。コンポーネントはクライアントでのみ実行され、useLayoutEffect（最初の描画前）内でブロックを非表示にするため、コンテンツのフラッシュは発生しません。

`targets` の適切な選択

ここがエフェクトの見栄えを左右します。

意味のあるブロックを選択：見出し、段落、ボタン、カード、画像。セクション全体をラップする div は避けてください。巨大なフレームはバグのように見えます。
優先順位順にリストします。既に選択された要素の内部にある要素は自動的にスキップされます。例えば .card を選択した場合、カード内の p は個別に構築されません。カード全体を構築したい場合は、p より前に .card を指定します。
独自のエフェクト（スクロール連動アニメーション、Canvas）がある領域は、skipInside: ".tagline" でスキップします。
初期の幅または高さが0の要素はスキップされます。
30～140ブロックが最適です。maxTargets のデフォルトは140。
プロジェクトに既に「スクロールに応じてフェードイン」するエフェクトがある場合、エージェント実行中はそれを無効にしてください。そうしないと、2つのエフェクトが重なります。例：[data-agent-build] .reveal { opacity: 1; transform: none; transition: none; }（data-agent-build 属性は実行中にルート要素に付加されます）。

オプション

オプション	デフォルト	説明
`root`	`document.body`	要素またはセレクタ。実行中は `position: relative` が設定されます。
`targets`	`h1, h2, h3, p, img, figure, li, button, .card`	ブロックのリスト。
`count`	30（画面幅640px未満では16）	エージェントの数。
`once` / `seenKey`	`true` / `"agent-build"`	タブごとに1回のみ実行。
`forceParam`	`"agents"`	URLに `?agents` を追加すると常に再実行。動画撮影時に便利。
`respectReducedMotion`	`true`	ユーザーが動作軽減を有効にしている場合は実行しません。
`pill`	`true`	「スキップ」ボタン付きステータスバー。
`labels`	英語	`status`（`{agents}`、`{edits}` を使用可能）、`building`、`done`、`skip`。
`colors`, `roles`	8色、10ロール	エージェントの色と名前（例：`layout-07`）。

start() は { skip(), destroy(), started } を返します。destroy() はページを元の状態に戻します。SPAのページ遷移時やコンポーネントのアンマウント時に呼び出します。

CSS変数で外観を変更：--ab-wire（ワイヤーフレームの色）、--ab-pill-bg、--ab-pill-text、--ab-pill-muted、--ab-mono、--ab-ease。

スクリーンショット不要の数値テスト

Playwrightを使用して、?agents 付きでページを開き、以下の値を確認：

({
  cursors: document.querySelectorAll(".ab-cursor:not([data-hidden])").length, // 初期は約30
  waiting: document.querySelectorAll('[data-ab="wait"]').length,              // スクロールに応じて減少
  on: !!document.querySelector("[data-agent-build]"),                          // 完了時はfalse
})

window.scrollTo で段階的にスクロール（ページがLenisスムーズスクロールを使用している場合は mouse.wheel を使用しない）、数秒待機。正しい結果：waiting が0、on が false。「スキップ」ボタンのテスト：.ab-skip をクリック後、[data-ab] が存在しないこと。視覚的な評価が必要な場合のみ1枚のスクリーンショットを撮影。

既知の問題

フレームまたはカーソルの位置ずれ：ルートがすべてのブロックを包含していない。ルートにはすべての targets を含む要素を指定してください。
fill 画像（Next/Image）がページ全体を覆う：このスキルの問題ではありません。fill 画像の親要素には position: relative が必要です。
エフェクトが再実行されない：タブ内で既に実行済み。URLに ?agents を追加するか、新しいタブを開いてください。
React StrictMode（開発時にエフェクトが二重実行）：コアは1.2秒後に「実行済み」とマークするため、2回目のマウント時も正常に動作します。

AgentBuild：30のAIエージェントがページを構築するエフェクト