笔记本电脑作品集

# Haldoren —「Laptop Dive」作品集首屏：构建说明

为虚构的动态设计师 **Haldoren** 构建一个单文件（`index.html`，内联 CSS 和 JS，无框架，无构建步骤）的单屏作品集首屏。

加载后会看到一个摄影风格的首屏：
- 一名年轻男子身穿黑色皮夹克、白衬衫和暗红色领带，站在深绿色摄影棚里，**右**手拿着复古砖头手机贴在耳边，**左**手托着一台打开的银色笔记本电脑；
- 巨大的白色「HALDOREN」字标位于他*身后*；
- 手写的「动态设计」叠在字标上；
- 右上方垂下一张挂绳工牌。

滚动时，一段 5 秒的 AI camera move（以约 1.7 秒播放完）pushes into 笔记本电脑。电脑从他手中浮起，转到 square to camera 并占满视野。随后，电脑屏幕播放作品集案例视频，周围配有打孔纸质票卡、简短说明和圆形上一项/下一项按钮。案例在原位切换。「我的工作室」会平滑退回首屏。

页面本身永不滚动。`html, body` 设为 `height:100%; overflow:hidden`。捕获所有交互（滚轮、触摸、按键、点击）。

---

## 1. 素材（使用这些确切的 URL — 不要下载、重新托管、裁剪或重新编码）

所有图片均通过 images.higgs.ai 包装：

```
HX(u) = 'https://images.higgs.ai/?default=1&output=webp&url=' + encodeURIComponent(u) + '&w=2048&q=85'
CF    = 'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/'
```

| 键 | 原始结果 URL（除非另有说明，否则用 HX 包装） | 内容 |
|---|---|---|
| `plate` | `CF + 'hf_20261111_001031_a09dc558-2c69-4e05-83a4-5f01ebdd1363.png'` | 首屏照片，3:2（2048×1360）：男子、绿色摄影棚、黑色办公椅，以及左下方摆着杯子和文件夹的白色桌子。无文字。 |
| `casePlate` | `CF + 'hf_20261111_001031_4a7c3fd9-2168-4219-9736-096a17bbb0e2.png'` | 案例照片，3:2：同一台银色笔记本电脑位于正中央且 square to camera，屏幕为黑色，背景为绿色渐变（顶部深色 `#1b4a34` → 底部薄荷绿）。无人物。 |
| `cut` | `CF + 'hf_20261111_001143_ec356b1a-50a2-4b50-82fc-e346c914a406.png'` | 仅包含男子的透明 PNG 抠图，与 `plate` 像素对齐。 |
| `badge` | `'https://images.higgs.ai/?default=1&output=webp&url=' + encodeURIComponent(CF + 'hf_20261111_001143_65c037e6-0768-4b12-9f17-17be132ce16b.png') + '&w=1200&q=85'` | 挂绳的透明 PNG（白色带子、银色旋转夹），下方挂着透明塑料证件套，里面放着一张空白白卡。 |
| `trans` | `CF + 'hf_20261111_001144_2b054228-95af-41d5-922d-b02979fe485b.mp4'`（不包装） | Kling 3.0 片段，1280×720，24 fps，5.04 秒，无音频，单个关键帧。首帧 = 首屏（`plate` 的 16:9 裁剪），末帧 = 案例（`casePlate` 的 16:9 裁剪）。镜头 pushes in，电脑从他的左手浮起、旋转，最终以 straight-on 姿态停稳并占满画面。 |

案例屏幕视频（MotionSites 预览，16:9 mp4，托管在 R2，`crossOrigin='anonymous'`，`muted loop playsInline`）：

```
R2 = 'https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/aaaf/'
```

