# Shopify Editions W26 拆解：出处与方法

> 每一类数值怎么来的、哪些实锤、哪些推断、还有什么没拿到。

## 一、抽取链路

| 步骤 | 做法 | 产物 |
| --- | --- | --- |
| 1. 真实捕获 | `skills/design-teardown/scripts/capture_site.py`（Playwright + Chromium，1440×900 @1.5x） | tokens.json、design-tokens.css、real-assets/** + manifest.json、recording/scroll.webm、keyframes/00-07.jpg、screenshots/hero.jpg |
| 2. 样式表原文 | tailwind-G-N6aznT.css（129,725 B）+ fonts-latin css 落盘展开精读 | 全部字阶、构造线、罗马数字、技能标签、View Transition 规则 |
| 3. JS 全量精读 | HTML 中 modulepreload + chunk 引用图谱共 30 个 chunk 全部下载（合计约 4.4MB），美化后通读关键 24 个 | 滚动/分区/主题/技能物理/蝴蝶着色器/Sobel/商店/彩蛋全部参数 |
| 4. Theatre 状态 | 13 份 state JSON 全部枚举，3 份下载（Hero/Sidekick/Checkout） | 场景对象清单、时间轴长度 10、轨道构成 |
| 5. 逐屏截图 | 独立 Playwright 脚本（SwiftShader 软渲染 WebGL），fonts.ready + 逐章滚动 + 交互驱动 | assets/screens/00–32 共 33 张（含 #beanie 弹窗、技能悬停态） |
| 6. 定向补抓 | 服务端直连（manual_ 前缀） | rest.json、butterfly2_256.ktx2、PMREM 环境贴图、texture-src-90、Line_Grid.svg、Hero_desktop.ktx2、emoji1、Inter Variable、Sidekick 卡图标视频 |
| 7. 外部研究 | 独立研究通道：官方新闻与幕后文、Awwwards/CSSDA 奖项页、webgpu.com、HN、历届归档页；并对线上构建产物二次核验（响应头、隐藏路由、?theatre 开关、字符画破译） | 《设计解构》附录（每条带 URL） |
| 8. /key 路由捕获 | 直开 /editions/winter2026/key：HTML/DOM/请求图谱/控制台落盘；补抓 popup.min（92,692 B）与 CoinRain / popupHandlerSingleton / useKeyPopupStore / index-mIAXNr8Q 四 chunk；popup.min 2,414 行全文精读 | key_capture 档案 + 弹窗侧全部类（PopupScene/WebRTCReceiver/Alignment/VideoPlane/GridPattern/Particles/Graffiti/SectionModel/AnimatedModel/Boids/Keyhole/ColorCycle/ScrollSync/PositionBroadcast/DragController/SectionSync） |
| 9. 双窗联动实测 | Playwright 双页：主窗滚到 Shipping → 页内 import popupHandler 强制初始化 → dispatch open-popup → 捕捉弹窗 → WebRTC 真握手（video readyState 4）→ 拾钥匙/丢锁孔/涂鸦模式全流程截图 + BroadcastChannel 抓包 | assets/key/01–07 七张实录 + 消息计数（canvas-rect/main-window/active-section 各 294、ripple 2、webrtc-ready 1） |
| 10. Theatre 状态解码 | 3 份 state 全量解析：trackIdByPropPath 反查属性路径、关键帧含贝塞尔手柄导出 | 普查表（33/41/19 轨、87/87/34 帧）+ 拆解页装置六的回放数据 |

## 二、实锤清单（直接抽取）

- **色**：topHex 词频表（#292919 与 #f7f7ee 各 23 并列第一）；样式原文中 #dcdcd0/#e2e2d9/#909083/#5c5c4e/#8051ff/#D7D7CF/#434343；JS 常量 uGlowColor=8969727（=#88DDFF）、面罩 #7126ff、Sobel 底色 [.995,.995,.933]
- **字**：4 支字体真文件（24,792 / 30,440 / 15,572 / 67,188 B）；@font-face 原文含 feature 设置；全部字阶 clamp 公式；`text-box:trim-both cap alphabetic`；JP/DE 覆写
- **缓动**：14 条 cubicBezier 计数表；四支主曲线原文（back/frame/lines/fade）；Lenis easeOutExpo 函数体
- **滚动**：Lenis 实例化五参数原文；分区公式（earlyCrossfade .2）；导航阈值三组数（.4/.7/.75 与 [−.85,.15]/[−.3,.7]/[−.25,.75]）
- **WebGL**：13 份 Theatre state 文件名与 3 份内容（对象清单、sequence 长度 10）；场景资产 40 个 KTX2 URL（bg + desktop + 13 张移动 fallback）；bloom 默认值四参数；序曲 100ms/5000ms/三次方；detect-gpu tier 映射与降级链；KTX2 流式（80 字节头、ZSTD wasm、worker 池）
- **蝴蝶**：顶点/片元着色器全文；50 上限；rest.json 与贴图字节数；出生分布公式
- **技能星座**：2.1/0.7/400/0.4、斥力 80、碰撞间距 50、扇区数 3、连线 #D7D7CF 1px .8、弹窗 grid-rows 与方向翻转变量、计数 1s 三次方、emoji 参数、vibrate(10)、GLSL hash 常量、SSE init/update 事件名与字段（topSkillsSSEEndpoint 由 CMS 下发）
- **商店**：quantity/dollars/cents 三个 upper-roman counter；`cart/{variantId}:{qty}`；开 800ms/收 500ms；#beanie 深链逻辑；「Renaissance Person / Beanie / $14.52 / All sales are final」文案（截图可证）
- **构造线**：SVG 全部 path/circle 坐标（黄金分割线 y=336.13/543.87、螺旋台阶 80.25/49.04/30.65、圆 r=425/550/805/917）；章→组映射表；描线/闪烁/加载三段时序与四支曲线；roman counter 目录
- **工艺**：View Transition 三命名；inert 清单；视频 12 路 source 矩阵；卸源逻辑；content-visibility 500ms；Rive 300/600ms 与 rootMargin；console 彩蛋字符画本体；emoji-pack zip 下载链接；popup wheel 0.15
- **文案与结构**：12 章 id 与 h2、12 段章导语全文、每章 article 计数（合计 200）、hero 高度 150svh translate −100%
- **/key 装置**（popup.min + 四 chunk 原文）：弹窗尺寸公式 min(vw,vh)×.53×(4/3)；captureStream(60)/5Mbps/60fps/16ms requestFrame；信令 offer 100ms 重发、10s 超时；对齐 fov 50/planeZ −5/lerp .25；16 种消息名全录；12 件收藏品 GLB URL/scale/rotation 装配表；金漆 #BF9852（=12556114）metalness 1 roughness .2；HDR empty_warehouse_01；Boids 上限 12、带 15±1 节、链 lerp .28、鱼形宽度公式、平方反比分离 r²<.16；锁孔高亮 envMapIntensity 1→10、判距 <2；金币雨 150 枚/gravity 4/初速 2.5/spread .3/coinScale .075（Theatre 轨 coinRain）；溶解 fbm3d 8×p 四倍频、边缘 ×10；涂鸦 KTX2 URL、1:2 长卷、totalProgress×2；紫光灯/抖动/水面等 14 支透镜着色器全文；失焦 10s/隐藏 9s/冻结 3×1s 纪律；?mode=scan、?debug=1、?popup= 三个 URL 开关；Remix manifest 的 /cart、/merch、/test-500、/video/:handle 隐藏路由名
- **Theatre 关键帧**（3 份 state 复算）：87/87/34 帧普查；HeroScene camera.position.z 四帧 −18.57/6.45/10.34/−2.29；landscape.frame 0→124；bloom 尖峰 4→1@1.767–2.233；SidekickScene 时间轴长 12.48（三份中唯一非 10）

