# 翻牌特效原子任务 (TASK)

## 任务依赖图
```mermaid
graph TD
    T1[T1: 初始化项目环境] --> T2[T2: 实现星空背景层]
    T2 --> T3[T3: 开发 3D 翻牌组件]
    T3 --> T4[T4: 组装网格与逻辑控制]
    T4 --> T5[T5: 完善大图展示与粒子特效]
```

## 原子任务定义

### T1: 初始化项目环境
- **输入**: 空目录 `douyin_game`
- **输出**: Vite + React 项目骨架，安装 TailwindCSS
- **验收**: `npm run dev` 可正常启动

### T2: 实现星空背景层 (StarryBackground)
- **输入**: Tailwind 配置
- **输出**: 一个全屏背景组件，带有动态闪烁星星
- **验收**: 背景显示深蓝渐变，星星随机分布且有呼吸感

### T3: 开发 3D 翻牌组件 (FlipCard)
- **输入**: 基础 CSS 3D 知识
- **输出**: 支持正面（用户信息）和背面（产品图）切换的卡片
- **验收**: 点击触发平滑翻转，背面图片居中

### T4: 组装网格与逻辑控制 (CardGrid)
- **输入**: 3x4 布局需求
- **输出**: 一个包含 12 张卡片的网格，支持单次点击状态管理
- **验收**: 点击不同卡片各自翻转

### T5: 完善大图展示与粒子特效 (ProductModal)
- **输入**: 翻牌触发回调
- **输出**: 点击翻牌后弹出居中大图，背景变暗且带粒子飞散
- **验收**: 展示效果震撼，符合泡泡玛特直播间风格