用途:把一段视频做成随滚动而非随时间播放的影视级落地页,英雄区固定(sticky)并随着滚动逐帧切换画面,类似 Apple 产品页或 GitHub Copilot 落地页;英雄区下方为常规滚动的内容与 CTA 区。
主要能力与流程:1) 用 ffprobe 探测时长、帧率、尺寸与音频;2) 选择帧数,默认 80,下限 40、上限 160,按时长建议(≤10s 用 50,10–30s 用 80,30–60s 用 120,>60s 用 160);3) 确定输出目录,默认 ~/Documents/yuv-projects/landings/<slug>/,先执行 mkdir -p ~/Documents/yuv-projects/landings 与 cd ~/Documents/yuv-projects/landings;4) 用 references/extract-frames.py <source-video> <output-dir> [count] 抽帧,输出 frames/f_0001.jpg…,JPG 质量 82、最大宽度 1920;5) 复制并定制 references/landing-template.html 为 index.html,替换 FRAMES、HEADLINE、TAGLINE、CTA_TEXT、CTA_HREF 及 sections;希伯来语内容需设 <html lang="he" dir="rtl"> 并换用 Rubik/Assistant 字体;6) 页面总重超 12 MB 时降低质量到 75 或减少帧数;7) 在输出目录用 python -m http.server 预览 http://localhost:8000;8) 直接部署到 Vercel/Netlify/Cloudflare Pages,无需构建步骤。每次构建结束需告知落地页所在路径。
滚动机制:外层 .scroll-stage 高度以视口单位设定(默认 600vh);sticky 英雄区 position: sticky; top: 0; height: 100vh,所有帧绝对定位并只显示活动帧;滚动监听计算 progress = scrolledIntoStage / scrollableHeight 并夹在 0–1;idx = floor(progress * (N - 1)),切换 .active 类;监听器包在 requestAnimationFrame 中保持 60fps。
设计规则:YUV.AI 品牌项目调用 yuv-design-system 并按媒介锁定模式(Web 默认 Neon 模式:热粉 #FF1464 + 霓虹青 #00E5FF + 白或深黑底,Anton + Inter / 希伯来语 Rubik + Assistant,圆角 0px 或 999px;Warm Editorial 模式仅用于 Hope、Marcus、bigcats.ai、practical.yuv.ai,粉 + 黄 + 骨白,不用纯 #fff;落地页禁用 Decks 模式)。非 YUV.AI 品牌项目不套用该设计系统,按视频氛围选配色,Anton + Inter 仅为合理默认。英雄区叠加要克制(暗角 + 一个大标题);下方区域用浅色画布、大号 Anton 标题、Inter 正文 18–22px、圆角胶囊 CTA。
限制:帧数低于 40 会卡顿,高于 160 页面过重;大页面需降质或减帧;具体收费、价格、平台支持范围等资料未提供。