视频 → 滚动驱动着陆页
构建一个电影式着陆页，其中英雄区是随滚动播放视频，而非按时间播放——类似于苹果产品页面或GitHub Copilot着陆页。帧从源视频提取，并在用户滚动时切换；在粘性英雄区下方，正常滚动的部分承载文案和行动号召按钮。
何时调用
- 用户提供视频并提出需要着陆页、滚动式网站、帧滚动英雄区或基于视频的网站。
- 提及“Apple风格滚动”、“GitHub Copilot着陆页”、“随滚动擦除”、“随滚动帧”。
- 希伯来语对应表述：“דף נחיתה מסרטון”、“אתר עם גלילה”、“סרטון בגלילה”。
保存位置
默认路径： ~/Documents/yuv-projects/landings/<slug>/ —— 始终将着陆页保存于此，以便后续查找。如父目录不存在，请先创建。
mkdir -p ~/Documents/yuv-projects/landings
cd ~/Documents/yuv-projects/landings
# 在此处构建 <slug>/。
最终路径：~/Documents/yuv-projects/landings/<slug>/。每次构建完成后告知用户着陆页的存放位置。
工作流程（8步）
- 探测源文件 —— 使用
ffprobe获取时长、帧率、尺寸、音频信息。 - 选择帧数 —— 默认
80。最低40（低于此值会出现卡顿），上限160（页面过重）。根据时长决定：≤10秒 → 50帧，10–30秒 → 80帧，30–60秒 → 120帧，>60秒 → 160帧。 - 确定输出目录 —— 默认
~/Documents/yuv-projects/landings/<slug>/。<slug>为简短标识，源自视频名称或主题。仅在用户明确要求时覆盖。 - 提取帧 —— 运行
references/extract-frames.py <源视频> <输出目录> [帧数]。输出输出目录/frames/f_0001.jpg……等，统一JPG质量82，最大宽度1920像素（若源文件更大则缩小）。 - 复制并定制
references/landing-template.html到output-dir/index.html：- 将
__FRAMES__占位符替换为每帧的<img>标签（构建脚本在传递--build-html参数时自动完成）。 - 填写
__HEADLINE__、__TAGLINE__、__CTA_TEXT__、__CTA_HREF__以及各分区内容。 - 对于希伯来语内容：设置
<html lang="he" dir="rtl">，将字体切换为 Rubik/Assistant（参见references/design-notes.md）。
- 将
- 优化帧 —— 构建脚本已自动将帧缩放至最大宽度1920像素。若页面总大小超过12 MB，则将质量降至75或减少帧数。
- 预览 —— 在输出目录内运行
python -m http.server，打开http://localhost:8000。在性能良好的机器上滚动应流畅顺滑。 - 部署 —— 直接将文件夹部署到 Vercel/Netlify/Cloudflare Pages，无需额外构建步骤。
滚动机制
- 外层滚动容器
.scroll-stage高度以视口单位设置（默认600vh= 滚动5屏遍历所有帧）。 - 粘性英雄区
position: sticky; top: 0; height: 100vh，内含所有绝对定位且隐藏（除当前帧外）的帧。 - 滚动监听器计算
progress = scrolledIntoStage / scrollableHeight，范围限制在0-1之间。 idx = floor(progress * (N - 1))—— 将.active类切换到该帧。- 将监听器包裹在
requestAnimationFrame中以确保60fps流畅度。
设计规则
- 如果项目是 YUV.AI品牌（Yuval本人、其作品集、其品牌）：调用
yuv-design-system，并根据媒介锁定模式：- 霓虹模式（YUV.AI网页的默认风格）：热粉色（
#FF1464）+ 霓虹青色（#00E5FF）+ 白色或深黑色背景。Anton + Inter（英文）/ Rubik + Assistant（希伯来文）。圆角0px或999px。 - 暖色编辑模式：仅用于Hope、Marcus、bigcats.ai、practical.yuv.ai——粉色+黄色+骨色，使用米白而非纯
#fff。 - 绝不可在着陆页中使用卡片模式（飞高紫/黄）——该调色板仅限幻灯片使用。
- 霓虹模式（YUV.AI网页的默认风格）：热粉色（
- 如果项目非 YUV.AI品牌：不要应用yuv-design-system。选择与源视频氛围匹配的调色板。Anton + Inter仍是合理的默认选择，但非强制。
- 英雄区叠加效果应微妙——添加暗角效果和一个大标题，不要淹没帧内容。
- 英雄区下方的分区：浅色背景（霓虹模式下为白色，暖色编辑模式下为米白，通用暖色风格下为骨色），大号Anton标题，正文使用Inter字体18–22px，行动号召按钮为尖锐药丸形（
border-radius: 999px）——霓虹模式下使用粉色填充，否则使用品牌色。 - 希伯来语：遵循RTL，标题使用Rubik 900，正文使用Assistant 400/500。
文件参考
| 文件 | 用途 |
|---|---|
references/extract-frames.py | 基于ffmpeg的帧提取器；可选一步构建完整的HTML |
references/landing-template.html | 包含滚动机制的自包含着陆页骨架 |
references/design-notes.md | 排版、调色板和动效默认值 |