视频工作室

# Kolibrie Studio：复刻提示词

为 **Kolibrie** 构建一个包含三个区块的落地页。这是一家虚构的工作室，制作社交平台短片、reels 和动态图像。页面为单个独立 HTML 文件（一个内联 `<style>`、一个内联 `<script>`、四款自行托管的字体），采用温暖的 golden-hour、奶油色与番茄红视觉风格。三个区块分别是：全屏 **hero**，带循环播放的视频背景和跟随光标的照片卡片；固定的 **“最新作品”** 区块，左侧为文案，右侧为五张案例卡片组成的 3D 堆叠，随滚动逐张剥离；以及纵向较长的 **“认识团队”** 区块，标题始终固定在中央，页面渐变至接近黑色，十二张照片在两侧以不同速度向上经过。下述每项动画和交互都必须精确重建，使用相同的库、时长、缓动和数值。

---

## 1. 库（按此顺序在 `<body>` 末尾加载）

| 库 | URL |
|---|---|
| GSAP 3.13.0 | https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js |
| ScrollTrigger | https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js |
| SplitText | https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js |
| DrawSVGPlugin | https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/DrawSVGPlugin.min.js |
| InertiaPlugin | https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/InertiaPlugin.min.js |
| Lenis 1.3.17 | https://cdn.jsdelivr.net/npm/lenis@1.3.17/dist/lenis.min.js |

注册 ScrollTrigger、SplitText、DrawSVGPlugin 和 InertiaPlugin。如果 GSAP 加载失败，立即显示所有内容（页面绝不能一直隐藏）。另设 4 秒兜底机制：如果届时页面尚未将自身标记为就绪，则显示所有内容。

## 2. 字体

自行托管各字体的 latin woff2 子集（在独立文件中以 base64 data URI 嵌入）。所有字体均来自 Google Fonts。

| 字体家族 | 用途 | 轴 / 设置 | Google Fonts 来源 |
|---|---|---|---|
| Archivo（可变字体） | 粗重窄体无衬线字体：标题、导航、标签、卡片标题 | wght 100–900, wdth 62–125。标题使用 `"wght" 700, "wdth" 72`；卡片标题和徽章使用 `"wght" 800, "wdth" 72` | https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900 |
| Playfair（可变字体，2.0 字体家族 "Playfair"，而非 "Playfair Display"） | 轻盈、高对比度衬线字体，用于标题中的替代词、眉题、段落、链接 | opsz 5–1200, wdth 87.5–112.5, wght 300–900。标题替代词 `"wght" 300, "wdth" 87.5, "opsz" 120`；眉题 `"wght" 500, "wdth" 87.5, "opsz" 40`；段落 `"wght" 400, "wdth" 100, "opsz" 20` | https://fonts.googleapis.com/css2?family=Playfair:opsz,wdth,wght@5..1200,87.5..112.5,300..900 |
| Yellowtail | 手写体字标 "Kolibrie"（导航 logo 和团队印章） | 常规 | https://fonts.googleapis.com/css2?family=Yellowtail |
| Titan One | 团队照片上圆润活泼的姓名贴纸 | 常规 | https://fonts.googleapis.com/css2?family=Titan+One |

声明 Archivo 时使用 `font-weight: 100 900; font-stretch: 62% 125%`，Playfair 使用 `font-weight: 300 900; font-stretch: 87.5% 112.5%`，全部设置 `font-display: swap`。

## 3. Head、设计变量和缩放系统

- 标题：**Kolibrie Studio**。Meta 描述：“Kolibrie：一家制作让人停下滑动的 reels、影片和动态图像的小工作室。”使用标准 UTF-8 字符集，以及 `width=device-width, initial-scale=1` 视口设置。
- 颜色变量：奶油色 `#faf3e4`（页面背景）、墨色 `#141110`（文字）、番茄红 `#ef4a23`（强调色）、黄油黄 `#ffd46e`、天蓝 `#8fc6e8`、粉色 `#f6a9c2`、鼠尾草绿 `#b9c48a`、白色 `#ffffff`、夜色 `#141110`（深色主题背景）。`--page` 变量保存当前页面背景色，默认为奶油色。
- 缩放：所有尺寸均使用 `rem`，根字体大小随视口流动变化。桌面端：`html { font-size: calc(100vw / 90) }`，因此宽度为 1440 px 时，1 rem = 16 px。宽度为 991 px 及以下时：`calc(100vw / 60)`。600 px 及以下时：`calc(100vw / 24.375)`（390 px 手机上为 16 px）。
- 重置：所有元素使用 border-box，外边距和内边距归零，链接继承颜色且无下划线，图片为块级元素。body 使用页面变量作为背景，并设置 `transition: background-color .7s cubic-bezier(.65,.05,0,1)`，文字为墨色，字体为 Archivo，并设置 `overflow-x: clip`。
- Lenis 辅助规则：`html.lenis, html.lenis body { height: auto }` 和 `.lenis.lenis-smooth { scroll-behavior: auto !important }`。
- 页面就绪前，`main` 为 `visibility: hidden`（直到设置 `html[data-page-ready]`）。所有标记为文字或滚动显现的元素，初始均为 `visibility: hidden`，由显现代码将其显示。

### 通用文字样式

