val-blog/memory/2026-04-26-val-blog-redesign.md

Val-Blog 前端重做 — 设计需求文档

创建时间: 2026-04-26 13:50 GMT+8
任务来源: 谷老板指令
负责人: Helix (前端设计专家)

---

核心设计要素

1. WebGL / Three.js 交互

• 首页需要有引人入胜的 3D 视觉效果
• 考虑粒子系统、流体效果或抽象几何形态
• 支持鼠标/触摸交互
• 性能优化：检测设备能力，低性能设备降级为 CSS 动画

2. 滚动驱动动画 (Scroll-driven storytelling)

• 页面滚动作为主要叙事节奏控制
• 使用 GSAP ScrollTrigger 或类似方案
• 内容区块随滚动渐进式呈现
• 平滑的视差层次效果

3. 非线性导航

• 不是传统菜单式导航
• 考虑以下方案：
  • 空间地图/星图导航
  • 3D 轨道/路径导航
  • 手势/滚动触发的章节跳转
  • 视觉化的内容拓扑

4. 视差 + 3D 空间

• 多层次的视差效果
• Z 轴深度感
• 相机移动/透视变换
• 沉浸式的空间叙事

---

技术约束

• 保持 Hugo 静态站点架构
• 主题目录: val-blog/themes/dreamscape/
• 需要兼容移动端
• 考虑减少运动偏好 (prefers-reduced-motion)
• 中国地区访问友好（避免 Google Fonts 等）

---

现有资源参考

• 当前主题路径: val-blog/themes/dreamscape/
• 现有 Canvas 星空实现可参考
• 现有 CSS 变量和颜色系统
• 文章结构: journey / sketch / gallery / essay

---

下一步

等待 Helix 输出：

1. 概念设计方案
2. 技术选型建议
3. 实现里程碑