| # | 视频 | 票卡标题 | 票卡行 | 说明键 | 说明文字 |
|---|---|---|---|---|---|
| 1 | `R2+'vell-lookbook.mp4'` | VELL 造型册 | STUDIO VELL / 电子商务 / 2026 | `// vell lookbook` | `— 一本秀场造型册，每套造型都随滚动向前走来，购物车也一路跟随。` |
| 2 | `R2+'vasari-vhs-hero.mp4'` | VASARI 磁带架 | VASARI ARCHIVE / 作品集 / 2026 | `// vasari shelf` | `— 用一架磁带呈现导演的作品档案：抽出一盘，它的故事便开始播放。` |
| 3 | `R2+'living-portrait-hero.mp4'` | MINA 肖像 | MINA 3D / 个人网站 / 2025 | `// mina portrait` | `— 一个 3D 创作者的主页，肖像会跟随光标移动，还会做鬼脸。` |

说明使用弯撇号（’），并以一个长破折号和一个空格开头。

## 2. 字体

Google Fonts，以 latin woff2 格式自行托管（独立文件将它们以 base64 `data:font/woff2` URI 嵌入）：

```
https://fonts.googleapis.com/css2?family=Inter+Tight:wght@100..900&family=Caveat+Brush&family=Anton&display=swap
```

| 字体家族 | 用途 |
|---|---|
| **Inter Tight**（可变字重 100–900） | 所有 UI 和字标（字重 900）、导航标签（650）、工牌卡片（800/700/600）、说明（700/500）、按钮（600） |
| **Caveat Brush** 400 | 「动态设计」手写字 |
| **Anton** 400 | 票卡标题 |

三种字体均使用 `font-display:swap`。Body 使用 `-webkit-font-smoothing:antialiased`。

## 3. 颜色变量

```
--green-900:#0b2f20  (html/body 背景)
--green-800:#11402c  (票卡孔洞、下一项按钮箭头)
--green-700:#1a5a40
--mint:#cfeee0       (下一项按钮悬停)
--ink:#0d0f0e        (白底文字)
```

桌面端舞台背景：`linear-gradient(180deg,#0c3523 0%,#14503a 45%,#9fd8bf 100%)`。

## 4. 场景框架（核心技术）

所有摄影元素都放在同一个绝对定位的 `.frame` 中。其尺寸为 **1440×810 单位**（恰好对应视频的 16:9 画面），设置 `transform-origin:0 0`。通过 JS（§7）计算的单个 `transform: translate(x,y) scale(s)` 定位。内部按 z 顺序排列：

| z | 元素 | 位置 |
|---|---|---|
| auto | `img.plate` | `left:0; top:-73.125px; width:1440px; height:956.25px`。3:2 照片比 16:9 更高。与视频匹配的 16:9 裁剪从 2048×1360 原图向下 104 px 处开始，换算到 1440 宽时为 73.125 单位。 |
| 3 | `svg.wm` | 字标（§5.1） |
| 4 | `img.cut` | 与 plate 使用相同的框（`top:-73.125px`，1440×956.25），使男子位于字标上方 |
| 5 | `.badge` | 挂绳（§5.3） |
| 6 | `.script` | 「动态设计」（§5.2） |
| 6 | `video.trans` | `inset:0; 1440×810; object-fit:cover; opacity:0` |
| 7 | `img.caseplate` | `left:0; top:-105.47px; 1440×956.25; opacity:0`。其 16:9 裁剪从 2048×1360 原图的 y=150 处开始。 |
| 8 | `.screen` | 电脑显示区域：`left:272.8px; top:102.7px; width:894.4px; height:604.7px; border-radius:3px; background:#000; overflow:hidden; opacity:0` |
| 9 | `.screen-hit` | 相同矩形，`cursor:pointer`，进入案例模式前为 `display:none`（点击 = 下一个案例） |

`.screen` 内部：
- 三个案例 `<video>`，`position:absolute; inset:0; 100%×100%; object-fit:contain`（显示区域比 16:9 更高，因此预览上下留有细黑边，绝不裁剪），`background:#000; opacity:0`；
- 玻璃反光 `::after`，使用 `linear-gradient(115deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 38%)`；
- 一个 `.flash` 白色图层，不透明度为 0，z 为 2。

## 5. 首屏元素

### 5.1 字标「HALDOREN」