## 三、推断清单

前次为推断、经外部核验升为实锤的一条：**Hydrogen + Oxygen**——线上响应头直接给出 `powered-by: Shopify, Oxygen, Hydrogen`，且 HTML 含 `window.__remixContext`、后端店铺 editions-winter-2026.myshopify.com（外部研究通道抓取核验）。

| 推断 | 依据 | 置信 |
| --- | --- | --- |
| 美术为 AI 生成 + 人工拼贴 | 资产文件名残留提示词「painting of forest and flowers by Sandro Botticelli」 | 高（该图实锤，全量美术为类推） |
| 「作坊/手稿」为有意母题 | 构造线 + 罗马数字 + 花体 + 网格纸 + Sobel 素描的系统性 | 高（意图类） |
| zustand 为状态库 | create/subscribe/getState 形态 | 高 |
| SSE 端点实时性 | 代码路径完整（EventSource + init/update），端点 URL 由 CMS 注入、未实抓流量 | 中高 |
| useKeyPopupStore 的 keyUnlock/POPUP_CENTER 主窗消费端未启用 | store 定义完整但全部已下载 chunk 中无 setFromPopupCenter/keyUnlock 调用方；ShippingScene 仅 import 未接线 | 中高（也可能藏于未公开分支） |
| KEY_ANIMATED_OUT = 主画面钥匙飞离动画完成信号 | 消息名 + ShippingScene 发送时机 + 实测截图中的金色飞行轨迹 | 中高 |

