video-to-landing-page

视频 → 滚动驱动的落地页

构建一个电影感十足的落地页，让主视觉视频随滚动播放，而不是按时间播放——类似 Apple 产品页或 GitHub Copilot 落地页。提取源视频中的帧，并随着用户滚动切换；粘性主视觉下方的普通滚动区块则展示文案和 CTA。

适用场景

• 用户提供视频，并要求制作落地页、滚动网站、滚动帧主视觉或基于视频的网站
• 提到“Apple 风格滚动”“GitHub Copilot 落地页”“滚动拖动播放”“滚动切换帧”
• 对应的希伯来语表达：“דף נחיתה מסרטון”“אתר עם גלילה”“סרטון בגלילה”

保存位置

默认：~/Documents/yuv-projects/landings/<slug>/——始终将落地页保存在此处，以便之后查找。如果父目录不存在，请创建它。

mkdir -p ~/Documents/yuv-projects/landings
cd ~/Documents/yuv-projects/landings
# Build <slug>/ here.

最终路径：~/Documents/yuv-projects/landings/<slug>/。每次构建完成后，都要告知用户落地页的保存位置。

---

工作流（8 步）

1. 检查源视频——使用 ffprobe 获取时长、帧率、尺寸和音频信息。
2. 选择帧数——默认 80。下限为 40（更低会显得卡顿），上限为 160（页面会很重）。按时长选择：≤10s → 50，10–30s → 80，30–60s → 120，>60s → 160。
3. 确定输出目录——默认使用 ~/Documents/yuv-projects/landings/<slug>/。<slug> 根据视频名称或主题简短命名。仅在用户明确要求时才更改。
4. 提取帧——运行 references/extract-frames.py <source-video> <output-dir> [count]。生成 output-dir/frames/f_0001.jpg……，JPG 质量统一为 82，最大宽度为 1920（源视频尺寸更大时会缩小）。
5. 复制并自定义 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）。
6. 优化帧——构建脚本已将最大宽度缩放至 1920px。如果页面总大小超过 12 MB，将画质降至 75，或减少帧数。
7. 预览——在输出目录中运行 python -m http.server，并打开 http://localhost:8000。在性能不错的设备上，滚动会非常流畅。
8. 部署——将文件夹拖放到 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，并根据媒介锁定一种模式 —
  • Neon 模式（YUV.AI 网页的默认模式）：亮粉色（#FF1464）+ 霓虹青色（#00E5FF）+ 白色或深黑色画布。Anton + Inter（英语）/ Rubik + Assistant（希伯来语）。圆角为 0px 或 999px。
  • Warm Editorial 模式：仅用于 Hope、Marcus、bigcats.ai、practical.yuv.ai — 粉色 + 黄色 + 骨白色，米白色不得使用纯 #fff。
  • 切勿在落地页使用 Decks 模式（Fly High 紫色/黄色） — 该配色仅供幻灯片使用。
• 如果项目不采用 YUV.AI 品牌：不要应用 yuv-design-system。选择契合源视频氛围的配色。Anton + Inter 仍是合理的默认选择，但并非强制。
• Hero 叠加效果应当微妙 — 使用暗角和一个醒目的大标题；不要让画面被遮得过于浓重。
• Hero 以下的版块：使用浅色画布（Neon 模式下为白色，Warm Editorial 模式下为米白色，通用暖色风格下为骨白色）、大号 Anton 标题、采用 Inter 的正文（18–22px），以及锐利的胶囊形 CTA（border-radius: 999px）— Neon 模式下使用粉色填充，其他模式下使用符合品牌的颜色。
• 希伯来语：遵循 RTL，标题使用 Rubik 900，正文使用 Assistant 400/500。

文件引用

文件	用途
references/extract-frames.py	基于 ffmpeg 的帧提取器；还可选择一次性生成完整 HTML
references/landing-template.html	自包含的落地页骨架，包含滚动机制
references/design-notes.md	字体、配色和动效默认设置