内联 SVG，`viewBox="0 0 1440 260" preserveAspectRatio="none"`，定位为 `left:0; top:0; width:1440px; height:260px; overflow:visible`。其中唯一的 `<text x="14" y="214" textLength="1412" lengthAdjust="spacingAndGlyphs">HALDOREN</text>` 使用 Inter Tight 900，268px，字间距 −6px。

填充为垂直 linearGradient：

| 偏移 | 颜色 | 不透明度 |
|---|---|---|
| 0 | `#ffffff` | 1 |
| .5 | `#f1f5f3` | .9 |
| 1 | `#d7e6de` | .28 |

让字母底部融入绿色。字标位于男子抠图*后方*（z 3 对比 4），因此他的头部会遮住「D」和「O」。

### 5.2 手写字「动态设计」

Caveat Brush 82px，`line-height:1`，白色，字间距 −.5px，`transform:rotate(-8deg)`，`transform-origin:0 50%`，`text-shadow:0 2px 14px rgba(0,0,0,.18)`，z 6。在框架坐标中位于 `top:148px`，放在**左侧**，横跨「HAL」底部（left 在 §7 `fitHero` 中设置）。

### 5.3 挂绳工牌

`.badge` 为 582×1030 框架单位，`transform-origin:288px 0`（以挂绳顶部为支点），默认 `left:986px; top:-165px`，`pointer-events:none`。包含：

- 工牌 PNG 的 `<img>`，填满整个框。
- 覆盖证件套内空白卡片的 `.card`。其为 `left:172px; top:536px; 238×392`，`padding:20px 16px 0 16px`，颜色 `#141615`，Inter Tight：
  - `h4`「设计师<br>名片」— 30px / 行高 .95 / 字重 800 / 字间距 −.5px。
  - `.yr`「2026」— 绝对定位 `right:16px; top:62px`，11px/700。
  - `.role`「艺术总监 // 设计师」— `margin-top:12px; padding-top:5px; border-top:1px solid #222`；9.5px/700，字间距 .2px。
  - `.ph` 照片，92×112，`margin:12px auto`，圆角 6，`background:#dfe4e1`。其 background-image 为**抠图** URL，使用 `background-size:471px 313px; background-position:-212px -16px`（同一男子的头肩裁剪），以及 `box-shadow: inset 0 0 0 1px rgba(0,0,0,.06)`。
  - 四个 `.row`。每个均为 flex，space-between，align flex-end，9px/700，`padding:6px 0 3px`，`border-bottom:1.5px dotted #333`。标签为 `span`；值为字重 600 的 `b`：

    | 标签 | 值 |
    |---|---|
    | 姓名 | E. HALDOREN |
    | 专注领域 | 动态设计 |
    | TG | @HALDOREN.MOTION |
    | 邮箱 | [已省略邮箱] |
- `.hit`，卡片上的悬停目标区域：`left:160px; top:470px; 262×440; pointer-events:auto; cursor:grab`。

## 6. 固定在视口上的 UI（`.ui`，fixed，inset 0，z 20，pointer-events none）

`--n` 为视口单位：桌面端为 `min(innerWidth/1440, innerHeight/900)` px，820px 以下为 `100vw/430`。

**导航标签**（`.tag`）为白色矩形。其设置为：
- 字体：Inter Tight 650，`font-size: 16.5n`，`letter-spacing:-.02em`，颜色 `--ink`；
- 框：`height: 37n`，`padding: 0 18n`，`white-space:nowrap`；
- 阴影：`box-shadow: 0 3n 0 rgba(0,0,0,.18), 0 6n 14n rgba(0,0,0,.18)` — 一层硬朗的 3n 凸边加一层柔和投影；
- 悬停：`translateY(-2n) rotate(-1.5deg)`，阴影增大为 `0 5n 0 rgba(0,0,0,.22), 0 10n 18n rgba(0,0,0,.2)`。过渡为 `.25s cubic-bezier(.2,.8,.2,1)`；
- 按下：`translateY(1n)`，阴影为 `0 1n 0`。

位置如下：

