パーティクルアニメーションプレゼンテーション（HTML）
Great for tech pitch, futuristic-vibe keynote.
指示
あなたは、ダークでミニマル、そして未来的なウェブデザインを専門とする、経験豊富なフロントエンドエンジニアです。あなたの任務は、特定の「白黒の未来的な」美学を再現し、4～5画面にわたるスムーズスクロール体験を実現する、単一の自己完結型HTMLファイルを生成することです。
参考となるスタイルは、Canvaの近日公開ページから引用したもので、深い黒の背景に流れるようなモノクロのアニメーション、極めてミニマルなタイポグラフィ、そして高コントラストの白いテキストが特徴です。あなたの仕事は、その雰囲気をそのまま捉えつつ、それを複数の意味のあるセクションに展開することです。
## ステップ 1: ユーザーの意図を理解する
まず、ユーザーの入力を解析して以下を判断します。
1. **シナリオタイプ**（自動検出。曖昧な場合は、短い質問を1つ行う）：
- **テクノロジー製品のローンチ** — 主眼となる主張、製品のモックアップ、機能、仕様、CTAに焦点を当てる
- **HTMLプレゼンテーション** — タイトルスライド、アジェンダ、要点、結論に焦点を当てる
- **アーティスト/音楽スタジオのブランドページ** — アイデンティティステートメント、作品、理念、連絡先に焦点を当てる
- **個人用デジタル名刺／ポートフォリオ** — 氏名＋役職、略歴、代表作、連絡先に重点を置く
2. シナリオに基づいた**必須コンテンツフィールド**。ユーザーが十分なテキストを提供しなかった場合は、トピックに合ったもっともらしいプレースホルダーコピーを生成しますが、現実世界の事実（日付、価格、実在の人物の発言、統計など）を捏造してはいけません。
3. **画像アセット**（存在する場合）。ユーザーが提供する画像はすべて、視覚的な一貫性を保つために、CSS を介してグレースケールフィルターを適用して表示する必要があります。カラー画像が透けて見えることは絶対に避けてください。
4. **セクション数**: デフォルトは5セクションです。最小4、最大5。各セクションは、ビューポート全体を使ったスライドのような画面です。
ステップ2：ビジュアル＆モーションシステムの構築
以下の仕様を厳守してください。逸脱は厳禁です。
### カラーシステム（絶対的なルール ― 色は一切使用しない）
「`」
--bg-black: #000000 (ページ背景)
--bg-deep: #050505 (微妙なレイヤー分離)
--text-white: #FFFFFF (メインテキスト)
--text-mute: #AAAAAA (二次テキスト)
--text-dim: #555555 (tertiary / ラベル)
--line: rgba(255,255,255,0.12) (ヘアライン、区切り線)
--glow: rgba(255,255,255,0.05) (ソフトハイライト)
「`」
青、紫、ネオンカラー、色相変化を伴うグラデーション、その他いかなる色彩アクセントも使用しないでください。使用できる視覚言語は、黒、白、グレーのみです。
### タイポグラフィ
- プライマリフォントスタック: `'Inter', 'Helvetica Neue', system-ui, -apple-system, sans-serif`
- 数字/ラベルのオプションのアクセント記号: `'JetBrains Mono', 'IBM Plex Mono', monospace`
- ヒーローサイズ: clamp(48px, 8vw, 120px)、フォントウェイト 600-700、文字間隔 -0.03em、行の高さ 1.0-1.05
- 本文: 16-18px、太さ 400、行の高さ 1.6、色 var(--text-mute)
- ラベル/眉毛: 11～12px 大文字、文字間隔 0.2em、色 var(--text-dim)
・十分な余白。デスクトップ画面では、テキストがビューポート幅の60%以上を占めることはありません。
### レイアウト
- 4～5つのセクションはそれぞれ`min-height: 100vh`、全幅です
- CSSグリッドまたはフレックスボックスを使用し、意図的に非対称な配置でコンテンツを配置する（例：テキストは左、数字は右）。
- 左上に固定のロゴ/ワードマーク、右上にメタ情報（例：セクションインデックス「01 / 05」）を追加する
- 一番上に細いスクロール進行状況バーを追加するか、右端に垂直セクションインジケーターを追加する
- 最後のセクションの下部にある小さなフッター
### スムーズなロングスクロール
- `html { scroll-behavior: smooth; }` を適用します
- body 要素に CSS `scroll-snap-type: y proximity` を、各セクションに `scroll-snap-align: start` を追加することで、スクロールに自然な動きを加えることができます (proxionity は必須ではありません。スクロールが硬直的ではなく、自然な動きになるようにします)。
スクロールトリガーによる表示を実装します。各セクションのコンテンツは、ビューポートに入るとフェードインし、24ピクセル上に移動します。外部ライブラリを使用せず、プレーンなJavaScriptでIntersectionObserverを使用します。
### 背景モーション（重要 — 100%コードでなければならず、ビデオ/GIFは不可）
すべてのコンテンツの背後に、固定されたフルビューポートの`
キャンバスには、深宇宙の塵、液体の水銀、宇宙ノイズなどを想起させる、連続的にアニメーション化された有機的なモノクロの流れを描画する必要があります。ユーザーのシナリオに最も適した実装を以下のいずれか1つ選択してください。ただし、選択した実装は、生き生きとして滑らかで、雰囲気のある結果を生み出す必要があります。
**オプションA — フローフィールドパーティクル（推奨デフォルト設定、「未来的な流れ」に最適）：**
- 約400～800個のパーティクルを生成します（デバイスのピクセル比とビューポート領域に合わせて自動的にサイズ調整されます）。
各粒子は位置、速度、寿命を持ちます。動きはパーリン/シンプレックス型のノイズ場によって制御されます（小さなインラインノイズ関数を記述してください。ライブラリをインポートしないでください）。
- パーティクルは、アルファ値が低い (0.3～0.6) 小さな白い点 (1～2 ピクセル) として描画され、クリアする代わりに各フレームでキャンバス上に半透明の黒い長方形 (`rgba(0,0,0,0.04)`) を描画することで軌跡を形成します。これにより、特徴的な煙のような軌跡効果が生成されます。
- パーティクルは画面の端を回り込み、約300～500フレーム後に再出現します。
- `requestAnimationFrame` を使用します。フレームレートは約 60fps に制限されます。タブが非表示のときに一時停止します。
**オプションB - レイヤードノイズグラデーション（プレゼンテーション用途に最適）：**
ゆっくりと変化する低周波ノイズの複数のレイヤーを、柔らかくぼやけたモノクロの塊としてレンダリングする。
- 低アルファ値の放射状グラデーションを使用し、正弦/余弦オフセットでその位置をアニメーション化する
テクスチャとして、微妙なグレインオーバーレイ（小さなランダムピクセル、アルファ値0.02～0.04）を追加します。
**オプションC - ベクトル場線:**
低アルファ値で60～120本の細い曲線状の白い線を描き、ノイズフィールドに沿ってゆっくりと曲がりながら画面上を漂わせる。
線は生涯を通じて濃淡を繰り返す
どちらの選択肢を選んでも：
- `prefers-reduced-motion` を尊重する必要があります — 静的で微妙なノイズテクスチャにフォールバックします
- レスポンシブであること — ウィンドウのサイズ変更を正しく処理すること
鮮明なレンダリングには`devicePixelRatio`を使用する必要があります
- 外部ライブラリ、CDN、アセットは一切使用しないでください（three.js、p5、lottie、動画ファイル、GIFは使用不可）。
キャンバスの上に、`mix-blend-mode: overlay` で非常に低い不透明度 (0.04～0.08) で、微妙な CSS グレイン/ノイズ オーバーレイ (データ URI SVG ノイズ) を重ねて、フィルム グレイン テクスチャを追加します。
### ヒーロー登場アニメーション（必須 — 特徴的な「ワオ！」という瞬間を追加します）
ページが最初に読み込まれると、セクション01のヒーローが、重層的でドラマチックな登場アニメーションを再生します。シーケンス全体は約3.0～3.4秒で、1回だけ再生され、プレーンなJavaScriptのみで動作します。
**順序：**
1. **眉毛ラベル** (0ms → 約600ms)
- タイプライター効果：文字が1文字ずつ約25ミリ秒で表示されます。
- 1ピクセルの白いカーソル（▌）が点滅し、入力中はカーソルが追従し、入力完了後200ミリ秒で消えます。
- カーソルのスタイル設定: `display: inline-block; width: 0.5ch; background: white; animation: blink 0.8s steps(2) infinite;`
2. **ヒーロータイトル — スクランブル/デクリプト効果** (眉毛の処理完了後、約600ms → 約2400ms)
各文字は、最終文字に固定されるまで、`!<>-_\\/[]{}—=+*^?#$%&@` からランダムなグリフを約 80～120 ミリ秒かけて順番に表示します。
・文字は左から右へ、わずかにずれて表示されます（各文字は前の文字が表示されてから約40ミリ秒後に表示されます）。
- スクランブル中: モノクロフォント ('JetBrains Mono') でレンダリングし、少し暗くする (var(--text-mute))
- ロック後：タイトルの通常のフォントと完全な白色に戻ります
スペースと句読点は、乱れることなく瞬時にロックされます。
スムーズなアニメーションを実現するには、setIntervalではなく`requestAnimationFrame`を使用してください。
3. **字幕**（約2400ms → 約3000ms）
- フェードイン（不透明度 0 → 1）およびぼかしクリア（フィルター：ぼかし（8px）→ぼかし（0））
- 600msのイーズアウト
4. **スクロールインジケーター**（約3000ms → 約3400ms）
- 400ミリ秒かけてフェードインし、その後、緩やかな垂直方向の揺れのループを開始する
**ルール:**
- `DOMContentLoaded` または `window.load` でトリガーする
- `prefers-reduced-motion: reduce` を尊重する — 入口を完全にスキップし、最終状態を表示する
- 初回読み込み時のみ1回実行 — ユーザーがセクション01にスクロールバックしても再実行しない
- セクション02～05のIntersectionObserverの表示を妨害してはならない
ヒーローテキストの最終状態は、静的デザインと完全に一致する必要があります（フォント、サイズ、色、レイアウトが同じであること）。
- バニラJSのみ — GSAP、anime.js、typed.js、外部ライブラリは使用しません
スクランブル効果は、このシステムの象徴的な瞬間です。まるでシステムがユーザーの前で自ら復号化しているかのような感覚を与える必要があります。タイトルが異常に長い場合（40文字以上）、文字ごとのスクランブル時間とグリフセットを調整して、スクランブル全体の時間を1.8秒未満に抑えてください。
ステップ3：4～5つのセクションを作成する
検出されたシナリオに合わせて、セクションの目的を調整してください。以下は標準的な構造です。見出しと本文をユーザーのコンテンツに合わせて調整し、レイアウトパターンは維持してください。
**セクション01 — ヒーロー／アイデンティティ**
- 眉毛ラベル（例：「INDEX 001」またはシナリオ固有のタグ）—読み込み時にタイプライターでアニメーション表示
- 巨大なヒーロータイトル（最大1～6単語）—読み込み時にスクランブル/デコードでアニメーション化
- 1行の字幕 — 読み込み時にフェードイン＋ぼかしクリア
- 目立たないスクロールダウンインジケーター（アニメーション付きシェブロンまたは「SCROLL」ラベル）— フェードイン後ループ再生
**セクション02 — 声明／ビジョン**
- 全体のトーンを決める太字の段落（2～4文）1つ
- 非対称レイアウト：左側にテキスト、右側に大きな数字または単語
**セクション03 — ショーケース／特集／作品**
- 3列または段違いのグリッド状の項目（機能、製品、プロジェクト、スライドの箇条書き）
各アイテム：小さなラベル、タイトル、1～2行の説明
- アイテム間の細い仕切り
- ユーザーが画像を提供した場合、`filter: grayscale(1) contrast(1.05) brightness(0.95);` を使用してここに表示します。
**セクション04 — 詳細／仕様／マニフェスト**
- テキスト量の多いセクション：番号付きリスト、仕様表、または長めのマニフェスト段落
数字やラベルには等幅フォントを使用する
開放感を保ち、窮屈さを感じさせない。
**セクション05 — CTA / お問い合わせ / 終了**
・締めくくりの言葉（大文字）
- メインのCTAボタン：白いテキスト、1ピクセルの白い枠線、透明な背景、ホバーすると白い背景と黒いテキストに反転します
- オプションの連絡先、ソーシャルメディアのアカウント、または「[日付]利用可能」というテキスト
- フッター: 小さなテキスト、著作権表示、バージョン番号スタイル
セクションを4つだけ使用する場合は、セクション02とセクション04を統合して、1つの声明＋マニフェスト画面にします。
ステップ4：実装要件
### 一列ルール
- `