ASIA/TOKYO00:00:00

{ 4S / IVS }

Web · 2026

4S Referral Network

参加者の招待ネットワークを WebGL の生きた樹形グラフで可視化。始祖ランキングまで含め、4S 本体の API と連携するフロントを 1 人で実装した。

Services: Design / WebGL / Frontend
Client: 4S / IVS
Production: ZFILMS × 4S
Year: 2026

招待の連鎖を、一枚の生きた樹形図にする。4S Referral Network は IVS2026 のリファラル機能を Three.js + React Three Fiber で実装した独立アプリで、WebGL 上に紹介ツリーと始祖ランキングを描く。ノード表示は focus からのグラフ距離で動的に間引かれ (xl 360×360 / l 240×104 / 2 hop 以上は顔と名前だけ)、focus 切替は全カードが位置とサイズの FLIP で morph する。

COMMITS444

SRC LINES43,045

MODULES153

STACKThree.js / R3F

裏側の仕組み

実装の現物 — 招待ツリー — 本番と同じ WebGL を、このページ上で走らせる

REFERRAL TREE — 実装の現物 (Three.js / R3F の実 WebGL)

島川敏明代表

tree: 81 nodes
visible: 35
stacked: 18
descendants: 80
phase: idle

▶ 始祖 stub → far-focus (collapse → bloom)

// MOTION 近似アニメではない。元リポの実サンプル (81 ノード / 8 ブランチ / 深さ 3・実アバター写真 81 枚) を、実装そのままの d3-hierarchy tidy layout・THREE.LineSegments の core+halo twin・drei <Html> の tier 別カードで描いている。+N を押すと cap が ×2 されて指数展開し、カードを押すと位置とサイズの FLIP morph で focus が移る。始祖が視界から外れると sticky stub が出て、そこから戻ると far-focus (collapse → bloom) が走る。モーションは Tweaks の実測 4 プリセット (Snappy / Smooth / Silky / Cinematic)。

本番サイト — 実ページを覗く

WebGL 樹形の実ページを1本だけ live で埋め込み、認証必須の始祖ランキング (公開 URL は 307) は、下の実演ビネットでサンプルデータの挙動をそのまま再演する。

リファラルツリー (sample) — 実ページ liveOPEN ↗

// LIVE 招待の親子連鎖を WebGL 樹形で描く実ページを live 埋め込み。クリックで操作モードに入り、focus 移動・+N スタックの指数展開・cmd+K ファジー検索まで本番そのまま触れる。

実演 — 固有機能をそのまま動かす

// LIVE DEMO — 実挙動の再現

始祖ランキング — 週次 / 累計で順位が組み替わる

実データ GENESIS_RANKING は累計 (descendants) 順と週次 (weeklyGrowth) 順が意図的にズレるよう設計されている。累計 1 位の IVS スタッフ (1,284 / 週 65) は週次に切り替えると圏外へ沈み、藤田雄輔 (54 / 週 320) が 1 位に跳ね上がる。並べ替えは本番と同じ sortByMode()、祝祭は本番と同じ canvas-confetti。4 位の浅尾尭洋 / CEO / ZFILMS が YOU。

// LIVE DEMO — 実挙動の再現

far-focus フェーズ演出

現 visible 外へ飛ぶ切替は FLIP でなく 2 相駆動。端から畳む collapse(480ms / stagger 50ms per hop・cap 120ms) → setFocus → 中心から外向きに咲く bloom(1,400ms / stagger 70ms per hop)。エッジは alpha と線長を同期させ、midpoint に吸い込まれてから midpoint より両端へ伸びる。時間値は ReferralGraphScreen.tsx の実定数、座標は実 tidy layout、人物は実サンプルデータ。

実装された固有機能

指数展開スタック +N

tier 別 cap (l=6/m=4/s=3) を超えた兄弟は +N ピルに集約し、click ごとに cap を ×2 する。1,000 人ツリーでも 6〜8 click で全展開できる cursor ベースの progressive expansion。

Cognito session-handoff

4S 本体からの ?handoff=<code> を consume して access/id/refresh トークンを localStorage 化。idToken 失効 5 分前の proactive refresh と 401 時の一度きり reactive refresh を持つ。

1-phase 実 API 連携

referral-ancestors と referral-descendants を並列 fetch し、entry.user に同居する name/title/bio/avatar/slug で基本表示を完結。/slug は ProfilePanel 開示時のみ叩き 404 spam を排除。

4 段階モーションプリセット

Snappy / Smooth / Silky(既定) / Cinematic を Tweaks で切替。密度・ノードサイズ 0.7〜1.3×・sway 強度・エッジ線種・招待枠パターンまで全て localStorage 永続化。

PC / Mobile 二重レンダラ

Dispatcher が PC は WebGL、モバイルは HTML 版へ振り分け。adaptive DPR・触覚 haptic・ピンチカメラジェスチャ・ボトムシートでスマホ実機に最適化する。

始祖 sticky ＆ナビ

始祖が 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

View All ↗

Next project熟と燗Juku and Kan · 2026