# 设计文档：「与湛兮(花名)的数字思维体对话」作品集重设计

日期：2026-06-11
状态：已批准
备份：`../wang-yuanyou-fluid-portfolio-backup-20260611-110154/`

## 概念

整站是访客与「湛兮(花名)的 AI 分身」的一场对话记录。简历核心（最近一年做 SSE 流式对话、打字机渲染、思考态动画）即设计语言来源——网站本身就是其工作成果的活演示。3D 流体 =「思维体」，是画面中唯一的角色。

决策记录：

- 设计隐喻：AI 对话流（vs 职业河流 / 跨端粒子宇宙）
- 推进方式：滚动驱动的对话（vs 真·对话界面 / 滚动+问答入口）
- 流体形态：单一思维流体 + 三状态状态机（vs raymarched metaballs / GPGPU 粒子流）
- 视觉基调：深色 AI 实验室（vs 浅色编辑风 / 双主题）
- 技术路线：原生 Three.js 自写 shader + GSAP ScrollTrigger + Lenis（vs 纯手写 / R3F）

## 信息架构：7 轮问答

| # | 访客提问 | 回答内容 | 数据源 |
|---|---|---|---|
| 0 | —（开机自检） | 「你好，我是湛兮(花名)。」+ 身份一行 + 6 指标 token 式吐出 | metrics |
| 1 | 先介绍一下你自己？ | 4 条概述逐行流式输出 | resumeSignals |
| 2 | 最近一年具体在做什么？ | 4 张焦点卡依次「生成」 | focusAreas |
| 3 | 有实际项目证明吗？ | 4 个项目，各为一轮子对话：项目名打字机 → 模块逐条吐出 | projects |
| 4 | 技能栈展开讲讲？ | 7 组技能标签 token 流喷发归位 | skills |
| 5 | 之前的团队经历？ | 3 段经历沿垂直对话流时间线生成 | experiences |
| 6 | 怎么联系你？ | 联系方式 + 流体归于平静，「对话已保存」收尾 | — |

页面右侧（移动端顶部）设「会话进度轨」：7 节点对应 7 轮，可点击跳转，保证 HR 快速扫读。

## 思维流体（Three.js 自写 shader）

- 几何：高细分 IcosahedronGeometry；顶点着色器 3 层 FBM simplex 噪声液态位移
- 片元：Fresnel 边缘辉光 + 双色渐变（青 #22d3ee ↔ 紫 #a78bfa）+ 加性内核光晕
- 伴生粒子：约 2000 GPU 粒子，curl noise 流场
- 状态机（uniform 插值过渡）：
  - `idle`：低频低幅呼吸，粒子懒散环绕
  - `thinking`：收缩 0.85x，噪声频率 ×3 搅动，色温升高，粒子吸入
  - `answering`：回弹 1.1x 归位，粒子向内容区喷发消散，辉光脉冲与文字生成同步
- 流体位置随轮次左右缓移（lerp）与内容互让；鼠标轻微视差

## 非线性动画编排（GSAP ScrollTrigger + Lenis）

每轮问答为一个 pin 区段，滚动量映射轮内时间轴：

1. 提问（0→15%）：访客气泡逐字打出，steps() 离散节奏
2. 思考（15→35%）：流体 thinking，内容区仅 shimmer 占位——刻意停顿即非线性核心
3. 爆发生成（35→75%）：expo.out 爆发；标题打字机、卡片不等间隔 stagger（模拟 token 不均匀到达）、数字滚动跳变
4. 余韵（75→100%）：流体回 idle，内容微视差上浮，解除 pin

每轮思考时长 / 爆发曲线 / stagger 间隔均不同（场景配置驱动），避免节奏雷同。向上滚动时时间轴反播，内容「被收回」。

降级：`prefers-reduced-motion` → 关 pin 与打字机、内容直出、流体仅呼吸；移动端粒子减半、DPR ≤ 2、细分降档。

## 视觉系统

- 背景 #070b14 近黑蓝 + 极淡网格点阵 + 流体环境光溢出
- 强调色：青 #22d3ee（访客/交互）、紫 #a78bfa（思维体/回答）、琥珀 #fbbf24（仅指标数字）
- 气泡语言：提问 = 右对齐细边框气泡；回答 = 无框流式文本块 + 左侧渐变「生成光标」竖线
- 字体：等宽（JetBrains Mono / 思源等宽回退）用于指标、token、技能标签；正文 Inter + 思源黑体
- 细节：回答块尾闪烁光标 ▋；项目 logo 复用 public/logos/

## 文件结构

```
src/
  main.js              # 入口：装配 + Lenis + 进度轨
  resume-data.js       # 不动（数据即简历）
  dialogue.js          # 7 轮问答文案与节奏配置
  render.js            # 由 resume-data 生成各轮 DOM
  choreography.js      # GSAP ScrollTrigger 时间轴编排
  mind/
    mind.js            # 流体场景、状态机、粒子
    shaders.js         # GLSL
  styles.css           # 重写
index.html             # 重写骨架
```

新依赖：gsap、lenis。重写 main.js / styles.css / index.html（旧版已整目录备份）。

## 性能与验收

- 单 canvas 固定底层；rAF 与 GSAP ticker 合并；目标桌面 60fps、移动 30fps+
- 文字全部真实 DOM（可选中/可索引），打字机仅控制 reveal；进度轨 + 锚点保证可跳转
- 验收：7 轮完整走查（含回滚反播）、375px 移动端、reduced-motion 降级、Lighthouse 不低于现版本