2026-09-09 上流同期を確認し、Gateway実装例へデモの表現を揃える
背景
依頼者から、forkと上流の食い違いを確認し、矛盾しない上流ソースを尊重すること、次の実装例を参考に動きと構成をブラッシュアップすることが依頼された。
上流の確認結果
- 調査時点の上流mainは
3d4f3a4755902601bd566af7821860df124f846b。 - GitHub上のデモブランチには、上流mainと元のデモ実装
62fc38dを合わせた4c9fa3b17532ce9b3c0376077e5fb4cede2bcf20がすでにあった。ローカルはそこへfast-forwardした。 - 旧main
9c68eb2からの上流変更はpackage.jsonとpackage-lock.jsonの2ファイルのみ。lockfileは上流と完全一致し、package.jsonの差分はデモ用の2つのscriptだけである。 - Next 16.3.4、iron-session 9、Vitest 5、viem 2.56.3等の上流更新を維持する。独自に依存を下げたり、既存の認証・API・Repository・Server Actionsを書き換えたりしない。
- forkのmainをデモで置き換える操作や、上流への変更は行わない。
表現の変更
- 複数の泡が近づいて結合し、離れて分かれる表現を、独自のWebGL2による距離場の合成で実装する。図形と文字から作った装飾用テクスチャを屈折させ、見出しと操作UIは通常のDOMとして残す。
- 動きは固定ステップで更新し、フレームレート差・ポインタの急移動を吸収する。停止指定、動きを減らす設定、タッチ環境、非表示タブ、画面外ではアニメーションを止める。WebGL未対応・コンテキスト喪失時はSVGの静止表示へ戻す。
- 全体を入口 → Community Pulse → Voices → Frequency → Thresholdの順にする。既存のゲーム、ウォレット状態、パスポート、チェックインは維持する。
- Voicesは縦スクロールに応じて横へ流れる3つの場面。ボタン・キーボード・タッチ・横ホイールによる手動操作を優先する。スマートフォンや動きを減らす設定では自動横移動を行わない。
- Frequencyには既存の許諾済みBreeze Zeroのプレイヤーを置く。音声は操作後のみ再生し、シークと停止ができる。架空のPodcast音源を本物として表示しない。
- Thresholdの参加リンクではhover/focusで文字が解読される表現を使う。リンクの意味と操作は常に利用でき、動きを減らす設定では通常の文字を表示する。
出典と範囲
実装例のコードは移植せず、構成・振る舞いを参考に独自実装した。新しい画像・外部音源・ライブラリは追加していない。会話・活動は引き続きデモ用サンプルで、バックエンド・実ウォレット・実トークンには接続しない。
検証
泡の境界、結合と分離、ポインタ追従と解放、フレームレートの独立性、復帰時の時間制限、横スクロールの終端をテストで先に固定。ブラウザで描画/停止、横送り、再生/シーク、参加導線、PC・スマートフォン幅を確認する。上流更新後の通常/デモビルド、型、lint、単体テスト、docsビルドを実行する。