| 样式 | 字体 | 大小（桌面端 / ≤991 / ≤600） | 其他 |
|---|---|---|---|
| Hero 标题 | Archivo 700, wdth 72 | 9 rem / 6.4 rem / 4 rem | 大写，letter-spacing −0.02em，line-height 0.8em |
| 区块标题 | Archivo 700, wdth 72 | 8 rem / 6 rem / 4.2 rem（团队标题：桌面端 7 rem，手机端 4.2 rem） | 同上 |
| 标题替代词 | Playfair 300, wdth 87.5, opsz 120 | 继承 | letter-spacing −0.035em |
| 眉题 M | Playfair 500, wdth 87.5, opsz 40 | 2.5 rem / – / 1.75 rem | letter-spacing −0.03em，line-height 1em |
| 眉题 S | 同 M | 2 rem / – / 1.5 rem | 同上 |
| 段落 | Playfair 400, wdth 100, opsz 20 | 1.25 rem | line-height 1.35，letter-spacing −0.01em |

为 SplitText 行包装元素设置 `padding-bottom: .06em; margin-bottom: -.06em`，避免字母下伸部被行遮罩裁切。

## 4. 素材（全部使用直接生成链接，绝不重新托管）

图片通过 Higgsfield 缩放服务提供，格式为 `https://images.higgs.ai/?default=1&output=webp&url=<url-encoded result URL>&w=<width>&q=85`。

| 素材 | 内容 | 原始尺寸 | 使用的 URL |
|---|---|---|---|
| Hero 视频 | Kling 3 循环视频（5.04 s，1280×720，H.264，24 fps，无声）：左侧橄榄枝剧烈摇曳，阳光耀斑在枝叶间闪烁，叶影快速掠过右侧陶土色墙面，中央为平整空白的奶油色区域 | 1280×720 | https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261110_231342_88260d66-aa30-4612-9157-d7f1b5a66d8c.mp4 |
| Hero 底图（视频封面及减少动态效果时的静态图） | 同一场景的静态图 | 2048×1360 | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261110_224241_f6feccd5-1c45-4d22-b369-f927916f9973.png&w=2048&q=85 |
| 作品拼图 1 | 16:9 营销静态图组成的 2×2 网格：0 Tuscan 公路上一辆红色复古汽车车顶上戴墨镜的巨型橙子，1 从上方看一名女子躺在碧蓝泳池的条纹充气浮床上大笑，2 烘焙柜台上的可颂塔，一只手正拿走一个可颂，3 被太阳晒热的街道上正在做 ollie 的滑板手 | 2688×1520 | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261110_224238_b0899b4d-5876-4c63-98d3-8608d8dbe790.png&w=2400&q=85 |
| 作品拼图 2 | 2×2 网格：0 灯串下夜市小吃摊旁的朋友们，1 沿落日海滩携冲浪板行走的冲浪者，2 三角梅点缀的浅彩色墙边的橙色踏板车，3 奶油色背景上溅起水花的橙味汽水瓶 | 2688×1520 | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261110_224238_aee93a53-873f-470f-afb3-6395c22ab639.png&w=2400&q=85 |
| 团队拼图 1 | 阳光明媚的老街上的 3:4 肖像组成的 2×2 网格：0 手持咖啡杯的女子，1 携胶片相机和背包的男子，2 穿连帽衫和绿色外套坐在墙上的男子，3 戴红色针织帽的女子 | 1744×2336 | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261110_224239_be9bd6b1-debb-4a95-aadf-1a36e4d2f557.png&w=1600&q=85 |
| 团队拼图 2 | 2×2 网格：0 坐在长椅上吃薯条的女子，1 靠着陶土色墙面大笑的男子，2 脖子上挂着红色耳机的男子，3 戴眼镜的卷发女子 | 1744×2336 | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261110_224238_bfc657e7-cbc1-43fb-a726-e8be5dd42302.png&w=1600&q=85 |
| 幕后花絮拼图 | 2×2 网格：0 阳光街道上装在 gimbal 上的 cinema camera，1 双手拿着空白 clapperboard，2 迷你三脚架上的手机正在拍摄一盘意面，3 日落时的 boom microphone 和金色 reflector | 1744×2336 | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261110_224238_bf8567fa-9d67-4f1e-b4e0-5662c0bf70e4.png&w=1600&q=85 |

### 从拼图中裁出单张照片（不在本地切图）

页面上的每张照片都是带有 `data-crop="<sheet>:<cell>"` 属性的 `.crop` 容器（单元格 0–3，按行优先排列）。脚本在加载时填充它：插入一个 `.cell` div，其宽高比为单元格自身的比例，尺寸足以覆盖容器（`position: absolute; centred with translate(-50%,-50%); aspect-ratio: var(--ar); width: max(100cqw, calc(100cqh * var(--ar)))`；容器设置 `container-type: size; overflow: hidden`）。单元格内放置整张拼图的 `<img>`，设置 `position: absolute; max-width: none`，其中 width = sheetW / cellW × 100 %，height = sheetH / cellH × 100 %，left = −cellX / cellW × 100 %，top = −cellY / cellH × 100 %。图片设置 `loading="lazy"` 和 `decoding="async"`。单元格矩形使用源图像素坐标 `[x, y, w, h]`，随后各边均向内缩进 4 px，确保白色间隔永不露出：

