# Shopify Editions Winter '26 拆解：设计解构

> 对象：https://www.shopify.com/editions/winter2026（The Renaissance Edition）。
> 方法：计算样式探针 + 样式表原文 + 30 个 JS chunk 精读 + 13 份 Theatre.js 状态文件 + 33 张逐屏截图。每个数值标注实锤或推断。

## 一、定位

Editions 是 Shopify 半年一届（冬、夏）的产品发布会网站，每届自建一个世界观。本届主题写进标题的字缝里：Ren**ai**ssance——AI 时代的商业文艺复兴。十二章对应十二条产品线（Sidekick、Agentic、Online、Retail、Marketing、Checkout、Operations、Shop app、B2B、Finance、Shipping、Developer），共 200 张产品卡（HTML article 计数，实锤），宣传口径 150+ 更新。

三层意图（推断，证据充分）：

1. **正典与异端的拼贴**：文艺复兴油画世界 + 滑板、外带咖啡、亮粉购物袋、紫色眼罩。构图是《创世纪》，道具是街头。
2. **把「作坊」搬进页面**：达·芬奇构造线、黄金分割、罗马数字、花体首字——全部用工程原语实现（SVG pathLength、CSS counter、::first-letter），不是贴图。
3. **自证产品力**：页面本身是一家可结账的 Shopify 店。Checkout 章的毛线帽挂真实 variant，`{storeURL}/cart/{variantId}:{qty}` 直达真实结账（JS 原文实锤）。

一处资产层的注脚（实锤）：某场景背景文件名残留 AI 生成提示词「painting of forest and flowers by Sandro Botticelli」（含生成者用户名，此处略去）。「Renaissance」里的「ai」不只是文案——这届的文艺复兴美术本身就有 AI 参与生成，再由人工拼贴、修饰、上舞台。

## 二、技术栈（分级）

| 结论 | 依据 | 级别 |
| --- | --- | --- |
| Hydrogen（Remix/React Router）+ Oxygen 边缘托管 | **响应头 `powered-by: Shopify, Oxygen, Hydrogen`**；路由 chunk 名 `($locale).editions.winter2026`、oxygen-v2 资产路径、`window.__remixContext`；后端为真实店铺 editions-winter-2026.myshopify.com | 实锤 |
| react-three-fiber + three.js（Background chunk 1,045,525 B） | JSX 场景组件、`useFrame`、REVISION 常量 | 实锤 |
| Theatre.js 驱动全部 WebGL 编排 | `getProject().sheet("Scene")`、`sequence.position` 写入、13 份 `*.theatre-project-state*.json` | 实锤 |
| Lenis 1.3.23 平滑滚动（仅桌面） | 源码内联版本号、实例化参数原文 | 实锤 |
| Tailwind CSS v4.2.2 | 样式表头注释 | 实锤 |
| Rive 矢量动画（rive chunk 175,564 B + RiveInner） | chunk 与 props（stateMachines、artboard、viewModelName） | 实锤 |
| detect-gpu 画质分级 | `detect-gpu.esm` chunk + tier 逻辑原文 | 实锤 |
| zustand 状态 | store 工厂函数特征 | 实锤（形态） |

## 三、色彩系统

双主角 + 橄榄灰阶 + 一支品牌紫。全部实锤（tokens.topHex 与样式表原文）：

| 色 | 值 | 用途 | 出处 |
| --- | --- | --- | --- |
| 暖纸 | `#f7f7ee` | bg-light、内容区底 | 词频 23（并列第一） |
| 橄榄墨 | `#292919` | bg-dark、正文 | 词频 23（并列第一） |
| 羊皮灰 | `#dcdcd0` | WebGL 章节幕布默认色 + light 态 body 底 | Theatre overlay 默认值 + `html[data-nav-theme=light] body` |
| 纸灰 | `#e2e2d9` | light 态移动导航底 | 样式原文 |
| 石墨橄榄 | `#909083` | light 态达·芬奇线与标题 | 样式原文 |
| 深橄榄 | `#5c5c4e` | 正文链接 | 样式原文 |
| Sidekick 紫 | `#8051ff` | 唯一品牌强调（按钮、焦点环） | 样式原文 |
| 眼罩紫 | `#7126ff` | 吉祥物 SVG 面罩填充 | SVG 原文 |
| 湿壁画天蓝 | `#57afdf` | 装饰 | 词频 4 |
| 蝶翼辉光 | `#88DDFF` | 蝴蝶边缘发光 | uGlowColor=8969727 换算 |
| 星座连线 | `#D7D7CF` | 技能标签连线 | JS 常量 |
| 弹窗描边 | `#434343` | 技能弹窗上/下边 | JS 原文 |

