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

日期：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 区段，滚动量映射轮内时间轴：

提问（0→15%）：访客气泡逐字打出，steps() 离散节奏
思考（15→35%）：流体 thinking，内容区仅 shimmer 占位——刻意停顿即非线性核心
爆发生成（35→75%）：expo.out 爆发；标题打字机、卡片不等间隔 stagger（模拟 token 不均匀到达）、数字滚动跳变
余韵（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 不低于现版本

4.8 KiB Raw Permalink Blame History Unescape Escape