# 开包动画高保真复刻原型

这是根据 Rips 1.33.0 的公开运行行为、格式化 harness 参数与 APK 静态证据重新实现的交互原型。蓝、橙、金、红四套 RARELY 卡包来自用户提供的 `卡包.zip`；卡面、粒子和辅助纹理由程序生成。运行版不包含 Triumph 的源码、生产图片或字体；开包音频取自 1.0.9 生产资源，仅用于内部研究对照，公开发布前需确认使用与再分发授权。

交互式完成度报告：`PACK_OPENING_REPLICATION_REPORT.html`。

## 运行

```powershell
pnpm install
pnpm dev
```

生产构建：

```powershell
pnpm build
pnpm preview
```

## 已实现流程

1. 15 个卡包组成可拖拽的环形陈列。
2. 点击正面卡包，镜头聚焦到单包。
3. 横向拖动模拟撕开封条；进度不足时回弹。
4. 开包时触发包体退场、粒子爆发、可选振动和原版多轨音效。
5. 卡背以迷宫纹理和斜向高光轮播稀有度颜色，再溶解切换到最终卡面。
6. 最终卡面触发 5 秒绿金双色周长追光，并以整圈闪光收束。
7. 揭示阶段可点击加速；结束后点击重新开始。

## 目录

- `src/main.js`：Three.js 场景、状态机、手势与 GSAP 时间轴。
- `src/styles.css`：全屏 UI、移动端安全区和控制层。
- `public/assets/packs/`：四套用户自有透明 PNG 卡包。
- `public/assets/audio/`：19 个原版音效文件、cue manifest 和可替换文件槽。
- `verification/`：桌面与手机视口的自动化截图及验证结果。
- `scripts/verify.cjs`：Playwright 全流程回归脚本。
- `ORIGINAL_PARAMETERS.md`：从公开生产 harness 提取并采用的参数表。
- `REPLICATION_NOTES.md`：逆向证据、技术拆解和产品化替换清单。
- `TECH_STACK.md`：渲染、状态机、音频、验证与部署技术栈说明。
- `bridge-implementation-plan/`：React Native、Web 引擎、后端和 Pages 的完整桥接落地方案。

## 验证

验证脚本需要本机可用的 Edge，Playwright 已作为开发依赖声明：

```powershell
pnpm verify
pnpm verify:report
```

当前验证覆盖 `1440x900` 与 `390x844`，两种视口均走通完整流程，控制台无异常，画布与视口尺寸一致且页面无溢出。

## 音频

原版 19 个音效已接入并在启动阶段通过 Web Audio 预解码。轮播循环、卡位反馈、撕包纸声、开包庆典、揭卡分支和烟花顺序均按 1.0.9 代码参数编排。替换为自有音频时编辑 `public/assets/audio/manifest.json`，cue 说明见 `AUDIO_REPLACEMENT.md`。

## Cloudflare Pages

项目已按 Pages 静态站点准备。`dist/` 只包含抽包动画及其运行资源，不包含调研报告、参数文档或对照截图。

Git 集成配置：

```text
Build system:       v3
Build command:      pnpm build
Build output:       dist
Root directory:     pack-opening-replica 所在目录
```

本地构建后直接上传：

```powershell
pnpm install --frozen-lockfile
pnpm build
npx wrangler pages deploy dist --project-name=rips-pack-opening
```

站点根路径 `/` 直接打开抽包动画。