要点：**亮粉不在 CSS 里**——咖啡杯、购物袋、滑板、毛线帽的粉全部只存在于美术资产中。系统色保持文艺复兴的克制，让画作独占「异端」。

## 四、字体系统

四支自托管真字体（全部已本地接入本拆解页）：

| 字族 | 字重 | 文件 | 角色 |
| --- | --- | --- | --- |
| NeueMontreal | 700 | woff2 24,792 B | headline-1..6、bodycopy（正文也是 700！） |
| HWCigars | 400 | woff2 30,440 B（feature: liga dlig kern smcp c2sc case） | narrative-1..4 章节导语、小字 |
| ImperialScript | 400 | woff2 15,572 B | 首字下沉、script-1、Beanie 标题 |
| Inter Variable | 100–900 | woff2 67,188 B | 全局导航、搜索 |

字阶（原值，桌面断点 48.0625rem）：

- headline-1：72px → `clamp(7.5rem, 35.79px + 10.965vw, 13.75rem)`（最大 220px），lh .9，ls −.03em
- headline-2：64 → 100–140px；headline-3：54 → 54–64px；headline-4/5/6：32/24/18px
- narrative-1：28 → `clamp(2rem, 18.53px + 1.754vw, 3rem)`，ls −.05em；narrative-2/3/4：24→25–29 / 20 / 12px
- bodycopy-1/2：16/14px，**桌面反而缩小**到 14/11px
- drop-cap 首字：70 → `clamp(6rem, 75.79px + 2.63vw, 7.5rem)`；merch 版最大 10rem；`line-height:0` 悬浮制
- 全系声明 `text-box: trim-both cap alphabetic`（leading-trim，.9 行高不糊排的关键）
- 国际化：`:lang(ja)` 放弃花体与衬线；`:lang(de)` 标题降档

## 五、布局与滚动

- 容器 105rem；左侧手稿框固定 1/5（aspect 340/464，`min(340px,100vw−24px)`），右侧内容 4/5；12 列，gap `clamp(12px,1vw,16px)`
- 断点：599（isMobile）/ 768（切换用）/ 939（mobileNav）/ 940（global-lg=58.75rem）/ 1181（largeDesktop）
- 章节 hero `min-h 70svh`，桌面 140svh 双拍；每章标题布局在 Ds 映射表逐章微调（11vh/14vh/19vh/27vh/30vh/35vh 等，实锤）
- Lenis（原文）：`{ duration:1, easing:t=>Math.min(1,1.001-Math.pow(2,-10*t)), orientation:"vertical", smoothWheel:true, wheelMultiplier:1 }`，手动 rAF；移动端原生滚动
- 分区进度：区间 = 章高 + 视口；第三章起 `earlyCrossfade:.2` 提前交叉；进度经 zustand 广播
- 导航明暗：三个 html 属性（nav/sidebar/title）各自阈值切换（transitionProgress ≥.4/.7/.75；finalOverlayPosition 窗口 [−.85,.15]/[−.3,.7]/[−.25,.75]），切换帧加 `data-*-immediate` 禁过渡
- 性能：500ms 后 `content-visibility:auto`；视频退出视口卸 `<source>` + `load()`；Rive 进视口 300/600ms 才实例化；popup 滚轮跨窗转发每帧吸收 15%

## 六、WebGL 舞台（本届的心脏）

**架构**：13 个场景（Hero + 十二章），每个是 react-three-fiber 组件，挂 Theatre.js sheet；**编排数据全部来自 CMS**——13 份 `*.theatre-project-state*.json`（已抽样落盘 3 份）。前端唯一职责：`sequence.position = progress × (sectionH + vh)/vh`。

