ASIA/TOKYO00:00:00

{ 4S }

Web · 2026

4S Referral Network

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

Services: DesignWebGLFrontend
Client: 4S
Production: ZFILMS
Year: 2026

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

COMMITS482

SRC LINES44,406

MODULES157

STACKThree.js / R3F

裏側の仕組み

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

// DEMO 本番と同じ WebGL 樹形。実サンプル81人をタップで辿れる。

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

紹介の連鎖をいちばん遠くまで伸ばした「始祖」を競うランキング。累計と週次で順位が入れ替わるのが肝で、累計 1 位の IVS スタッフ (1,284 / 週 65) は週次で沈み、藤田雄輔 (54 / 週 320) が 1 位へ跳ね上がる。並び替えは spring の物理でオーバーシュートさせ、行が滑って追い抜く手触りを持たせた。4 位の浅尾尭洋 / ZFILMS が YOU。

実装の現物 — 始祖ランキング — トグルで順位が組み替わる本番盤

// GENESIS — 始祖ランキングFOUNDERS AWARD

1首位

IVS スタッフFounders Pool · IVS Kyoto1,284▼9

犬居もちFounder / CEO · Mochi Labs962—

桜井雪CEO · Northwind731▼8

浅尾尭洋YOUCEO / ZFILMS · ZFILMS412—

鈴木大輔Co-Founder · Quanta389▼8

吉田翔太Tech Lead · Kestrel305▼1

青木美咲Head of Marketing · Tidepool Capital256▲4

中村高志Founder · Plier198▼6

—

畑中美結Investor · NSV Wolf147

—

桜Chief of Staff · Beacon Games98

—

藤田雄輔Designer · Fitroom54

—

新井ゆうきDesigner · Studio Lab27

// DEMO 累計 ⇄ 週次で spring 並び替え。左は始祖島川の 8 ペルソナを 1 枚ずつ。#1 奪取で gold confetti。

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

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

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

// LIVE DEMO — 実挙動の再現

視界の外へ飛ぶときの 2 段演出

視界の外への切替は、端から畳んでから中心へ向かって咲き直す 2 段構え。線は中点に吸い込まれ、また中点から両端へ伸びる。座標も時間も本番の実装値をそのまま使っている。

実装された固有機能

指数展開スタック +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 を完備。

START A PROJECT

この作品のような企画を、
次の事業課題へ。

閲覧中の作品情報を引き継いだ状態で、目的・媒体・ご予算から制作範囲を整理できます。

この作品をもとに相談する

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