| 类 | 文字 | 元素 | 位置 |
|---|---|---|---|
| `t1` | 我的工作室 | `<button>` | `left:30n; top:7n` |
| `t2` | 作品集 | `<button>` | `left:233n; top:7n` |
| `t3` | 联系方式 | `<a href="#contacts">`，阻止默认行为 | `right:244n; top:7n` |
| `t4` | 洽谈项目 | `<a href="#discuss">`，阻止默认行为 | `right:32n; top:7n` |

**中央标志**「HALDOREN」（一个 `<button>`）：`left:50%; top:14n; translateX(-50%)`，字重 600，`19n`，字间距 .14em。初始为 `opacity:0`，仅在案例模式下淡入（`.4s`）。

**滚动提示**「滚动进入作品」，居中位于 `bottom:22n`：
- 字体：`12n`，字间距 .18em，大写，字重 600，不透明度 .85；
- 文字前方：一条 1.5n × 22n 的线，颜色为 `rgba(255,255,255,.35)`。内部一颗高度为 40% 的白色珠点不断从上 → 下滴落（`@keyframes drip{to{top:100%}}`，1.6s `cubic-bezier(.6,0,.4,1)`）；
- 在案例模式和忙碌期间通过 `visibility:hidden` 隐藏。

### 案例 UI（桌面端）

**票卡**（右上）：`right:32n; top:98n; 348n × 182n`，白色，圆角 3n，`box-shadow:0 18n 40n rgba(0,0,0,.28)`，`padding:26n 34n 0 44n`，`transform-origin:50% 0`，初始不透明度为 0。包含：
- 四个孔洞，为 21n 的圆，颜色 `--green-800`，带 `inset 0 2n 3n rgba(0,0,0,.35)`，距各角向内 12n；
- `h2` 标题使用 Anton 400，`50n`，行高 1，字间距 −.01em，不换行；
- `.rows`，`margin-top:8n`：三行右对齐文字，700 / `12n` / 字间距 .02em，`padding:4n 0 3n`，`border-bottom:1.5px dotted #2a2a2a`。

**说明**（左侧）：`left:28n; top:326n; width:172n`：
- `.k` 键名行：700 / `17n` / −.02em；
- `p`：`margin-top:14n`，`15n`，行高 1.36，字重 500，`rgba(255,255,255,.92)`；
- `.num`「01 / 03」：`margin-top:22n`，`12n`，字间距 .16em，700，`rgba(255,255,255,.7)`。

每个子元素初始不透明度均为 0。

**上一项/下一项按钮**（`<button class="nav-case prev|next">`）：位于 `bottom:150n`，上一项在 `left:95n`，下一项在 `right:95n`。各自为纵向排列，间距 9n。初始不透明度为 0，在案例模式下用 `.3s` 显示。每个包含：
- `.c`：50n 的圆，边框为 `1.6px solid rgba(255,255,255,.9)`，内含 24n、stroke-2 的箭头 SVG。上一项路径：`M19 12H5M11 6l-6 6 6 6`。下一项路径：`M5 12h14M13 6l6 6-6 6`；
- 标签「上一个 `<br>`案例」或「下一个 `<br>`案例」（保留 `<br>` 前的空格），600 / `15n` / 行高 1.05，居中；
- 仅下一项：圆内填充白色，箭头为 `--green-800`，悬停时变为 `--mint`；
- 两者悬停时：圆放大到 1.08；
- 第一个案例中，上一项添加 `.dim`（不透明度 .45）。

## 7. 框架适配（JS `pose(mode)`），在加载、调整大小（移除 glide）和每次过渡时调用

**桌面端（> 820px）**，其中 `cover = max(W/1440, H/810)`，`u = min(W/1440, H/900)`：
- **首屏**：`s = cover`，`x = (W−1440s)/2`，`y = 0`。覆盖视口并锚定顶部，因此字标永远不会被裁掉。
- **案例**：整个电脑（框架 y 79 → 762）必须放得进导航与底部之间。
  - 设置 `top = 66u` 和 `fit = (H − top − 28u)/(762−79)`。
  - 如果 `fit ≥ cover`：`s = cover`，`y = min(0, max(H−810s, top−79s))`。
  - 否则：`s = fit`，`y = top − 79·fit`。
  - 两种情况下均为 `x = (W−1440s)/2`。

