# 抖音游戏翻牌特效需求对齐

## 原始需求

用户希望在 `douyin_game` 项目中开发一个翻牌 Web 应用，参考泡泡玛特直播间的翻牌抽盒效果。

## 参考截图分析

![参考图1](/Users/win/.gemini/antigravity/brain/192e2707-e873-48c7-9161-73a09b835351/uploaded_image_0_1768026980546.jpg)
![参考图2](/Users/win/.gemini/antigravity/brain/192e2707-e873-48c7-9161-73a09b835351/uploaded_image_1_1768026980546.jpg)
![参考图3](/Users/win/.gemini/antigravity/brain/192e2707-e873-48c7-9161-73a09b835351/uploaded_image_2_1768026980546.jpg)

### 核心功能分析

从截图中观察到以下特征：

1. **卡片网格布局**
   - 3x4 的卡片网格（共 12 张卡片）
   - 每张卡片显示挂件产品图片
   - 绿色方格背景，白色卡片

2. **卡片状态**
   - 未翻开状态：显示产品缩略图+用户头像+昵称+倒计时
   - 翻开后状态：大图展示产品详情

3. **翻牌特效**（图3展示）
   - 深色星空背景
   - 星星闪烁粒子效果
   - 产品大图居中展示
   - 卡片 3D 翻转动画

4. **交互元素**
   - 用户头像标识
   - 昵称显示
   - 抽取倒计时

---

## 边界确认

### 开发范围

- [x] 卡片网格布局 UI
- [x] 3D 翻牌动画效果
- [x] 星空背景特效
- [x] 粒子闪烁效果
- [x] 产品大图展示遮罩层

### 排除范围

- [ ] 后端抽盒逻辑（已有）
- [ ] 支付流程
- [ ] 用户身份认证

---

## 疑问澄清

> [!IMPORTANT]
> 以下问题需要用户确认

### 1. 项目位置

当前 `douyin_game` 目录为空，请确认：
- 是否在此目录新建独立项目？
- 还是集成到现有 `game/app` 项目中？

### 2. 技术栈选择

现有项目使用 **React + TypeScript + Vite + TailwindCSS**：
- 是否沿用相同技术栈？
- 或者使用纯 HTML/CSS/JS 开发独立页面？

### 3. 数据来源

翻牌游戏的数据（产品信息、用户信息等）：
- 是否需要对接后端 API？
- 还是先开发静态演示版本？

### 4. 翻牌触发方式

用户如何触发翻牌：
- 点击自己预定的卡片？
- 观看他人翻牌的直播效果？
- 两者结合？

### 5. 特效细节偏好

关于"人物背后的翻牌特效"，请确认：
- **星空背景**：是否需要动态渐变星空？
- **粒子效果**：闪烁星星数量和密度？
- **翻转动画**：水平翻转还是垂直翻转？
- **展示遮罩**：是否需要毛玻璃效果？

---

## 技术理解

### 现有项目分析

项目 `game/app` 技术栈：
- React 19 + TypeScript
- Vite 构建工具
- TailwindCSS 样式
- 已有丰富的 CSS 动画效果（`Explosion.css`）

### 翻牌特效技术方案

| 特效组件 | 技术实现 |
|---------|---------|
| 3D 翻牌动画 | CSS `transform: rotateY()` + `perspective` |
| 星空背景 | 深色渐变 + CSS `radial-gradient` |
| 星星闪烁 | CSS `@keyframes` 动画 + 随机延迟 |
| 粒子效果 | Canvas API 或 CSS 伪元素 |
| 遮罩层 | `backdrop-filter: blur()` 毛玻璃效果 |

---

## 等待用户回复

上述疑问需要用户回复后才能进入架构设计阶段。