| 拼图 | 单元格 0 | 单元格 1 | 单元格 2 | 单元格 3 |
|---|---|---|---|---|
| work1 (2688×1520) | 0,0,1336,752 | 1352,0,1336,752 | 0,768,1336,752 | 1352,768,1336,752 |
| work2 (2688×1520) | 0,0,1335,749 | 1356,0,1332,749 | 0,770,1335,750 | 1356,770,1332,750 |
| team1 (1744×2336) | 0,0,864,1156 | 881,0,863,1156 | 0,1175,864,1161 | 881,1175,863,1161 |
| team2 (1744×2336) | 0,0,864,1159 | 880,0,864,1159 | 0,1176,864,1160 | 880,1176,864,1160 |
| bts (1744×2336) | 0,0,865,1160 | 881,0,863,1160 | 0,1176,865,1160 | 881,1176,863,1160 |

## 5. 页面结构，从上到下

### 5.1 加载擦除效果（固定覆盖层）

固定的全屏图层（`z-index: 1000`，不响应指针事件，`overflow: clip`）包含一个 SVG（viewBox 0 0 1000 1000，`preserveAspectRatio="none"`，铺满屏幕），其中只有一条番茄红描边路径，端点和连接处均为圆形：`M43 259C296 11.5688 994 -3 922.994 498.259C851.988 999.517 281.229 1004.28 123 767C-35.2287 529.721 179 259 472 259C765 259 792 498.259 659 654C526 809.741 319 755 285 669.001C251 583.001 299 452 496 452C693 452 876.073 639.171 935 937.001`。初始描边宽度为 0。覆盖层获得 `data-transition-ready` 后，设置为 `display: none`。

### 5.2 光标标签（“查看案例 →”）

固定在左上角的元素（`z-index: 100`，不响应指针事件），内含一张宽 9.5 rem 的黄油黄色卡片，设置 `overflow: hidden`，默认缩放为 0，使用 `transition: transform .4s cubic-bezier(.65,.05,0,1)`。包装元素具有 `data-cursor-marquee-status="active"` 时，卡片缩放至 1。内部放置两份“查看案例 →”文字（Archivo 700 wdth 72，大写，1.3 rem，内边距 .375em .25em，不换行）；第二份位于 `left: 100%`。两份文字都通过 CSS 关键帧持续线性移动到 translateX(−100%)，默认暂停。

### 5.3 导航（固定，z-index 50）

上下内边距 1.25 rem，左右内边距 1.5 rem，使用 space-between 的 flex 横排；导航条自身不响应指针事件，但子元素响应。
- 左侧：Yellowtail 字体的字标 "Kolibrie"，3.6 rem，line-height 1，番茄红，围绕左侧中心旋转 −8°，margin-top .2 rem。链接到页面顶部。
- 中央：绝对定位并水平居中，top 1.25 rem：白色胶囊，高 3 rem，内边距 0 1.25 rem，间距 1.5 rem，包含三个大写链接，字体 Archivo 700 wdth 72，大小 1.05 rem，letter-spacing −0.01em：**关于我们**（跳转到团队区块）、**作品**、**服务**（后两者均跳转到作品区块）。每个链接采用纵向 flex 排列，下方放置一个空的下划线容器（绝对定位，全宽，top 100 %，高 .5em，番茄红），悬停时由绘制下划线效果填充。
- 右侧：相同风格的白色容器，间距 .5 rem：先放一个 .45 rem 的番茄红圆点，再放 **联系我们**（跳转到团队区块）。
- 991 px 及以下隐藏中央胶囊。600 px 及以下，导航内边距为 1 rem，logo 为 2.6 rem，联系容器高 2.5 rem，文字 .95 rem，左右内边距 .9 rem。
- 所有页内 `#` 链接均通过 Lenis 平滑滚动（`lenis.scrollTo(target, { duration: 1.4 })`；减少动态效果时使用原生平滑滚动）。

### 5.4 Hero（100vh，`data-cursor-cards`，阈值 300）

`height: 100vh`，隐藏溢出，内容水平和垂直居中。
- **背景视频**：绝对定位并铺满的 `<video muted loop playsinline preload="auto" aria-hidden>`，设置 `object-fit: cover; object-position: center 50%`（手机端为 `6% 50%`，确保橄榄枝保持可见）。poster 使用 hero 底图。未启用减少动态效果时，src 使用 Kling 视频并播放。启用减少动态效果时移除 src，仅显示 poster。设置变化时重新检查。
- **光标卡片**（z-index 1，位于文字后方）：16 rem 正方形，使用 `translate: -50% -50%` 居中（使用 CSS `translate` 属性，让 GSAP 的 x/y 在其基础上叠加），设置 `overflow: hidden`，初始隐藏。内部媒体层缩放为 1.2，包含八个堆叠的裁剪容器，仅带 `on` 类的容器可见。顺序为：work2:1 冲浪者、work1:0 橙子汽车、work2:3 汽水、work1:1 泳池、work2:2 踏板车、work1:2 可颂、work2:0 夜市、work1:3 滑板手。
- **内容**（z-index 2，纵向 flex，居中，间距 2 rem，margin-top −3 rem）：
  - 标题（h1）分为两行：“值得” / “被**分享**的故事”，其中“分享”使用替代衬线字体。以大写形式呈现：“值得 / 被分享的故事”。h1 设置 `data-text-reveal="chars"` 和字重悬停效果（rest 700，near 200，radius 400）。“分享”外的 span 拥有独立的字重悬停效果（rest 300，near 800，radius 400）。
  - 链接“观看作品集”（Playfair 500，wdth 87.5，opsz 40，2.1 rem，letter-spacing −0.03em，line-height 1，间距 .375em），跳转到作品区块。文字带有始终显示的手绘下划线：容器位于 top 118 %，高 .6em，番茄红。旁边放置一个 1em 的番茄红正方形，内部为白色向下箭头（包含两份副本的包装元素；悬停时，两份副本通过 `transform .525s cubic-bezier(.175,.885,.32,1.275)` 向下滑动 100 %）。14×13 容器中的箭头路径：`M12.94 5.7 9.95 8 6.9 10.37l.84 1.86V0h-2.55v12.23l.85-1.86L3 8 0 5.7V9.05l6.47 4.95 6.47-4.95z`。