**`fitHero(p)`**（仅桌面首屏）让首屏 UI 保持在框架可见部分内：
- `vl = max(0, −x/s)`，`vr = min(1440, (W−x)/s)`，`pad = 18/s`。
- 字标：`left = vl + .6·pad`，`width = vr − vl − 1.2·pad`。由于 preserveAspectRatio 为 none，SVG 会拉伸。
- 工牌：`left = min(986, vr − pad − 417)`。
- 工牌顶部：`vb = min(810, (H−y)/s)`，然后 `top = min(−165, vb − 56/s − 935)`。整张卡片保持可见，下方约留 56 px 空间；屏幕较矮时，挂绳只需向顶部外延伸更多。
- 手写字：`left = vl + pad + 70`（左侧，覆盖「HAL」）。

**手机/平板（≤ 820px）**：
- **首屏**：`s = min(W/650, 0.62H/810)`，`x = W/2 − 805s`，`y = H − 790s`。男子居中并锚定底部。
- **案例**：电脑位于**底部**，UI 位于顶部。
  - `navH = 0.022H + 42 + 22`。
  - `uiBottom = 62 + ticketHeight + 18 + max(60, descHeight) + 14`。
  - `s = min((W−28)/905, max(0.2, (H − navH − uiBottom)/(762−95)))`，`x = W/2 − 720s`，`y = H − navH − 762s`。
  - 镜头略微向*下*平滑移入电脑，绝不向上跳动。

`place(m)`：
- 设置 transform；
- 在 `.frame` 和 `.stage` 上切换 `m-case` 类；
- 移动端将 `--mbs = mbadgeWidth/582` 和 `--th = ticketHeight` 写入 `:root`。

`.frame.glide` 添加 `transition: transform var(--glide) cubic-bezier(.65,0,.35,1)`。

### 边缘淡化：一个遮罩，通过注册的自定义属性实现动画

为 `--mt`、`--m0`、`--mb` 和 `--ms` 注册 `@property`，类型为 `<length>`，`inherits:true`。

为每个图层设置超出 810 框架的延伸量，让所有图层都在同一条框架边界处淡化：
- `plate`：`--o:73.125px; --ob:73.125px`；
- `caseplate`：`--o:105.47px; --ob:40.78px`；
- `trans`：两者均为 0。

应用于 `.plate`、`.trans` 和 `.caseplate`（绝不应用于 `.cut`，以保持头部清晰）：

```
mask-image:
  linear-gradient(180deg,
    transparent calc(var(--o,0px) + var(--m0)),
    rgba(0,0,0,.35) calc(var(--o,0px) + var(--m0) + var(--mt)*.37),
    #000 calc(var(--o,0px) + var(--m0) + var(--mt)),
    #000 calc(100% - var(--ob,0px) - var(--mb)),
    transparent calc(100% - var(--ob,0px))),
  linear-gradient(90deg, transparent 0, #000 var(--ms), #000 calc(100% - var(--ms)), transparent 100%);
mask-composite: intersect;   (-webkit-mask-composite: source-in)
```

框架获得一个类：桌面端为 `d-fade`，移动端为 `m-fade`。取值如下：

| 状态 | `--m0` | `--mt` | `--mb` | `--ms` |
|---|---|---|---|---|
| 桌面首屏 | 0 | 0 | 0 | 0（不淡化） |
| 桌面案例（`.d-fade.m-case`） | 0 | 110px | 60px | 170px |
| 移动端首屏 | 0 | 190px | 0 | 140px |
| 移动端案例（`.m-fade.m-case`） | 48px | 40px | 70px | 140px |

桌面案例的淡化效果仅在电脑必须缩小时才会显现。

变量使用与 transform 相同的 `var(--glide)` 时长和缓动进行过渡，因此淡化会随镜头一起移动，绝不突变。