- 场景对象（HeroScene state 实锤）：`cube / asset-1..3 / light-1(红) / light-2(蓝) / camera / landscape / bloom-effect / effects / particles / butterflies`，时间轴长度 10
- **关键帧普查**（落盘三份 state 复算）：HeroScene 10 objects / 33 tracks / **87 keyframes**（length 10）；SidekickScene 11 objects / 41 tracks / 87 keyframes（length **12.48**）；CheckoutScene 3 objects / 19 tracks / 34 keyframes（length 10）。每帧带贝塞尔手柄四元组，求值 = 相邻关键帧间 cubic-bezier(左帧右手柄, 右帧左手柄)——拆解页装置六以原数据逐帧回放
- 普查里读得出运镜剧本（HeroScene）：camera.position.z 四帧 **−18.57 → 6.45 → 10.34 → −2.29**（先猛推后回撤）、landscape.frame 0→124（125 帧 KTX2 序列）、bloom 在 1.767–2.233 处尖峰 4→1、particles.opacity 0→.84→.64 四段折线
- 画面构成：多层图像平面（每章 bg diffuse KTX2 + desktop.ktx2 资产层 + 移动端 2x fallback 全套 13 张），**不是全 3D**——多平面立体书
- 相机轨：fov 10–120、freeOrbit（锁 90）、gaze 注视 0–1、position/rotation/target
- effects 轨：fadeCenter xyz(±10)、darken 0–1、overlay position −1→1（另有 mobilePosition 独立轨）、overlay 颜色默认 `#dcdcd0`、bloom 强度 0–100 默认 8（bloom 基线：threshold .9 / smoothing .025 / radius .85）
- Hero 序曲：加载完成 + 无 hash + scrollY<100 时，100ms 后以 5s 三次方缓出把 offset 从 −1 推到 0（「入画」运镜）；跳章/已滚动直接置 0
- 移动端：原生滚动进度再经每帧 0.5 lerp 平滑写入时间轴；只处理相邻 ±1 章
- 画质：detect-gpu tier 0→静态图版，1/2/3→low/medium/high；运行时可 high→medium→low 降级；移动端默认静态（可 forceWebGL）
- 纹理：KTX2 流式解码（读满 80 字节即解析头、ZSTD wasm、worker 池）；环境贴图 studio_small_09 PMREM KTX2（已落盘）

**蝴蝶**（签名之一，着色器原文实锤）：≤50 只实例化；几何来自 rest.json（顶点/UV/索引数组，已落盘 329,839 B），贴图 butterfly2_256.ktx2（11,734 B，已落盘）。顶点：flapSpeed 4–8、flapAmp 0.8–1.3、三层正弦叠波 `sin(t) + 0.2sin(2.1t+φ) + 0.3sin(0.37t+φ')`、wingBlend `smoothstep(.02,.4,|x|)`（身体不转翅膀转）、左右翅 ±8% 不对称、落翼时身体上浮 `smoothstep(1,−.5,wave)×0.25`、体型 `.08×(0.8+rand×0.4)`。片元：逐实例 HSL 色相偏移、边缘辉光 #88DDFF × 脉冲、`pow(color,1.5)` 收色。出生分布：半径 ≤4 圆环、y=(rand−.5)×2+.5、z−5。

**Sobel 素描结账**（Checkout 章彩蛋）：打开帽子弹窗时场景切边缘检测素描，底色 uniform `[.995,.995,.933]`；`hatHoverIntensity` 响应指针；弹窗开 800ms/收 500ms 用 rAF 写 `modalAnimationProgress` 进着色器，同时全站主题翻 light。深链 `#beanie` 自动滚至第 7 区并开窗（实锤）。

## 七、达·芬奇构造线（签名之二）

侧栏是一张「手稿页」：340×464 外框 + 约 37 条构造线/圆（黄金分割水平线 y=336.13/543.87、中轴、对角线、**黄金螺旋方形化台阶 80.25→49.04→30.65（相邻比≈φ）**、四组大圆 r=425/550/805/917）。

