インタラクションと開発
5月. 2026
Lumen Field
Lumen Field は coordination を軸にしたマーケティング体験を end-to-end で構築しました。membership アクセスと treasury の可視性を premium ダーク infra UI で語ります。1 スクロールの funnel：hero、manifesto、membership tiers、treasury lens、season ベース roadmap、community 招待、narrative 横の live Market Field ブロック。
ビジュアル craft が story を担います。React Three Fiber hero が first fold を固定；GSAP と ScrollTrigger がセクション reveal を演出し可読性を保ちます。SCSS modules と design tokens が manifesto copy、tier cards、treasury tiles、roadmap ladder でダークパレットを統一。Market Field は typed Next.js server integration で public spot pricing を短い revalidation で取得——informational、read-only、trading surface ではありません。
Opening hero——deep dark backdrop の glowing centerpiece、treasury oversight の confident headline、3 つの skim-friendly stats。
Manifesto——「Visibility is coordination」見出し、warm explanatory copy、transparency と accountable choices の sidebar。
Membership——「Keys that choreograph—not gatekeep」見出し、inviting intro、価格と skim-ready perk lists の 3 tier cards。
Treasury——「Treasury glass, hardened.」見出し；figures は storytelling のみ、3 skim tiles + 1 wider insight strip。
Roadmap——「Season-based shipping.」見出し；seasons が narrative と milestones を結び、done と next の stepped ladder。
Community——「Join the luminous council.」見出し、steady pacing note、2 clear actions、today vs later の bullets。
Market Field——「Live market context」見出し；public pricing data の watch-only snapshot、tidy asset rows に live price と daily change。