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

翻牌特效项目共识 (CONSENSUS)

需求描述

开发一个基于 React 的翻牌 Web 应用，模拟抽盒机的翻牌流程及特效。重点在于 3D 翻牌动画、星空粒子背景以及整体视觉体验。

验收标准

1. 网格布局：实现 3x4 的响应式卡片网格。
2. 3D 翻牌：卡片点击后执行平滑的 3D 翻转动画。
3. 特效层：翻牌时伴随全屏星空背景和闪烁粒子特效。
4. 大图展示：翻牌后产品大图居中弹出，具备毛玻璃遮罩。
5. 静态数据：使用 Mock 数据驱动，包含产品图片、用户头像、昵称、倒计时。

技术方案

• 框架：React 19 + TypeScript
• 构建工具：Vite
• 样式：TailwindCSS + CSS Modules/Raw CSS (用于复杂动画)
• 动效库：Framer Motion (可选，若需更细腻控制) 或 纯 CSS 3D Transforms。

技术约束

• 纯前端实现，暂不对接后端接口。
• 代码部署在 douyin_game 目录下。

集成方案

• 作为一个独立项目在 douyin_game 中进行初始化。

风险与假设

• 所有图像资源（产品图、头像）暂时使用 generate_image 工具生成的占位图或默认素材。