# Shopify Editions W26 拆解：设计评审

> 评审对象：本目录 teardown.html 与五份文档。视角：以被拆对象自身的高度（Awwwards SOTD + Developer Award 动效子项 9.40）为标尺，检验拆解的精度与完成度。

## 一、达标之处

1. **针对性视觉成立**。拆解页完全生活在 Renaissance Edition 的语言里：暖纸 #f7f7ee 与橄榄墨 #292919 双主角、四支真字体本地接入（含 Imperial Script 花体首字下沉）、左侧达·芬奇手稿框随阅读进度按原站章→组映射点亮构造线、目录罗马数字由 CSS counter 生成（与原站同法）、列表区铺原站真实纸纹——放在原站旁边是同一家人。
2. **抽取深度对得起对象**。30 个 JS chunk 全量下载、24 个精读；13 份 Theatre 状态全部枚举、3 份落盘解析；蝴蝶顶点/片元着色器逐行；技能星座连线算法（每 120° 扇区取最近邻）、斥力、碰撞、稳定判定的全部常量；构造线的黄金分割坐标反推（螺旋台阶比值 1.636/1.600≈φ）。
3. **五台可跑装置全部原值**：构造线剧场（pathLength 描线 3s + 首亮 4s 闪烁 + 八组切换）、蝴蝶扑翼（三层叠波公式直搬）、技能星座（2.1/0.7/400 邻近物理 + 扇区连线 + grid-rows 弹窗 + 计数三次方上升）、罗马数字商店（三 counter + 悬停翻转 + 真实定价 XIV.LII）、羊皮纸幕布（overlay −1→1 滑杆）。模拟与简化处逐一标注。
4. **不闭门造车**。独立研究通道核验外部事实：奖项三连（Awwwards SOTD 7.92 + Developer Award + SOTM、CSSDA 8.71）、内部团队制作、九届世界观年表；并产出四项公开网络无人记录的独家核验——控制台花体拉丁文「clavis reserat」对应隐藏路由 /key、`?theatre` 参数加载 Theatre Studio 编辑器、`?popup=` 空参免点击直开彩蛋弹窗、/key 实为跨窗 WebRTC 透镜装置并以无头双窗完整走通（拾钥匙→插锁→金币雨→紫光灯涂鸦）。Hydrogen 由推断升实锤（powered-by 响应头）。
5. **对抗审查动真格**：六处漂移（AI 双关定级、Hydrogen 级别、CSS 字节口径、视频路数、字符画误读、章高口径）全部当场改正并在《事实核查》留痕。

## 二、相对原站仍差在哪（体裁取舍说明）

- **WebGL 舞台没有复现**。原站的心脏是 Theatre.js 驱动的 13 个 r3f 场景；拆解页以「参数表 + 状态文件解析 + 幕布滑杆 demo」呈现，未起 three.js 上下文——在文档型页面里再造一个 WebGL 舞台会喧宾夺主，属有意取舍。
- **蝴蝶已有两级**：装置二为 Canvas 公式示意，装置七为真几何 WebGL（单只标本）；仍未做 50 只实例化 + KTX2 贴图的整幕复现。
- **Sobel 素描结账**只以截图与参数记录，未做边缘检测 demo。
- **View Transitions 灯箱**未复现（记录了三个命名过渡与 contain/cover 技巧）。

## 三、可执行改进

| # | 改进 | 状态 |
| --- | --- | --- |
| 1 | 拆解页侧栏构造线随阅读进度切换线组（原站行为的移植） | **已落实**（IntersectionObserver + 章→组映射节选） |
| 2 | 外部研究独立成附录、逐条带 URL，且独家核验单独标注 | **已落实** |
| 3 | 罗马数字商店 demo 用真实定价 $14.52 并做数量联动 | **已落实** |
| 4 | 用已落盘的 rest.json 起真几何蝴蝶实例 | **已落实**（装置七：2,589 顶点真网格 + 折翼着色器原文；贴图为 KTX2/UASTC 需转码器，以法线明暗替代并注明） |
| 5 | 真实 Theatre state 轨道回放 | **已落实**（装置六：HeroScene 32 轨 87 帧全量内嵌，贝塞尔手柄同式求值，曲线板 + 播放头 + cube/bloom/particles 联动） |
| 6 | /key 彩蛋立档 | **已落实**（页面新增 IX 隐藏章：popup.min 2,414 行逐行 + 双窗 WebRTC 实测全流程 + 七张实录；《设计解构》十全文） |

## 四、一句话结论

这份拆解把 Renaissance Edition 最难讲清的三件事——「编排即内容」的 Theatre.js 架构、达·芬奇构造线的黄金分割工程学、以及散落全站的罗马数字与彩蛋系统——全部拆到了可回溯、可复刻的程度，并用外部核验补上了「行业坐标」这块通常缺失的拼图；剩余差距集中在 WebGL 复现的体裁取舍，属完成度加分项而非精度缺口。