参加者の招待ネットワークを WebGL の生きた樹形グラフで可視化。始祖ランキングまで含め、4S 本体の API と連携するフロントを 1 人で実装した。
招待の連鎖を、一枚の生きた樹形図にする。4S Referral Network は IVS2026 のリファラル機能を Three.js + React Three Fiber で実装した独立アプリで、WebGL 上に紹介ツリーと始祖ランキングを描く。ノード表示は focus からのグラフ距離で動的に間引かれ (xl 360×360 / l 240×104 / 2 hop 以上は顔と名前だけ)、focus 切替は全カードが位置とサイズの FLIP で morph する。
// MOTION 本番と同じ WebGL 樹形。実サンプル81人をタップで辿れる。
WebGL 樹形の実ページを1本だけ live で埋め込み、認証必須の始祖ランキング (公開 URL は 307) は、下の実演ビネットでサンプルデータの挙動をそのまま再演する。
// LIVE 招待の親子連鎖を描く実ページを live 埋め込み。クリックで操作。
tier 別 cap (l=6/m=4/s=3) を超えた兄弟は +N ピルに集約し、click ごとに cap を ×2 する。1,000 人ツリーでも 6〜8 click で全展開できる cursor ベースの progressive expansion。
4S 本体からの ?handoff=<code> を consume して access/id/refresh トークンを localStorage 化。idToken 失効 5 分前の proactive refresh と 401 時の一度きり reactive refresh を持つ。
referral-ancestors と referral-descendants を並列 fetch し、entry.user に同居する name/title/bio/avatar/slug で基本表示を完結。/slug は ProfilePanel 開示時のみ叩き 404 spam を排除。
Snappy / Smooth / Silky(既定) / Cinematic を Tweaks で切替。密度・ノードサイズ 0.7〜1.3×・sway 強度・エッジ線種・招待枠パターンまで全て localStorage 永続化。
Dispatcher が PC は WebGL、モバイルは HTML 版へ振り分け。adaptive DPR・触覚 haptic・ピンチカメラジェスチャ・ボトムシートでスマホ実機に最適化する。
始祖が viewport 上に消えると上部 sticky stub で復帰導線を出す。ancestor chain を辿る breadcrumb、R/F/I/Esc ホットキー、? キーで shortcut help modal を完備。
Latest projects
ディレクターズ葛藤 / IVS2026 MV「無限夢想家」 / SPIKES / XDEAL / IVS Event Frontend / 熟と燗 / Metoree TVCM / IVS2025 AI CM Suite / Totally Startuped MV / Ojima Dental Clinic / STATION Ai / Paytner WebCM
島川 敏明
川嶋 利明
月山 寿明
飛鳥井 敏哉
三田村 敏弘