跳到主要内容
S.

交互与开发

5月. 2026

Lumen Field

Lumen Field

Lumen Field 是我全程打造的、以协调为核心的营销体验——通过深色高级 infra UI 呈现 membership 访问与 treasury 可见性。一次滚动走完漏斗：hero、manifesto、membership 档位、treasury lens、按 season 的 roadmap、community 邀请，以及 narrative 旁的 live Market Field 加密货币上下文。

视觉工艺承载叙事。React Three Fiber hero 锚定首屏；GSAP 与 ScrollTrigger 分幕揭示区块而不牺牲可读性。SCSS modules 与 design tokens 在 manifesto 文案、tier 卡片、treasury 磁贴与 roadmap 阶梯上保持一致的深色 palette。Market Field 通过 Next.js 类型化 server 集成拉取公开 spot 定价并短 revalidation——仅供信息、只读、非交易界面。

查看站点查看仓库
  • 开场 hero——深暗背景上的发光中心视觉、关于 treasury 监督的自信标题、三个便于扫读的指标。

    开场 hero——深暗背景上的发光中心视觉、关于 treasury 监督的自信标题、三个便于扫读的指标。

  • Manifesto——「Visibility is coordination」标题、温热的说明文案、关于透明与问责的侧边栏。

    Manifesto——「Visibility is coordination」标题、温热的说明文案、关于透明与问责的侧边栏。

  • Membership——「Keys that choreograph—not gatekeep」标题、 inviting 导语、三张带价格与可扫读权益列表的 tier 卡片。

    Membership——「Keys that choreograph—not gatekeep」标题、 inviting 导语、三张带价格与可扫读权益列表的 tier 卡片。

  • Treasury——「Treasury glass, hardened.」标题；数字仅作叙事示意，三个可扫读磁贴加一条更宽的 insight 带。

    Treasury——「Treasury glass, hardened.」标题；数字仅作叙事示意，三个可扫读磁贴加一条更宽的 insight 带。

  • Roadmap——「Season-based shipping.」标题；season 连接叙事与 milestone，阶梯展示已完成与下一步。

    Roadmap——「Season-based shipping.」标题；season 连接叙事与 milestone，阶梯展示已完成与下一步。

  • Community——「Join the luminous council.」标题、平稳节奏说明、两个清晰行动、对比「现在」与「稍后」的要点。

    Community——「Join the luminous council.」标题、平稳节奏说明、两个清晰行动、对比「现在」与「稍后」的要点。

  • Market Field——「Live market context」标题；基于公开定价数据的只读快照，整洁的资产行含 live 价格与日涨跌。

    Market Field——「Live market context」标题；基于公开定价数据的只读快照，整洁的资产行含 live 价格与日涨跌。

喜欢这个作品吗？

联系我