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

28 lines
1.2 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 翻牌特效项目共识 (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 工具生成的占位图或默认素材。