- 全部 `pathLength="1"` 归一化，`stroke-dasharray:1; stroke-dashoffset:1px`，描线 3s `cubic-bezier(.34,.22,.47,.84)`，颜色过渡延迟 70%
- 章→线组映射（Co 表，实锤）：hero→7、Sidekick→6、Agentic→6、Online→5、Retail→4、Marketing→3、Checkout→2、Operations→1、Shop app→8、B2B→7、Finance→6、Shipping→5、Developer→4
- 首次点亮的组播 `line-fade` 4s：从 75% 亮白闪至 15% 白
- 虚线变体用 SVG pattern（4×1 / 1×4）
- 加载序列：`__loader` 框 6s `cubic-bezier(.45,.28,.34,.84)` 描到 80%（`stroke-dashoffset:.2px`）等资源；就绪后 `__complete` 框 1s `cubic-bezier(.72,.16,.19,.96)` 收口；标题从视口中央（`translate-y calc(235px−50%)`）归位侧栏，「ai」一词从 −898px 滑入 .6s
- 目录罗马数字：`counter-increment:nav-item; content:counters(nav-item,".",upper-roman)`——**CSS counter 生成**，非手写

## 八、Sidekick 章的交互系统（签名之三）

- **技能星座**：标签随指针距离缩放（0px→2.1 倍，400px→0.7）与调透明（1→0.4）；标签间斥力（强度 80、半径 400）+ 标签盒碰撞规避（间距 50px）；连线算法「每 120° 扇区取最近邻」（pi=3），线 #D7D7CF、宽 1、透明 .8，端点 300ms ease-out 过渡；稳定判定：连续 2 帧位移 <0.5px 停机，最长 600ms
- **弹窗**：`grid-template-rows 0fr→1fr` + 300ms `ease-out-back` + delay 50ms；方向按象限翻转（--popup-top/left/translate/origin/border-top/bottom #434343）；Esc/外点关闭；关闭态 400ms
- **实时计数**：`EventSource` SSE——init 事件全量、update 事件增量（newUsers）；计数上升 1s 三次方缓出 rAF 滚动；触发 emoji 升腾（10–14 枚、延迟 rand×2+.3s、scale .6–1.2、时长 = scale×2、`translateY(−200px)` 渐隐）
- **确定性伪随机**：`sin(i×12.9898 + s×78.233)×43758.5453` 取小数——GLSL 经典 hash 搬进 JS，保证 SSR/CSR 一致
- **触觉**：移动端点击技能标签 `navigator.vibrate(10)`
- **吉祥物**：内联 SMIL SVG（面 #1c004f、罩 #7126ff、底 #cfcfd5），dur 3.33667s，加载 100ms 后暂停、悬停播放、循环末自动停
- **Apps 卡云**：5 张交互卡 + 2 张视差卡（cqi 定位）；入场 WAAPI `scale(base×.5)→base` 1s `cubic-bezier(.34,1.56,.64,1)`、随机延迟 0–800ms；指针 300px 半径斥力 20、视差 ±15px；卡内 40px 视频图标 + push-out-pop-in 箭头

## 九、工艺细节

见 teardown.html 第 IX 章两张表（20 条，每条附实锤出处），最重要的五条：

1. 视频灯箱用 **View Transitions API**（video-container/-background/-close-button 三个命名过渡；old `object-fit:contain` → new `cover`），底图是三档响应式达·芬奇网格纸
2. 弹窗打开时 main/footer/header/aside 全部 `inert`，双保险焦点陷阱
3. **罗马数字商店**：数量 `counter(quantity,upper-roman)`；价格悬停整行上翻显示罗马数字金额（dollars/cents 双 counter），$14.52 = XIV.LII
4. 控制台彩蛋：ASCII 手稿画 + 花体拉丁文「clavis reserat」字符画，跟随明暗色（`prefers-color-scheme`）——通往下一节的双窗装置
5. 列表区纸纹 `texture-src-90.jpg` 平铺 400px（已落盘）

## 十、隐藏章：/key 双窗装置（签名之四）

彩蛋不是一个页面，是一台横跨两个浏览器窗口的机器。全链路（全部原文实锤，本轮双窗无头联动实测复现）：

**入口**：Shipping 章猎豹鞍带挂金钥匙（key.glb，悬停自旋 2π/600ms inOutCubic + cursor:pointer）。点击 → `window.open('/editions/winter2026/key','ripple_popup',popup)`，弹窗尺寸 `d=min(vw,vh)×0.53`，宽 `d×4/3`、高 `d`，中心在点击点。第二入口：主页 URL 加 `?popup=`（空值）免点击自动开窗（独家核验）。