- **客户标志跑马灯**：绝对定位于 bottom 1.5 rem，全宽，z-index 2。一组包含八个番茄红抽象图标，使用内联 SVG 绘制（虚构 logo，并非真实品牌）：由圆头线条组成的六辐星号；两个并排的胶囊形 “D”；三条波浪线；四个菱形组成的大菱形；三条横线上的半个太阳；两个拱形；四角闪光星；内部带十字的圆。每个图标放在 9×7 rem 容器中，左右外边距 2.5 rem，图标占 60 %。手机端：容器 5.5×5 rem，外边距 1 rem。设置：方向 left，speed 30，scroll speed 10，duplicate 2（行为见第 6 节）。
- 手机端（≤600 px）：内容间距 1.4 rem，margin-top 5 rem，左右内边距 1 rem，链接 1.6 rem。光标卡片始终可见，为静态 7.5 rem 卡片，位于 top 13 %，水平居中，旋转 −5°，显示第一张照片。

### 5.5 “最新作品”（双栏，固定）

区块设置 `data-featured-stack`，滚动系数为 1.2。内部一个高 100vh 的固定元素使用双栏网格（38fr / 62fr，间距 2 rem，内边距 0 3 rem 0 5 rem，子项垂直居中，隐藏溢出）。
- **左栏**（纵向 flex，间距 1.5 rem，垂直居中；作为一个滚动显现组）：
  - 眉题 S，max-width 26 rem：“值得再看一遍。这里有几部刚从我们剪辑台上诞生的作品。”（逐行显现）
  - 区块标题：“最新” + 替代衬线字体的“作品”（大写“最新作品”，在栏内换为两行）。逐字显现，并添加字重悬停效果（粗体词 rest 700 → near 200，衬线词 rest 300 → near 800，radius 400）。
  - 不放其他内容：没有列表，也没有按钮。
- **右栏（舞台）**：`position: relative; height: 100%; perspective: 1400px`。内部为全高堆叠根元素（`transform-style: preserve-3d`），包含五张幻灯卡片，每张设置 `position: absolute; aspect-ratio: 1.75; width: min(80vh, 52vw); left: 50%; top: calc(50% - 5vh); translate: -50% -50%`。每张都是链接卡片：纯色外框，内边距 1.75vh，裁剪容器填满内部，底部渐变覆盖层向内缩进 1.75vh（`linear-gradient(#0000 55%, #0006)`），标题在底部 2.4em 处居中，使用 Archivo 800 wdth 72，大写，7.5vh，line-height .8，letter-spacing −0.02em，奶油色，并带柔和文字阴影 `0 .05em .3em rgba(0,0,0,.25)`。每张卡片都带有 `data-cursor-marquee-text="View case →"`。从前到后：

| # | 标题 | 外框颜色 | 照片 |
|---|---|---|---|
| 1 | 榨出阳光 | 番茄红 | work1:0 |
| 2 | 深水时光 | 天蓝 | work1:1 |
| 3 | 酥香烘焙 | 黄油黄 | work1:2 |
| 4 | 街头魅力 | 鼠尾草绿 | work1:3 |
| 5 | 夜间小食 | 粉色 | work2:0 |

- **徽章**：绝对定位在舞台右下角（right 1 rem，bottom 1 rem），9×9 rem，z-index 5。一个 SVG（viewBox 200×200），内有半径 r 98 的番茄红圆；沿半径 70 的圆形路径环绕文字“滚动 · 收藏 · 分享 · 再来 ·”，字体 Archivo 800 wdth 80，24 px，奶油色，通过 `lengthAdjust="spacing"` 拉伸至 `textLength 436`；中央为奶油色轮廓太阳（一个半径 r 17 的圆，加八条圆头光芒，stroke 5）。
- **≤991 px**：不固定。单栏，高度 auto，内边距 6 rem 1.5 rem 4 rem，间距 3 rem。卡片改为纵向列表（相对定位，全宽，间距 1.5 rem），外框内边距 1 rem，标题 3.4 rem，位于 bottom 1.6em（手机端为 2 rem），隐藏徽章。

### 5.6 “认识团队”（长区块、粘性标题、深色主题）

