1.5 KiB
1.5 KiB
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 输出：
- 概念设计方案
- 技术选型建议
- 实现里程碑