**管线**（popup.min 2,414 行逐行）：

1. **画面**：主窗 `canvas.captureStream(60)`（maxBitrate 5Mbps / maxFramerate 60 / 每 16ms `requestFrame`）→ BroadcastChannel `webrtc-signaling` 做 SDP/ICE（offer 每 100ms 重发、10s 超时；STUN google:19302，localhost 免）→ 弹窗 `VideoTexture` 贴在 BoxGeometry(1,1,.1) 上 + ShadowMaterial 影板。
2. **对齐**：主窗 rAF 广播 `CANVAS_RECT` + `MAIN_WINDOW`（含 lenis.scroll）；弹窗用 `window.screenX` 反推自身在物理屏幕上的位置，把视频面片摆到与主画布逐像素对位（fov 50、planeZ −5、lerp .25）——拖动窗口=移动透镜。
3. **章节联动**：`ACTIVE_SECTION` 携带 handle/progress/**theatreTime**（同一条 `(章高+vh)/vh` 公式）；弹窗按章切换片元着色器冲洗直播画面：hero=20px Bayer 抖动铜版画、marketing=水面折射（8 步 7 向 + mud 法线）、shop-app/developer=3px 抖动、finance/shipping=pow2 显影、其余 pow2.5、blacklight=紫光灯 + fwidth 边缘发蓝。
4. **收藏品**：每章一件镀金 GLB（#BF9852、metalness 1、roughness .2、仓库 HDR envMap ×2）：滑板/罗盘/卷轴/POS/鲁特琴/读卡器/橡皮鸭/iPhone/滑板/钥匙/戒指；随机落点（±40% 画面）、点击拾起居中（easeOutBack 1.7 / 800ms）、再点丢下；fbm3d 噪声溶解退场（阈值边缘 ×10 发光）。
5. **群伴**：Boids 彩带鱼 1 尾起步、每发现一章 +1、上限 12；霓虹 12 色，拾起时渐变金；帯状网格 15±1 节、鱼形宽度 `pow(1−t,.3)·pow(t+.1,.5)`、体波 6–9Hz、螺旋泳姿、平方反比分离。Shoppy（DancingRenaissanceShoppyv5）在窗顶跳舞（Armature/Hat 两轨）。
6. **开锁**：shipping 章锁孔（keyhole.glb）出现；钥匙丢在锁孔 2 世界单位内 → `KEY_INSERT_COMPLETE`：主窗 Theatre `coinRain` 轨触发 150 枚 instanced 金币雨（gravity 4、initialVelocity 2.5、spread .3、coinScale .075、y<−3 回收）；主画面鞍带金锁的 GLB 动画被 0.08 lerp 擦向开锁位（Butterflies chunk 独立订阅，timeScale=0 手动 mixer）；2s 后弹窗切涂鸦模式——blacklight 透镜 + Graffiti-Canvas KTX2 长卷（1:2、随 totalProgress×2 滚动、mud 扰动、哈希三频闪烁），全站隐藏涂鸦显形。
7. **纪律**：弹窗失焦 10s 自杀、文档隐藏 9s 自杀、视频冻结 3 秒×3 重连（≤3 次）失败即关；主窗 beforeunload 反手关弹窗；`POPUP_CLOSED` 清理发送端。滚轮在弹窗里滚 → `WHEEL_EVENT` 转发 → 主窗每帧吸收 15%。

**协议**：BroadcastChannel `shop-popup-sync`（16 种消息）+ localStorage `popup-channel-msg` 兜底。实测消息流量（60s 会话）：canvas-rect / main-window / active-section 各 294 条，popup-center 3、popup-ripple 2、webrtc-ready 1。

**为什么它是签名**：Renaissance 的主题是「钥匙开启从未上锁之门」（clavis reserat）——这台装置把主题做成了字面意义的机器：一把要用两扇窗才能转动的钥匙。

## 十一、关键发现（一句话版）

1. **编排即内容**：Theatre.js 状态从 CMS 下发——动画不再是代码，是可以由设计师直接编辑与热更的资产（实锤）。
2. **正典构图 + 异端道具**的张力贯穿美术、文案（getting that coin / cheetah-fast）、交互（罗马数字 × SSE 直播）。
3. **纸的三重身份**：#f7f7ee 页面纸、#dcdcd0 幕布纸、texture-src-90 纹理纸——WebGL 世界与 DOM 世界靠「纸」缝合。
4. **文艺复兴的工程学表达**：黄金分割构造线、pathLength 描线、CSS counter 罗马数字、::first-letter 花体——每个古典元素都有一个现代 Web 原语的对应物。
5. **页面即店铺**：#beanie 彩蛋是整站论点的落款。
6. **彩蛋即论文**：/key 双窗装置用 captureStream + WebRTC + BroadcastChannel + `window.screenX` 把「浏览器窗口」本身变成输入设备——在营销页里藏了一篇跨窗口渲染的工程论文（本轮双窗实测全流程复现）。

## 附：外部研究（全部带来源）

### 历届 Editions 世界观（官方归档页 shopify.com/editions，一年两届「Every six months」）

| 期号 | 主题 | 一句话 | 佐证 |
| --- | --- | --- | --- |
| Summer '22 | Connect to Consumer | 首届；同场 Hydrogen + Oxygen GA | news.ycombinator.com/item?id=31835880 |
| Winter '23 | Built to Last | 长期主义叙事 | changelog.shopify.com |
| Summer '23 | Imagine My Business | AI 叙事起点（/Imagine 提示词梗） | news.ycombinator.com/item?id=36883243 |
| Winter '24 | Foundations | 「地基」；Awwwards Honorable Mention | awwwards.com/sites/shopify-editions-winter-24 |
| Summer '24 | Unified | 150+ 更新、75+ 交互图形；Awwwards SOTD | awwwards.com/sites/shopify-editions-summer-24 |
| Winter '25 | Boring | 刻意无聊的极简站 + CRT 彩蛋宇宙；官方发内部幕后文 | shopify.com/news/how-we-built-boring-edition |
| Summer '25 | Horizons | 内置浏览器 3D 赛车「Horizon Drive」 | shopify.com/editions/summer2025 |
| **Winter '26** | **Renaissance** | 本档对象 | shopify.com/editions/winter2026 |
| Spring '26 | Everywhere | 点云 + 体积光；官方在 Codrops 发工程复盘 | tympanus.net/codrops/2026/06/26/… |

### 本届的行业反响

- **Awwwards Site of the Day**（2026-02-09）：总分 7.92（设计 8.03 / 可用性 7.51 / 创意 8.24 / 内容 8.09），另获 **Developer Award** 8.05，其中动画与过渡子项 **9.40** 为全项最高；随后入选当月 **Site of the Month**。提交方为 Shopify Design（加拿大）——即内部团队，无外部代理署名。awwwards.com/sites/the-renaissance-edition
- **CSSDA Website of the Day**（2026-02-17）：终审 8.71（UI 8.73 / UX 8.63 / 创新 8.76）。cssdesignawards.com
- **webgpu.com 收录**：描述为滚动驱动的模块化辉光/折射着色器与响应滚动的体积云，「part gallery, part tech demo」。webgpu.com/showcase/winter-26-renaissance-by-shopify
- **官方背景**：2025-12-10 发布，「over 150 launches」；产品副总裁公开信释义文艺复兴主题（进步、势能、勇气、新开端）。shopify.com/news/winter-26-edition-merchant 与 …-renaissance
- **拼写核查**：官方一律写「Renaissance」，「RenAIssance」为第三方转述。本档对「ai」双关的定级：SVG 中 `title__word--ai` 独立成组 + 斜体花体 + 单独滑入动画为实锤；「指 AI」的释义为高置信推断。
- **团队构成**：上届幕后文（Boring）自述 Editions 站由内部创意团队（设计、开发、动效、内容、营销）制作，且「近四期 Editions 都是 Hydrogen 店铺」。shopify.com/news/how-we-built-boring-edition
- **本档独家核验**（公开网络无人记录）：控制台字符画花体大字为拉丁文 **「clavis reserat」（钥匙开启）**，指向隐藏路由 `/editions/winter2026/key`（HTTP 200，独立 three@0.159 彩蛋场景）；URL 加 `?theatre` 会加载 Theatre.js Studio 编辑器；后端真实店铺域名 editions-winter-2026.myshopify.com。