The Renaissance
Edition拆解

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

营销层 vs 产品层

这站是纯营销层：Hydrogen（Remix）+ Oxygen 边缘托管，内容从 CMS 下发（连 Theatre.js 动画时间轴都是 CMS 资产）。它不承载产品功能，唯一的「产品」是那顶 $14.52 的毛线帽——而这恰是全站最锋利的一句自我介绍：发布会网站本身就是一家可结账的 Shopify 商店。

栅格（实锤）

Lenis（原文实锤）

new Lenis({
  duration: 1,
  easing: t => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // easeOutExpo
  orientation: "vertical",
  smoothWheel: true,
  wheelMultiplier: 1
})  // 仅桌面；移动端原生滚动 + 场景端 0.5 lerp 平滑

分区进度机（JS 原文实锤）

每章是一个进度区间。区间长 = 章高 + 视口高；从第三章起提前 20% 视口开始交叉（earlyCrossfade: .2）。进度写进 zustand，再由每章的 Theatre.js sheet 消费：

sequencePosition = progress × (sectionH + vh) / vh
// 每章时间轴长度 10；hero 开场另加 −1→0 的 5s 序曲

导航明暗阈值（实锤）

场景构成（实锤）

画质分级（JS 原文实锤）

detect-gpu →
  tier 0            → fallback（静态图版）
  tier 1 / 2 / 3    → low / medium / high
  移动端默认        → fallback（可 forceWebGL）
  运行时降级链      → high → medium → low

Hero 开场序曲（实锤）

加载完成 + 无 hash + scrollY<100
→ 延迟 100ms，5000ms 内
   offset = −1 + (1 − (1−t)³)   // cubic ease-out
→ sequence.position 从「负一个视口」推进到 0

这就是首屏那记缓慢的「入画」运镜。跳章直达或已滚动时直接置 0，绝不强迫看片头。

三层不同频率的正弦叠加 + 左右翅 8% 不对称 + 拍翅反作用力的身体起伏——没有一只蝴蝶的振翅相同。第 VII 章有可跑复现。

十二章 · 十二件镀金收藏品（原文实锤）

透镜着色器（每章一支，全文在库）

Boids 彩带鱼群（原文实锤）

1 尾起步，每「发现」一章 +1，上限 12
霓虹 12 色 ⇄ 拾起时渐变金 12 色（lerp .15）
带状网格：15±1 节 · 链式 lerp .28±.05
鱼形宽度 pow(1−t,.3)·pow(t+.1,.5) × .06
体波 sin 双频（6–9Hz）×t² · 螺旋泳姿三层
分离力平方反比（r²<.16）·环绕半径 1.5×(1−moving×.7)
AdditiveBlending · DoubleSide · depthWrite off

跨窗协议（BroadcastChannel «shop-popup-sync» + localStorage 兜底）

生存法则与后门（原文实锤）

弹窗失焦 10s → window.close()
文档隐藏 9s → 关闭；视频冻结 3s×3 → 重连（≤3 次）
WebRTC 断 → 直接关窗（透镜不许离线）
STUN: stun.l.google.com:19302（localhost 免）
?mode=scan → 扫描模式（色锁黄，无涂鸦线）
?debug=1 → 调试；?popup=（空值）→ 免点击直开弹窗
主窗 beforeunload → 反手关掉自己的弹窗

:root{
  --paper:#f7f7ee;   --ink:#292919;
  --grey-light:#dcdcd0; --grey-mid:#909083;
  --grey-dark:#5c5c4e;  --nav-grey:#e2e2d9;
  --sidekick:#8051ff;   --glow:#88DDFF;
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --ease-frame:cubic-bezier(.72,.16,.19,.96);
  --ease-lines:cubic-bezier(.34,.22,.47,.84);
  --ease-fade:cubic-bezier(.25,.46,.45,.94);
  --grid-gap:clamp(12px,1vw,16px);
}
/* 罗马数字目录（原站原法） */
nav li a::after{
  counter-increment:nav-item;
  content:counters(nav-item,".",upper-roman);
}
/* 花体首字下沉 */
.drop-cap::first-letter{
  font-family:ImperialScript,Georgia,serif;
  font-size:clamp(6rem,75.79px + 2.63vw,7.5rem);
  line-height:0;
}

// 滚动 → Theatre 时间轴（架构核心）
const scale = (sectionH + vh) / vh
sheet.sequence.position =
  clamp01(progress) * scale + introOffset

// 分区进度（earlyCrossfade = .2 从第三章起）
zone = sectionH + vh + vh * earlyCrossfade
progress = (scrollY - (top - vh - early)) / zone

// 构造线：pathLength=1 归一化描线
path{stroke-dasharray:1;stroke-dashoffset:1px;
  transition:stroke-dashoffset 3s var(--ease-lines)}

// 选型决策 */
编排密 → Theatre.js（设计师拥有时间轴）
矢量微交互 → Rive（状态机 + 事件回调）
数据流示意 → Canvas 2D（够用即止）
油画世界 → 多层图像平面，不做全 3D

实锤（直接抽取）

• 计算样式探针 + 样式表原文两份合计 130,780B（Tailwind v4.2.2 单文件 129,725B + 字体声明 1,055B）
• 30 个 JS chunk 全量下载精读（路由包 243KB 至场景包 1.2KB）
• 13 份 Theatre.js state JSON（3 份已落盘入库）
• 四支字体真文件 + rest.json 蝴蝶几何 + butterfly2_256.ktx2 + PMREM 环境贴图 + 纸纹 + 网格纸
• 六个 .bin 级证据以 manifest.json 逐文件记账
• 33 张逐屏截图（SwiftShader 软渲染 WebGL）+ 8 帧滚动关键帧

推断（证据充分）

• Hydrogen/Remix：路由命名 ($locale).editions.winter2026 + Oxygen CDN 路径（高）
• 美术为 AI 生成 + 人工拼贴修饰：文件名残留提示词（高）
• 「作坊 / 手稿」为有意母题：构造线 + 罗马数字 + 花体的系统性（高，意图类）

真实滚动关键帧

脚本匀速滚动录屏抽帧；WebGL 幕布、反相、蝴蝶均真实触发。完整链路、局限清单（如 SSE 端点未抓包、Background 1MB 着色器未逐行）见 出处与方法 与 事实核查。