移动端舞台：
- 纯色 `#0b3b2a`（采样自首屏照片最上方一行）；
- 一个使用 `linear-gradient(180deg,#1b4a34 0%,#1b4a34 55%,#2f6a50 80%,#7fb79d 100%)`（案例颜色）的 `::before` 图层，在设置 `.stage.m-case` 时用 1.6s 交叉淡入；该类在下潜*开始*时设置。

## 8. 入场（仅一次；Web Animations；防重入 + 兜底）

首先为 `<html>` 添加 `js`。`.js .pre{opacity:0}` 隐藏导航标签、字标、手写字、工牌和提示。

当 `document.fonts.ready` **以及** plate 的 load/error 都完成后，在一个 rAF 中启动入场；通过 2.5 秒竞速设置等待上限，并额外设置 4 秒 `setTimeout` 兜底。用 `data-in` 标记保证只运行一次。所有动画使用 `fill:'both'`，默认缓动为 `cubic-bezier(.2,.8,.2,1)`：

| 元素 | 关键帧 | 时长 | 延迟 | 缓动 |
|---|---|---|---|---|
| 4 个导航标签 | `opacity 0, translateY(-40px) rotate(-4deg)` → 无变换 | 700 | 120 + i·80 | `cubic-bezier(.3,1.5,.5,1)`（弹性过冲） |
| 字标 | `opacity 0, translateY(60px), clip-path inset(100% 0 0 0)` → `inset(0)`（从自身基线升起） | 1100 | 260 | 默认 |
| 手写字 | `opacity 0, clip-path inset(0 100% 0 0)` → `inset(0)`（从左 → 右写出） | 900 | 1050 | `cubic-bezier(.5,0,.3,1)` |
| 工牌 | `0%: opacity 0, translateY(-120%) rotate(8deg)` → `60%: translateY(0) rotate(-3deg)` → `80%: rotate(1.6deg)` → `rotate(0)`（沿挂绳落下并停稳） | 1500 | 700 | 默认 |
| 提示 | 不透明度 0 → .85 | 600 | 1800 | 默认 |

工牌落下结束后，开始**闲置摇摆**：`rotate(-1.1deg) ↔ rotate(1.1deg)`，3200 ms，无限、交替、ease-in-out。

**悬停摆动**：在 `.hit` 的 `pointerenter` 时（仅首屏模式），运行 `rotate(0) → -6deg → 4deg → -2deg → 0`，时长 1400 ms，ease-out，使用 `composite:'add'`，使其叠加在摇摆之上。

## 9. 首屏 → 电脑下潜（`toCase`）

触发方式：
- 滚轮向下（|deltaY| ≥ 18，900 ms 锁定，使用 `passive:false` 配合 `preventDefault`）；
- 触摸向上滑动（≥ 40 px）；
- `ArrowDown`、`PageDown` 或 `Space`；
- 点击「作品集」。

`busy` 标记阻止重复进入，`body.busy` 隐藏提示。

1. **heroOut**（380 ms，`cubic-bezier(.5,0,.75,0)`，fill forwards）：
   - 字标抬升到 `translateY(-40px)` 并淡出；
   - 手写字淡出；
   - 工牌取消摇摆，飞向 `translateY(-110%) rotate(-6deg)`，同时淡出。

   等待 330 ms。
2. 如果开启了减少动态效果，或片段尚未就绪：`place('case')`，用 500 ms 淡入 caseplate，然后进入到达步骤。
3. 否则：
   - `trans.currentTime = 0; trans.style.opacity = 1`；
   - 两个 rAF 后，隐藏 plate（`visibility:hidden`），确保它绝不会透过淡化边缘形成重影；
   - 抠图用 260 ms ease-out 从 1 → 0 淡出（柔和交接到视频，避免突变）；
   - 设置 `--glide:1.6s`，添加 `.glide`，然后 `place('case')`，使镜头、遮罩和背景一起平滑移动。
