学生ピッチ祭典の LP。80 軸の Tweak デザインシステム (enum 37 + slider 43) と LiquidMetal シェーダーで世界観を量産しつつ、Notion(認定団体マスタ) × Google Sheet(招待数) × 4S API(live 子孫数) を entryId で突合し、4S が落ちたら Sheet 値へ degrade する GUILD 運営基盤も自前実装。
SPIKES の見た目は「作り込み」ではなく「量産」で立っている。1 つの軸定義から全要素の見た目が生成され、テーマを差し替えるだけで別世界観のヒーローが生まれる。その中枢を実物シェーダーとモーショングラフィックスで見せる。
// MOTION 近似ではない。本番 spikes.4s.link と同じ計算経路を通している — VARIANT_BASE (variant の人格) → computeLiquidMetalProps(variant, mods, slider) → <LiquidMetal> → computeCanvasFilter の CSS filter → computeRimCssVars + drop-shadow 5 段。流しているのは各サブブランド hero の実ペア (SQUARE/electric・BLITZ/coral・PITCH/amber・SPIKATHON/violet・POPUP/toxic・STAGE/blade・GUILD/mercury) で、1 つのシェーダーエンジンから 7 つの hero が立つのが量産の実像。読み出しは VARIANT_BASE と slider 上書き後の実効値を 2 列で並べており、softness / repetition / angle は Tweak の slider が variant を上書きしている (= 単一の軸定義が全描画を支配する) ことがそのまま読める。GUILD は frozen tier なので 1.5 秒回した後 canvas.toDataURL でスナップショットを撮り、WebGL context を解放して静止画に差し替わる。@harvested-from spikes-lp logoShaderVariants.ts / LiquidMetalCanvas.tsx / LogoShaderPaper.tsx / useShaderFreeze.ts
// MOTION 軸は実測 80 本 (enum 37 + slider 43 = shader 17 / motion 5 / glitch 18 / sectionTitle 3)。プリセットは noir / platinum / blade / dune / oilslick / solar の実 6 種で、切り替わるたびに palette・displayFont・displaySkew・displayStretch・shaderRim・bgPattern・cursor・kinetic が実値で総入れ替えになる (palette トークンは palettes.scss の実 6 種、bgPattern は patterns.scss の実 CSS)。入場は sectionEnter.ts の実 glitch timeline — blue #3A78FF × orange #FF7A1A の chromatic split / blur 7px / brightness 1.35 で、全て glitch* 軸の実 default 値。slider はプリセットと独立していて、sectionTitleGlow (0-3 / step 0.05) を動かすと見出しの halo だけが変わる。プリセットのチップはクリックで適用できる。@harvested-from spikes-lp axes.ts / palettes.scss / patterns.scss / sectionEnter.ts
// MOTION Google フォームは存在しない。実体は Notion(認定団体マスタ → cron /api/cron/sync-orgs → Neon guild_org ミラー) × Google Sheet CSV(招待数) × 4S API referral-descendants(live 子孫数) の 3 源で、突合キーは団体名ではなく referralUrl から抽出した entryId。4S live が Sheet 値を上書きし、ログイン失敗なら source=sheet へ degrade、取り切れなければ truncated で「概算」表示。人物の名寄せは氏名ハッシュ一致 + 入部年 ±1 が一意のときだけ再利用し、別 org (個情法27条) と crypto-shred 済は判定前に落ちる。auto (score 950) でも自動統合はせず必ず人間承認を通す。tierOf / perksFor / parseInvites / scopeToOrg / pickReusablePerson / candidateBand は実装を verbatim 移植したもので、画面に出ている値・tier・スコアは全部この関数群の出力 (招待数と人物のみ SAMPLE 入力)。@harvested-from spikes-lp guildReferrals.ts / notionGuilds.ts / uniguild/matching.ts
メイン LP だけ live で埋め込み、同じシステムから量産されたサブブランド LP や運営基盤はスクショと要点で紹介する（カードにマウスを重ねると中身が展開／自動スクロールする）。
// LIVE Hero は WebGL ではなく hero.mp4 (595KB / mobile 213KB)。LiquidMetal シェーダーは各サブブランド hero (/square /blitz /stage /spikathon …) 側にあり、メイン LP は Contents 6 面 static + GUILD live 1 + Footer 2 static で WebGL コンテキストは実質 1 個。「16 面を回す」のではなく「回さずに済ませる」設計。クリックで操作モードに入り本番そのまま触れる。
▲▼ auto-scroll
▲▼ auto-scroll
▲▼ auto-scroll
▲▼ auto-scroll
▲▼ auto-scroll
▲▼ auto-scrollenum 37 + slider 43 を単一真実源で型定義。buildTweakAttrs() が <html data-*> + CSS 変数へ純関数展開し、SSR で FOUC ゼロ。プリセットは noir / platinum / blade / dune / oilslick / solar の 6 種。
Notion(cron → Neon ミラー) × Google Sheet CSV × 4S API を entryId で突合。4S が落ちたら Sheet 値へ degrade し、取り切れなければ「概算」と明示する。落ちないランキング。
BLITZ / STAGE / SQUARE / POPUP / GUILD / NOMAD / HABATSU / STAFF / NEWS / MAP / 公休ジェネレーター…。1 つのデザインシステムから世界観別ヒーローを量産する。
live / frozen (1.5s → snapshot → context 解放) / static (WebGL 0) の 3 段と concurrency 3 の preload queue で、16 面の shader を context 上限に触れずに配る。
pii_vault / crypto-shred / tombstone / 個情法27条の org 隔離 (scopeToOrg) を自前実装。名寄せは auto (score 950) でも自動統合せず人間承認を通し、不変条件は vitest で固定する。
申請・突合・承認・追跡まで運営の裏側を丸ごと内製。正本は Neon(Postgres) の統合名鑑 DB、表記ゆれは normalizeOrgName() で正規化し、統合は承認 UI で目視確定する。
Latest projects
ディレクターズ葛藤 / IVS2026 MV「無限夢想家」 / XDEAL / IVS Event Frontend / 4S Referral Network / 熟と燗 / Metoree TVCM / IVS2025 AI CM Suite / Totally Startuped MV / Ojima Dental Clinic / STATION Ai / Paytner WebCM