区块高 340vh（991 px 及以下为 260vh），设置 `data-page-theme="dark"`。
- **粘性标题**（`position: sticky; top: 0; height: 100vh`，内容居中，z-index 1）。纵向 flex，间距 1.4 rem，文字居中，作为一个滚动显现组：
  - 印章贴纸（绝对定位，宽 10 rem，left −3 rem，top −8 rem，旋转 −10°）：SVG 椭圆（rx 104，ry 58），奶油色填充，10 单位番茄红描边，内部为 Yellowtail 54 px 番茄红的 "Kolibrie"，旋转 −8°。带有惯性悬停效果。
  - 眉题 M：“画面背后的创作者”（逐行显现）。
  - 标题 7 rem：衬线“认识”、粗体“这群”、衬线“伙伴”，显示为“认识这群伙伴”，仅“这群”使用粗体。逐字显现，并添加字重悬停效果（粗体 rest 700 → 200，衬线词 rest 300 → 800，radius 400）。
  - 段落，max-width 26 rem：“十二位创作者，一个群聊。趁咖啡还没凉，我们拍摄、剪辑、制作动画。”
- **照片层**（绝对定位覆盖整个区块，z-index 2，除照片外均不响应指针事件）：十二张绝对定位的照片卡片。每张使用 4:5 裁剪、暖色占位背景 `#e9dcc6`，并设有旋转角度和视差速度。团队成员照片带姓名贴纸：Titan One 3.4 rem，番茄红填充，.32 rem 奶油色描边（`-webkit-text-stroke` 配合 `paint-order: stroke fill`），居中位于 bottom −0.9 rem，按自身角度旋转。幕后花絮照片则带说明标签：奶油色容器，位于左下角 .7 rem，Archivo 700 wdth 72，大写，.9 rem，内边距 .25 .5 rem。

| 侧边 | 偏移 | Top | 宽度 | 旋转 | 速度 | 照片 | 标签 |
|---|---|---|---|---|---|---|---|
| 左 | 2.5vw | 3 % | 14 rem | −4° | 1 | team1:0 | Noor (−7°) |
| 左 | 21vw | 19 % | 11 rem | 3° | 0.6 | bts:0 | 拍摄现场 |
| 左 | 3vw | 33 % | 13 rem | 5° | 1.3 | team1:1 | Sem (4°) |
| 左 | 23vw | 49 % | 13.5 rem | −3° | 0.8 | team2:3 | Mila (−5°) |
| 左 | 2vw | 64 % | 11.5 rem | −6° | 1.15 | bts:2 | 9:16 里的晚餐 |
| 左 | 20vw | 79 % | 14 rem | 4° | 0.7 | team1:2 | Daan (6°) |
| 右 | 3vw | 2 % | 13.5 rem | 4° | 0.75 | team2:0 | Lotte (5°) |
| 右 | 22vw | 17 % | 11 rem | −5° | 1.25 | bts:1 | TAKE ONE |
| 右 | 2.5vw | 32 % | 14 rem | −3° | 0.9 | team2:1 | Jules (−6°) |
| 右 | 23vw | 48 % | 13 rem | 5° | 1.4 | team1:3 | Yara (4°) |
| 右 | 3vw | 63 % | 11.5 rem | 6° | 0.65 | bts:3 | GOLDEN HOUR |
| 右 | 20vw | 78 % | 14 rem | −4° | 1.05 | team2:2 | Kenji (−4°) |

照片在每侧形成两列交错排列：外列靠近边缘，内列在上升时从居中标题的两端掠过。照片层（z-index 2）始终位于粘性标题（z-index 1）上方，因此照片经过时，标题文字处于照片后方。
- **手机端（≤600 px）**：照片保持在标题上方；每张照片宽 8 rem，奇数照片距对应边缘 −1 rem，偶数照片距对应边缘 4 rem，从而经过标题上方；任何高度都只有一张照片：覆盖其 top 值，让照片沿区块左右交替排列（左侧照片 1–6 分别位于 1、17、33、49、65、81 %；右侧照片 1–6 分别位于 9、25、41、57、73、89 %）；姓名贴纸为 1.9 rem，描边 .22 rem；隐藏说明标签。印章宽 6 rem，位于 left 0、top −5 rem，标题左右内边距为 1.5 rem。
- **深色主题**：该区块处于激活状态时，`html[data-theme="dark"]` 将页面背景设为夜色 `#141110`（body 在 .7 s 内通过 `cubic-bezier(.65,.05,0,1)` 渐变），区块文字在相同的 .7 s 内变为奶油色。照片、贴纸、导航容器和 logo 保持各自颜色。

## 6. 动画与交互（全部精确实现）

### 6.1 平滑滚动
Lenis 使用 `{ lerp: 0.165, wheelMultiplier: 1.25 }`，由 GSAP ticker 驱动（`lenis.raf(time * 1000)`），配合 `lenis.on("scroll", ScrollTrigger.update)` 和 `gsap.ticker.lagSmoothing(0)`。减少动态效果时关闭 Lenis。

### 6.2 加载序列
在 `document.fonts.ready` 完成或 1.5 s 后开始，以先发生者为准。设置 `html[data-page-ready]`。然后运行一个时间线：