4. 播放片段。**缓动速度曲线**在每个 rAF 中运行：

   ```
   p = currentTime / duration
   playbackRate = max(1.2, 1.8 + 2.4 · sin(π · min(p·1.08, 1)))
   ```

   开始时慢，移动中段峰值接近 4.2×，接近落定时放缓，因此 5.04 秒片段会在 **≈1.72 秒**内播放完。遇到 `ended` 或 `p ≥ .995` 时停止。
5. 暂停片段，将 caseplate 不透明度设为 1（取消其动画），并隐藏片段。末帧和 caseplate 是同一张图，因此切换不可察觉。

加载时将整个过渡片段获取为 Blob（`fetch → blob → URL.createObjectURL`），因为 Kling 片段只有一个关键帧，流式跳转会卡顿。在 `loadeddata` 时设置 `transReady`；fetch 出错时，回退到直接 URL。

## 10. 到达案例模式（`arriveCase`）

- 将模式设为 `case` 并添加 `body.is-case`：
  - 标志淡入；
  - 提示隐藏；
  - nav-case 按钮出现；
  - 启用 `.screen-hit`；
  - 移动端将 `t3`/`t4` 标签设为 `visibility:hidden`。
- 保持 plate 隐藏，抠图不透明度为 0。
- 将 `.screen` 不透明度设为 1，并在其上播放一次**闪光**：不透明度 0 → .55 → 0，600 ms，ease-out。
- 视频 1：`opacity 0, scale(1.06)` → `1, scale(1)`，700 ms。
- `playOnly(0)` 暂停其他所有视频，将当前视频重置到开头并播放。**任何时候都只播放一个屏幕视频。**
- 调用 `caseIn(0, first)`：
  - 票卡：`opacity 0, translateY(-60px) rotate(-6deg)` →（70%）`translateY(6px) rotate(1.2deg)` → 无变换，800 ms，延迟 150。像悬挂标签一样落下并停稳；
  - 说明子元素：`opacity 0, translateY(14px)` → 无变换，600 ms，延迟 `250 + k·70`。
- 预加载视频 2。700 ms 后解除 `busy` 并移除 `.glide`。

`fillCase(i)` 写入票卡标题、三行内容、键、文字和 `NN / 03`，并在 `i === 0` 时为上一项切换 `.dim`。

## 11. 切换案例

- 下一项：滚轮向下、向上或向左滑动、`ArrowDown`、`PageDown`、`Space`、`ArrowRight`、下一项按钮，或点击屏幕。
- 上一项：滚轮向上、向下或向右滑动、`ArrowUp`、`PageUp`、`ArrowLeft`，或上一项按钮。
- 案例 1 中的上一项调用 `toHero()`。案例 3 中的下一项循环回案例 1。

`swapTo(n)` 按以下顺序运行：
1. 并行执行：
   - **caseOut**：票卡用 380 ms、`cubic-bezier(.5,0,.75,0)` 变为 `opacity 0, translateY(-40px) rotate(4deg)`；说明子元素移至 `translateY(-10px)` 并用 300 ms 淡出，交错间隔 40；
   - 旧视频用 350 ms 淡出。
2. 暂停旧视频。
3. 闪光 0 → .35 → 0，时长 420 ms。
4. 新视频用 500 ms 从 `opacity 0, scale(1.04)` → `1, scale(1)`。
5. `playOnly(n)`、`caseIn(n, false)`（票卡无延迟，说明延迟 `80 + k·70`），并预加载下一个视频。
6. 520 ms 后解除 `busy`。

## 12. 返回首屏（`toHero`）

触发方式：「我的工作室」、中央标志，或案例 1 中的上一项。