## 四、局限（没拿到什么）

1. **Background chunk（1,045,525 B）未逐行**：three.js 核心 + 合成着色器混编；overlay/darken/fadeCenter/Sobel 的 uniform 名已从调用侧证实，片元实现未展开。
2. **SSE 实时流未抓包**：verification 会话未触发直播端点（CMS 配置 topSkillsLiveFeedEnabled），协议结构自代码读出。
3. **Rive 文件未逆向**：.riv 二进制未解包，状态机名（idleState 等）与事件名自 JS 读出。
4. **十三份 Theatre state 只抽样三份**：其余十份 URL 已记录，未全量落盘（体积与重复性考虑）。
5. **移动端真机行为**：断点与触摸逻辑来自源码，未真机实测。
6. **整页截图失败**：页面 51,725px 超出单帧上限，full.jpg 为 0 字节——以 33 张逐屏截图 + 8 帧关键帧替代（更高保真）。
7. **外部反响仅节选**：行业评论以公开可检索来源为准，收录于《设计解构》附录；社媒短评未系统归档。
8. **/key 的 GLB 模型已全量落盘**：12 件收藏品 + 锁孔 + Shoppy + 金币共 13 件（合计约 1.1MB，DRACO 压缩）在 `real-assets/model/`，涂鸦长卷 KTX2 与 mud 法线在 `real-assets/texture/`（受版权研究资产，仅供研究比对）。弹窗会话有一处 404（次要贴图，未影响流程）。
9. **双窗实测为无头环境**：window.screenX 恒 0，「拖窗对齐」的位移分量未实测（公式与 lerp 从源码读出）；真机拖窗行为未录屏。

## 五、复算口径

- 「200 张产品卡」= 12 个 section 内 `<article id>` 计数之和（20+2+23+17+13+10+22+6+14+12+7+54）；官方口径「150+ updates」为营销计数，两者不冲突。
- 「#88DDFF」= uGlowColor 整数 8969727 的十六进制换算（136,221,255）。
- 「黄金比台阶」：80.2484/49.0407=1.6364、49.0407/30.6522=1.5999，取 ≈φ（1.618）的方形化近似——原站坐标反推，非我方拟合。
- 「headline-1 最大 220px」= clamp 上限 13.75rem×16。
- 「章高」以 832px 视口探针为参考（sidekick 8,196px 至 shop-app 2,220px），1440 视口下另行伸缩。