bindbox-game/docs/翻牌特效/ALIGNMENT_翻牌特效.md

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

原始需求

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

参考截图分析

核心功能分析

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

1. 卡片网格布局

   • 3x4 的卡片网格（共 12 张卡片）
   • 每张卡片显示挂件产品图片
   • 绿色方格背景，白色卡片

2. 卡片状态

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

3. 翻牌特效（图3展示）

   • 深色星空背景
   • 星星闪烁粒子效果
   • 产品大图居中展示
   • 卡片 3D 翻转动画

4. 交互元素

   • 用户头像标识
   • 昵称显示
   • 抽取倒计时

---

边界确认

开发范围

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

排除范围

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

---

疑问澄清

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() 毛玻璃效果

---

等待用户回复

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