这次 UI 升级的目标不是再给首页加一层装饰，而是把 keplace.top 的首屏变成一个更有记忆点的入口：它仍然是博客、研究、工具和游戏的发布平台，但第一眼应该更像一个正在运行的知识系统。

上一版 Tiger Geek 风格已经解决了品牌感和冲击力，这一轮重点放在两个地方：第一，把 Lorenz attractor 做成真正有空间感的背景引擎；第二，重新设计移动端，让导航、标题、说明和动效不再互相挤压。

为什么选 Lorenz Attractor

Lorenz attractor 是混沌系统里最经典的视觉符号之一。它来自气象学家 Edward Lorenz 在 1963 年研究简化大气对流模型时提出的一组三维微分方程。常见形式是：

dx/dt = sigma * (y - x)
dy/dt = x * (rho - z) - y
dz/dt = x * y - beta * z

在常用参数 sigma = 10、rho = 28、beta = 8/3 下，系统轨迹会在三维空间里形成类似双翼的形状。它不会简单收敛到一个点，也不会做严格周期运动，而是在一个有限区域里持续游走。

这正好适合 keplace.top 的气质：知识、工具、研究和工程实践不是一条直线，而是围绕几个核心主题不断回旋、分叉、靠近、远离，再重新组织。

混沌不等于随机

Lorenz attractor 最有意思的地方在于，它是确定性的，但长期行为又极难预测。

确定性意味着：只要初始状态和方程完全一致，系统的下一步就是确定的。混沌意味着：两个极其接近的初始状态，经过足够长时间后，轨迹可能会明显分离。这就是常说的 sensitive dependence on initial conditions。

这对个人知识系统也很有启发：每天一个微小输入、一个工具改进、一次发布流程优化，短期看只是局部变化；但长期积累后，它会改变整个系统的轨迹。

所以这次我没有把 Lorenz attractor 当作普通背景图，而是把它当作站点的系统隐喻。

这次视觉实现做了什么

首页背景现在不是静态 SVG，而是用 Canvas 在浏览器里实时绘制。生成器仍然是原来的 Python 静态站点流程，只是在页面脚本里加入轻量的本地渲染逻辑，不依赖外部 CDN。

实现上做了几件事：

  • 先用 Lorenz 方程积分生成三维点列。
  • 对点列做 yaw、pitch、roll 三轴旋转。
  • 加入透视投影，让轨迹有前后深度。
  • 用深度控制线条亮度、粒子大小和透明度。
  • 增加三组轮换光门，让首屏有一种被扫描、被点亮的感觉。
  • 保留 SVG fallback，Canvas 就绪后再降低 fallback 透明度。
  • 保留 `prefers-reduced-motion` 降级，避免动效影响可用性。

这套实现的关键判断是：炫技可以有，但依赖要少。首页首屏不应该为了一个效果去拉重型 3D 框架或外部资源。

移动端为什么要重排

桌面端有足够空间，可以让大标题和 Lorenz 双翼同时占据舞台。但移动端不同，旧版的问题很明显：导航像按钮墙，标题、说明、CTA 和动效都挤在一个窄屏里，视觉冲击力有了，可读性和节奏不够好。

这次移动端做了专门重排：

  • Header 变成紧凑品牌栏。
  • 导航改成横向可滑动胶囊条，而不是两列大按钮。
  • Hero 信息层上移，先保证标题和说明可读。
  • 3D Lorenz 舞台下沉，作为视觉背景而不是文字遮挡物。
  • 主 CTA 独占一行，次级 CTA 并排，形成清晰操作优先级。
  • 精选节点卡片变得更紧凑，减少首屏之后的视觉落差。

移动端的核心策略是：不要把桌面首屏硬塞进手机，而是重新定义手机上的阅读和探索节奏。

它对站点意味着什么

这次升级之后，keplace.top 的首页更像一个入口仪表盘，而不是普通博客封面。它把三个层次放在一起：

  • 内容层：博客、研究、教程、工具和游戏。
  • 系统层：静态生成、内容注册表、标签、系列和归档。
  • 表达层：Tiger logo、Geek 控制台、Lorenz attractor、3D 光效和移动端专属排版。

好的个人网站不只是放内容，也在表达一种工作方式。我的目标是让这里逐渐成为一个 Knowledge Operation System：既能沉淀长期内容，也能承载工具实验，还能通过视觉语言让人一眼看出它不是模板站。

后续可以继续迭代什么

接下来可以继续沿着三个方向做：

  • 给 Lorenz 背景增加低功耗模式，在低端设备上自动降低采样密度。
  • 给每个系列页生成不同的视觉参数，让 AI、Quant、工程、工具实验室拥有各自的光谱。
  • 给工具页增加运行状态、维护等级和数据新鲜度，让视觉系统真正连接到站点运行状态。

这次 UI 升级的本质，是把数学图形、个人品牌和发布平台架构接在了一起。Lorenz attractor 不是背景装饰，而是这个站点如何生长的一个符号：确定、有边界、持续演化，而且永远不会只是重复同一条轨迹。