# 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. 实现里程碑