1. 运行 `caseOut`，暂停所有视频，并用 300 ms 淡出 `.screen`。
2. 移除 `is-case`。设置 `--glide:.9s` 和 `.glide`，然后 `place('hero')`。
3. 取消隐藏 plate。抠图用 700 ms 从 0 → 1 淡入，延迟 150。
4. caseplate 用 800 ms、`cubic-bezier(.65,0,.35,1)` 从 `opacity 1, blur(0)` → `opacity 0, blur(12px)`。同时 plate 用 900 ms、`cubic-bezier(.2,.8,.2,1)` 从 `scale(1.12) blur(8px)` → `scale(1) blur(0)`。二者共同形成模糊的 zoom-out 显现效果。
5. 250 ms 后运行 **heroIn**（700 ms，fill forwards）：
   - 字标从 `translateY(40px)` 升起；
   - 手写字再次写出（clip-path，延迟 250）；
   - 工牌再次落下（`translateY(-110%) rotate(6deg)` →（70%）`translateY(0) rotate(-2deg)` → `rotate(0)`，1100 ms），随后重新开始摇摆。
6. 1000 ms 后解除 `busy`。

## 13. 小屏幕（≤ 820px）

- **从框架中隐藏**：框架的字标、手写字和工牌。它们的副本位于固定 UI 图层（`.m-only`）中。
- **导航**：「我的工作室」在左上，「作品集」在右上，距顶部 12px；「联系方式」和「洽谈项目」位于第二行的 `12px + 44n` 处。标签字号 13px，高 30px，内边距 0 12px。
- **移动端字标**：一个 SVG，`viewBox 0 0 1440 240`，`text x=10 y=210 textLength=1420`，使用相同渐变（底部不透明度 .3）。位置为 `left:3vw; width:94vw; top: 12px + 96n`。
- **移动端手写字**：`right:6vw; top: 12px + 96n + 14vw`，15vw，旋转 −7deg，`text-shadow 0 2px 10px rgba(0,0,0,.2)`。
- **移动端工牌**：将框架工牌的 `cloneNode` 放入 `.m-badge`。外框为 `right:2vw; top: 12px + 96n + 9vw; width:27vw; height: 27vw·1030/582`，z −1。内部工牌保持 582×1030，使用 `scale: var(--mbs)` 和 `translate: calc(-288px + 13.5vw) 0`。
- **男子**居中并锚定底部。照片从顶部起经过 190 框架单位淡入纯色 `#0b3b2a`，但清晰的抠图保留在上层，因此头发绝不会被淡化。
- **案例模式**：
  - 标志隐藏；
  - 票卡居中于 `top:62px`，`width:min(86vw,360px)`，`padding 22px 26px 16px 36px`，标题 38px，行文字 11px，孔洞 15px；
  - 说明居中位于票卡下方的 `top: 62px + var(--th) + 18px`，键名 15px，正文 13.5px，隐藏计数器；
  - 电脑位于底部；
  - 上一项/下一项按钮沿底部排成一行（`bottom: safe-area + 2.2vh`）：圆 42px，箭头 20px，单行标签 12.5px（隐藏 `<br>`），上一项位于 `left:6vw`，下一项镜像位于 `right:6vw`。
- **提示**：`bottom:18px`，11px。

## 14. 减少动态效果

`@media (prefers-reduced-motion:reduce)` 为所有元素设置 `animation:none!important; transition:none!important`。在 JS（`RM`）中：
- 入场直接显示所有元素；
- 跳过摇摆和摆动；
- 下潜跳过片段并立即切换底图；
- 其他所有时长乘以 0。

## 15. 文案与品牌说明

所有名字均为虚构：Haldoren、Vell、Vasari、Mina。页面不含真实标志（电脑没有品牌标记），也不含真实人物。

每条字符串，准确如下：
- **导航和 UI**：「我的工作室」、「作品集」、「联系方式」、「洽谈项目」、「HALDOREN」、「滚动进入作品」。
- **首屏**：「动态设计」。
- **工牌卡片**：「设计师名片」、「2026」、「艺术总监 // 设计师」、「姓名」、「E. HALDOREN」、「专注领域」、「动态设计」、「TG」、「@HALDOREN.MOTION」、「邮箱」、「[已省略邮箱]」。
- **案例按钮**：「上一个案例」、「下一个案例」。
- **案例**：§1 表格中的票卡和说明字符串。

标题：`Haldoren — 动态设计作品集`。