# 第三阶段实现计划：塑造个性（Porsche 点睛）

> 前置条件：第一阶段（Accenture骨架）+ 第二阶段（Bain血肉）已完成
> 核心原则：克制是金，动效只为品牌叙事服务，不炫技

## 总览

**目标：** 用精巧的动效为网站注入灵魂，传递"技术驱动变革"的品牌故事
**预计任务数：** 5 个核心任务
**验收标准：** TypeScript 0 errors + ESLint 0 errors + 动效流畅不卡顿

---

## 任务 1：滚动视差增强（Hero + 关键 Section）

**优先级：** 高
**依赖：** 无

### 改动文件
- `src/app/(marketing)/home-content.tsx`（Hero 部分）
- `src/components/sections/stats-bar.tsx`（数字渐进式出现）

### 具体改动

1. **Hero 多层视差**
   - 背景光晕层：滚动时缓慢下移（速率 0.3x）
   - 网格纹理层：滚动时缓慢上移（速率 0.15x）
   - 内容层：正常滚动，但有淡出效果（已有）
   - 三层速率差异创造深度感

2. **StatsBar 数字渐进式"生长"**
   - 从 0 增长到目标值的 countUp 动画（已有，优化缓动）
   - 数字出现时伴随轻微的 scale 从 0.9 → 1
   - 单位和标签延迟 200ms 出现

### 验收标准
- [ ] Hero 有多层视差深度感
- [ ] 数字滚动动画流畅自然
- [ ] 所有动效使用 transform + opacity，性能良好
- [ ] 尊重 prefers-reduced-motion 设置

---

## 任务 2：品牌动效叙事线

**优先级：** 中
**依赖：** 无

### 改动文件
- `src/components/sections/service-card.tsx`（色条动画）
- `src/components/sections/case-card.tsx`（成果数字点亮）
- `src/components/sections/section-header.tsx`（装饰线生长动画）

### 具体改动

1. **ServiceCard 左侧色条"生长"动画**
   - 入场时：色条从高度 0 → 完整高度
   - 从下往上生长，速率 0.4s ease-out
   - 比卡片内容早 100ms 开始

2. **SectionHeader 装饰线动画**
   - 入场时：装饰线从 0 高度 → 完整高度
   - 与 eyebrow 文字同步出现

3. **CaseCard 成果数字"点亮"**
   - 入场时：数字从灰色 → 白色 + 轻微放大
   - 延迟 200ms，在挑战/方案文字之后出现
   - 象征"从问题到成果"的叙事

### 验收标准
- [ ] ServiceCard 色条有生长动画
- [ ] SectionHeader 装饰线有入场动画
- [ ] CaseCard 成果数字有延迟点亮效果
- [ ] 动效形成品牌叙事线，不堆砌

---

## 任务 3：微动效精细化

**优先级：** 中
**依赖：** 无

### 改动文件
- `src/components/ui/button.tsx`（hover 填充动画）
- `src/components/sections/product-card.tsx`（hover 微动效）
- `src/components/ui/static-link.tsx` 或全局 CSS（链接下划线动画）

### 具体改动

1. **Button hover：从左到右颜色填充**
   - 背景色从左往右滑入，不是突然变色
   - 时长 250ms，ease-out
   - 文字保持在最上层

2. **卡片 hover 精细化**
   - 上浮 2px → 4px（更明显但克制）
   - 阴影从浅到深的过渡
   - 边框颜色的微妙变化

3. **链接 hover：下划线扩展**
   - 文本链接 hover 时，下划线从中间向两边扩展
   - 使用伪元素实现，不影响布局

### 验收标准
- [ ] 按钮有从左到右的填充动画
- [ ] 卡片 hover 动效细腻自然
- [ ] 链接有下划线扩展动画
- [ ] 所有动效时长 ≤ 300ms，不拖沓

---

## 任务 4：滚动进度指示器

**优先级：** 低
**依赖：** 无

### 改动文件
- 新建 `src/components/ui/scroll-progress.tsx`
- `src/app/(marketing)/layout.tsx` 或首页引入

### 具体改动

1. **顶部细进度条**
   - 高度 2px，固定在页面顶部
   - 品牌红渐变填充，随滚动增长
   - 轻量化，z-index 很高但不干扰内容

2. **可配置选项**
   - 可选颜色（默认品牌红）
   - 可选高度（默认 2px）
   - 可选位置（顶部/底部，默认顶部）

### 验收标准
- [ ] 进度条随滚动平滑增长
- [ ] 不干扰页面内容
- [ ] 性能良好，不影响滚动流畅度

---

## 任务 5：页面入场与过渡优化

**优先级：** 中
**依赖：** 无

### 改动文件
- `src/app/(marketing)/home-content.tsx`（Hero 入场优化）
- 全局 CSS（过渡曲线统一）

### 具体改动

1. **首屏渐进式入场**
   - 背景层先出现（淡入）
   - 内容层后出现（上移 + 淡入）
   - 各元素按层级依次入场，有节奏感

2. **动效曲线统一**
   - 全站使用统一的 ease-out 曲线
   - 快速开始，缓慢结束（cubic-bezier(0.22, 1, 0.36, 1)）
   - 模拟物理世界的减速感

### 验收标准
- [ ] 首屏入场有层次感、节奏感
- [ ] 动效曲线统一自然
- [ ] 完全尊重 prefers-reduced-motion

---

## 总体验收

### 功能验收
- [ ] Hero 有多层视差深度感
- [ ] 品牌红元素形成叙事流动线
- [ ] 微动效细腻自然，不炫技
- [ ] 滚动进度指示器工作正常
- [ ] 页面入场有层次感

### 技术验收
- [ ] TypeScript 类型检查通过（0 errors）
- [ ] ESLint 检查通过（0 errors）
- [ ] 构建成功，无报错
- [ ] 所有动效使用 transform + opacity，性能良好
- [ ] 完全尊重 prefers-reduced-motion 设置

### 设计验收
- [ ] 动效克制，只为品牌叙事服务
- [ ] 动效曲线统一自然
- [ ] 不干扰阅读和操作
- [ ] 整体传达"技术驱动变革"的品牌故事

---

## 执行顺序

```
任务1（视差增强） → 任务2（品牌叙事线） → 任务3（微动效） → 任务4（进度指示器） → 任务5（入场优化） → 总体验收
```

**并行可能性：** 任务 2、3 可以部分并行，修改的组件不同。