| 时间 | 发生的事情 |
|---|---|
| 0 s | main 设置 `autoAlpha: 0`；擦除路径设置为 `drawSVG: "0% 100%"` 和 `strokeWidth: "30%"`，让粗重的番茄红涂鸦覆盖屏幕 |
| 0.4 s（"reveal" 标签） | main 变为可见；文字显现以 0.6 s 为基础延迟开始；运行页面初始化（所有滚动和悬停系统）；路径在 1.25 s 内通过 `power1.inOut` 补间至 `drawSVG: "100% 100%"`、`strokeWidth: "5%"`，让涂鸦逐渐退绕出屏幕；完成后，覆盖层获得 `data-transition-ready` 并隐藏 |
| 初始化后约 1.3 s | hero 链接始终显示的下划线开始绘制（0.6 s） |

减少动态效果时：无擦除效果、无 Lenis；main 立即显示，跳过显现动画，仍运行初始化。

### 6.3 加载时文字显现（`data-text-reveal`）
SplitText 在 chars 模式下使用 `type: "chars,words,lines"`，在 lines 模式下使用 `"lines,words"`，并设置 `linesClass: "line"`、`charsClass: "char"`、`mask: "lines"`。元素带有字重悬停效果时关闭 `autoSplit`（让悬停效果保留相同的字符节点）。字符（或行）从 `yPercent: 135` 补间到 0，时长 1，缓动 `expo.out`。字符从开头起逐个错开 `0.07 × 0.25 = 0.0175 s`；行间错开 0.07 s。在 `data-text-reveal-group` 内，每个后续元素增加 0.12 s。完成后派发 `reveal:done` 事件。

### 6.4 滚动显现（`data-scroll-reveal`）
使用相同的拆分设置和相同的补间（`yPercent 135 → 0`，1 s，`expo.out`，错开 0.07，字符则为 0.0175）。`"element"` 模式仅将 `y: 24, autoAlpha: 0 → 0, 1` 在 0.8 s 内通过 `expo.out` 变化。`data-scroll-reveal-group` 内的元素放入同一时间线，在组的 `"top 85%"` 位置仅触发一次，各元素间隔 0.12 s。同上，元素带字重悬停效果时关闭 `autoSplit`。

### 6.5 绘制下划线（`data-draw-line`）
六种手绘线条变体（viewBox 310×40，描边宽 10，圆头，`currentColor`，`preserveAspectRatio="none"`），从随机起点开始依次循环：
1. `M5 20.9999C26.7762 16.2245 49.5532 11.5572 71.7979 14.6666C84.9553 16.5057 97.0392 21.8432 109.987 24.3888C116.413 25.6523 123.012 25.5143 129.042 22.6388C135.981 19.3303 142.586 15.1422 150.092 13.3333C156.799 11.7168 161.702 14.6225 167.887 16.8333C181.562 21.7212 194.975 22.6234 209.252 21.3888C224.678 20.0548 239.912 17.991 255.42 18.3055C272.027 18.6422 288.409 18.867 305 17.9999`
2. `M5 24.2592C26.233 20.2879 47.7083 16.9968 69.135 13.8421C98.0469 9.5853 128.407 4.02322 158.059 5.14674C172.583 5.69708 187.686 8.66104 201.598 11.9696C207.232 13.3093 215.437 14.9471 220.137 18.3619C224.401 21.4596 220.737 25.6575 217.184 27.6168C208.309 32.5097 197.199 34.281 186.698 34.8486C183.159 35.0399 147.197 36.2657 155.105 26.5837C158.11 22.9053 162.993 20.6229 167.764 18.7924C178.386 14.7164 190.115 12.1115 201.624 10.3984C218.367 7.90626 235.528 7.06127 252.521 7.49276C258.455 7.64343 264.389 7.92791 270.295 8.41825C280.321 9.25056 296 10.8932 305 13.0242`
3. `M5 29.5014C9.61174 24.4515 12.9521 17.9873 20.9532 17.5292C23.7742 17.3676 27.0987 17.7897 29.6575 19.0014C33.2644 20.7093 35.6481 24.0004 39.4178 25.5014C48.3911 29.0744 55.7503 25.7731 63.3048 21.0292C67.9902 18.0869 73.7668 16.1366 79.3721 17.8903C85.1682 19.7036 88.2173 26.2464 94.4121 27.2514C102.584 28.5771 107.023 25.5064 113.276 20.6125C119.927 15.4067 128.83 12.3333 137.249 15.0014C141.418 16.3225 143.116 18.7528 146.581 21.0014C149.621 22.9736 152.78 23.6197 156.284 24.2514C165.142 25.8479 172.315 17.5185 179.144 13.5014C184.459 10.3746 191.785 8.74853 195.868 14.5292C199.252 19.3205 205.597 22.9057 211.621 22.5014C215.553 22.2374 220.183 17.8356 222.979 15.5569C225.4 13.5845 227.457 11.1105 230.742 10.5292C232.718 10.1794 234.784 12.9691 236.164 14.0014C238.543 15.7801 240.717 18.4775 243.356 19.8903C249.488 23.1729 255.706 21.2551 261.079 18.0014C266.571 14.6754 270.439 11.5202 277.146 13.6125C280.725 14.7289 283.221 17.209 286.393 19.0014C292.321 22.3517 298.255 22.5014 305 22.5014`
4. `M17.0039 32.6826C32.2307 32.8412 47.4552 32.8277 62.676 32.8118C67.3044 32.807 96.546 33.0555 104.728 32.0775C113.615 31.0152 104.516 28.3028 102.022 27.2826C89.9573 22.3465 77.3751 19.0254 65.0451 15.0552C57.8987 12.7542 37.2813 8.49399 44.2314 6.10216C50.9667 3.78422 64.2873 5.81914 70.4249 5.96641C105.866 6.81677 141.306 7.58809 176.75 8.59886C217.874 9.77162 258.906 11.0553 300 14.4892`
5. `M4.99805 20.9998C65.6267 17.4649 126.268 13.845 187.208 12.8887C226.483 12.2723 265.751 13.2796 304.998 13.9998`
6. `M5 29.8857C52.3147 26.9322 99.4329 21.6611 146.503 17.1765C151.753 16.6763 157.115 15.9505 162.415 15.6551C163.28 15.6069 165.074 15.4123 164.383 16.4275C161.704 20.3627 157.134 23.7551 153.95 27.4983C153.209 28.3702 148.194 33.4751 150.669 34.6605C153.638 36.0819 163.621 32.6063 165.039 32.2029C178.55 28.3608 191.49 23.5968 204.869 19.5404C231.903 11.3436 259.347 5.83254 288.793 5.12258C294.094 4.99476 299.722 4.82265 305 5.45025`

