湛兮
88 lines
4.8 KiB
Markdown
88 lines
4.8 KiB
Markdown
# 设计文档：「与湛兮(花名)的数字思维体对话」作品集重设计
|
||
|
||
日期：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 不低于现版本
|