WebGL リファラルグラフ
three.js LineSegments を単一バッファに詰めた自作エッジエンジン。halo+core 二重描画・sway 物理・fade/grow を useFrame 1 ループで駆動。
4S Referral Network
参加者の招待ネットワークを WebGL の生きた樹形グラフで可視化。始祖ランキングまで含め、4S 本体の API と連携するフロントを 1 人で実装した。
COMMITS479
LINES+144,233
STACKthree / r3f / d3
OPEN LIVE ↗本番サイトを新しいタブで開く認証不要の WebGL 樹形グラフ。クリックで focus 移動、FLIP モーフを体感できる
OPEN LIVE ↗本番サイトを新しいタブで開く#1 巨大 showcase + 金の紙吹雪。スクロール速度連動 sway の Lenis LP
実装の現物 — アンビエントグロー (実装の現物)
本番の背景で使ったカーソル追従グロー。@harvested-from 4s-referral-network
WHAT'S INSIDE
hop 距離 LOD
focus からの距離で 4 段階に情報密度を自動可変。1,000 人規模のツリーでも破綻しない。
FLIP モーフ遷移
focus 切替は近距離なら FLIP で盤面ごと補間、遠距離は collapse→bloom のページ切替風演出。
始祖ランキング
招待の起点ごとに系譜サイズを集計。スクロール速度を CSS 変数化して各カードが sway。