mouseenter 时插入下一个变体，设置 `drawSVG: "0%"`，并在 0.5 s 内通过 `power2.inOut` 补间至 `"100%"`。mouseleave 时（等待正在运行的绘制结束后），在 0.5 s 内通过 `power2.inOut` 补间至 `drawSVG: "100% 100%"`，随后移除。标记为 "always" 的链接只绘制一次（0.6 s），永不擦除。

### 6.6 字重跟随光标（`data-font-weight-hover`）
用于全部三个区块标题。触摸设备（`hover: none` 或 `pointer: coarse`）和减少动态效果模式下关闭。获取每个顶层标记元素；复用其显现拆分生成的字符（对加载时显现的标题，等待 `reveal:done`）。否则关闭 autoSplit，将其拆分为字符和单词。对每个字符，从最近的带标记祖先读取 rest / near / radius，将 `--wght` 自定义属性设为 rest，并重写其 `font-variation-settings`，用 `'wght' var(--wght)` 替换现有 wght 轴，同时保留其他轴（wdth、opsz）。存储每个字符在页面坐标系中的中心点。每次 GSAP tick 时：计算指针页面位置到字符的距离 d；系数 f = d ≥ radius ? 0 : 1 − d / radius；target = clamp(rest + (near − rest) × f, between rest and near)。如果变化至少为 1，则通过 `gsap.quickTo(char, "--wght", { duration: 0.4, ease: "power2.out" })` 补间 `--wght`。窗口尺寸变化和每次滚动事件时重新测量所有字符中心点（作品和团队标题采用固定或粘性定位，因此其页面位置会随滚动改变），并将存储的指针 Y 按滚动增量平移，使其保持在页面坐标系中。

### 6.7 Hero 光标卡片（仅桌面端 ≥992 px，且指针精细并支持悬停）
卡片上的 quickTo x / y / rotation：1 s，`power4`。内部媒体层上的 quickTo xPercent（0.6 s，`power2`）和 yPercent（0.7 s，`power2`）。第一张照片为 `on`，卡片初始为 `autoAlpha 0`。在 hero 上 mousemove 时：如果指针位于链接或按钮上，则淡出卡片（0.25 s，`power2.out`）并停止；否则将其淡入。首次移动时，立即将卡片放置在 x = clientX − innerWidth/2、y = clientY − innerHeight/2 − heroTop，然后淡入（0.3 s）。每次移动：dx = (x − lastX)/2，dy = (y − lastY)/2；rotation = (x − lastX)/4；卡片 x / y 按相同公式跟随指针；媒体层设置 xPercent −clamp(−8, 8, dx) 和 yPercent −clamp(−8, 8, dy)，形成轻微反向漂移。将 |dx| + |dy| 加到移动累计值；超过 300 时归零，并按顺序将 `on` 切换到下一张照片。最后一次移动后 66 ms，将旋转和漂移缓动恢复至 0。mouseleave 时：重置所有状态并淡出（0.3 s）。

### 6.8 随滚动方向反转的客户标志跑马灯
循环时长 = speed (30) ×（集合宽度 / 视口宽度）× f，其中桌面端 f 为 1，991 px 以下为 0.5，479 px 以下为 0.25。滚动包装元素设置 margin-left −10 %、width 120 %（scroll speed 10），并追加集合的两个克隆。先将所有集合设置为 xPercent −100（方向 left = −1），再以 `xPercent: -100`、repeat −1、线性缓动补间，从 total progress 0.5 开始。跑马灯上的 ScrollTrigger 在向下滚动时将 `timeScale` 切换为 −direction，向上滚动时切换为 +direction。第二个随滚动同步的触发器（scrub 0，从跑马灯顶部位于视口底部，到跑马灯底部位于视口顶部）将包装元素从 x +10vw 移至 −10vw。

### 6.9 “最新作品”3D 堆叠（桌面端 ≥992 px）
常量：depth 120，offset 40，tiltX 6，tiltY 10，segment duration 1，badge spin 180。为每张幻灯卡片 b 设置：`z: -b × 120, y: -b × 40, zIndex: count − b, autoAlpha 1`。在暂停的时间线中，除最后一张外，每张卡片均在时间 b 执行：移动 `y: "+=" + innerHeight × 0.9`（`power2.in`，duration 1），并从 b + 0.7 开始淡出至 autoAlpha 0（线性，0.25）；同时，将其后所有卡片向前推进一步至 `z: -C × 120, y: -C × 40`（C = 新索引，线性，duration 1）。徽章在整个时间线中线性旋转 0 → 180°。总时长 = count − 1 (4)。ScrollTrigger：以区块为 trigger，start "top top"，end `+= innerHeight × 1.2 × (count − 1)`，固定 100vh 的固定元素并保留固定占位，scrub 0.3，refreshPriority 1，invalidateOnRefresh；onUpdate 将时间线进度设为触发器进度。鼠标倾斜（减少动态效果时关闭）：在堆叠根元素上对 rotationX 和 rotationY 使用 quickTo（0.6 s，`power3`）；在固定区域上 mousemove 时，rotationX = −((y − top)/height − 0.5) × 6，rotationY = ((x − left)/width − 0.5) × 10；mouseleave 时将两者缓动恢复至 0。

### 6.10 “查看案例 →”光标标签（仅精细且支持悬停的指针）
标签包装元素上的 quickTo x / y（0.4 s，`power3`）。首次移动时立即贴合指针位置。每次 pointermove 和滚动时，通过 `elementFromPoint` 查找最近的 `[data-cursor-marquee-text]`。进入此类元素时，将其文字复制到两个 span，将关键帧时长设为文字长度 / 5 秒，开始播放，并将状态设为 active（卡片缩放进入）。离开时，将状态设为 not-active（卡片缩放退出），并在 0.4 s 后暂停滚动动画。

### 6.11 团队照片视差
使用 gsap.matchMedia，分别设置 desktop（≥992）、tablet（480–991）、mobile（≤479）和 reduced motion（none）。距离为 320 × k，其中桌面端 k 为 1，平板端为 0.5，手机端为 0.3。每张照片从 `y: distance × speed` 补间至 `y: −distance × speed`，线性缓动，随整个区块滚动同步（scrub true），start `"clamp(top bottom)"`，end `"clamp(bottom top)"`，invalidateOnRefresh，refreshPriority −1。向下滚动时，每张照片都按表中各自的速度上升，营造层次纵深。

### 6.12 惯性悬停（InertiaPlugin，精细且支持悬停的指针，未启用减少动态效果）
在团队区块上：每个动画帧跟踪指针速度（vx、vy = 当前帧的位移增量）。指针进入照片（或印章）时，计算相对目标中心的偏移（F、R），torque = (F × vy − R × vx) / hypot(F, R)，并运行 `gsap.to(target, { inertia: { x: { velocity: clamp(±1080, vx × 30), end: 0 }, y: { velocity: clamp(±1080, vy × 30), end: 0 }, rotation: { velocity: clamp(±60, torque × 20), end: 0 }, resistance: 200 } })`。照片沿划动方向被轻甩出去，然后弹回。

### 6.13 页面主题切换
在每个 `[data-page-theme]` 元素上设置 ScrollTrigger：start "top 55%"，end "bottom 45%"，refreshPriority −1。激活时，将 `html[data-theme]` 设为该元素的值（"dark"）；否则移除。背景和文字颜色通过第 5.6 节的 CSS transition 渐变，向上滚动返回时恢复奶油色页面。

## 7. 减少动态效果
`prefers-reduced-motion: reduce` 下：无擦除效果、无 Lenis、无显现动画（所有文字可见）、无字重悬停、无惯性悬停、跑马灯不移动、堆叠不倾斜、无团队视差，hero 显示静态 poster。Hero 光标卡片、“查看案例 →”标签和固定卡片堆叠（其下落推进步骤及徽章旋转）仍然有效，因为它们与指针或滚动位置绑定，而非环境动态效果。团队区块改为 auto 高度：标题正常排布，上内边距 8 rem、下内边距 4 rem，十二张照片在响应式网格中流动排列（`repeat(auto-fill, minmax(14rem, 1fr))`，间距 2 rem，内边距 2 rem）。

## 8. 验收清单
- 在 1440×900 下：涂鸦擦除效果退绕消失，“值得 / 被分享的故事”逐字上升出现，“观看作品集”下方绘出下划线。
- 在 hero 中移动鼠标，会显示一张 16 rem 的照片卡片，在标题后方拖尾跟随。它随移动倾斜，每移动约 600 px 切换一次照片，在链接上方隐藏。
- 靠近任一三个标题时，指针 400 px 范围内的粗体字变细，衬线字变粗。
- 作品区块固定持续 4.8 个屏幕高度。番茄红卡片向下离开，天蓝卡片向前推进，依次直到“夜间小食”。徽章旋转半圈。堆叠朝鼠标方向倾斜，卡片上方显示黄色“查看案例 →”标签。最前方卡片与左侧文案齐平。
- 团队区块将页面变为接近黑色，文字为奶油色。“认识这群伙伴”保持居中，十二张照片在两侧以不同速度向上经过，覆盖标题文字；快速划过可轻甩照片。向上滚动返回时恢复奶油色背景。
- 手机端（390 px）：标题上方有一张静态倾斜照片卡片、纵向堆叠的卡片列表，以及在团队标题上方升起的小照片。无横向滚动。