用 AI 制作会讲故事的猫猫网页

生成相同风格,不同品种的小猫/小狗,6张

尺寸调整为1920x1080(16:9比例)

用图片中的小猫,生成不同的动作,9张

我要做一个 scrollytelling 网页，核心逻辑：
用户滚动页面时，主视频进度跟随滚动同步变化
（向下滚=前进，向上滚=倒放）。

【素材】
- 【这里替换开头视频】intro-loop.mp4：开头循环动画（用户未滚动时循环播放）
- 【这里替换主视频】main.mp4：主视频（滚动驱动进度）
- 【这里替换结尾视频】outro-loop.mp4：结尾循环动画（滚到底后循环播放）
- 【这里替换排版参考图】reference.jpg:文字排版参考图

【视频主题/情绪】
这条视频想传达的是：【这里替换你的网页想表达的主题】

请分四步完成：

━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【一、视频叙事拆解】
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
基于上面的主题 + main.mp4 的画面节奏，
拆 【这里替换成你的关键节点数量】 个关键节奏点，每个节奏点：
- 标注对应 main.mp4 的时间区间
- 写一句有情绪感的中文文案（15-30 字）

━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【二、三段式切换逻辑】
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- 滚动进度 = 0 → intro-loop（autoplay loop muted）
- 滚动进度 0-1 → main（滚动驱动，不 autoplay）
- 滚动进度 ≥ 0.98 → outro-loop（autoplay loop muted）

切换实现：
- 三段视频同时渲染，用 opacity 控制显隐
- 0.5s fade 过渡，避免硬切
- 三个视频都加 playsInline preload="auto"

━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【三、参考图排版应用】
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
先分析 reference.jpg 的排版语言：
- 字体：衬线/无衬线、字重对比、是否全大写
- 字号层级：主标题 / 副标题 / 描述 的比例
- 对齐方式：居左 / 居中 / 非对称多栏
- 颜色体系：主色、强调色、背景色
- 装饰元素：CTA 按钮、标签、icon、分割线
- 整体气质：极简 / 密集 / 对比强 / 呼吸感

然后把这套排版语言完整应用到每段文案上：
- 字体/字号比例/颜色/布局全部还原参考图
- 字体用 Google Fonts，无匹配的找最接近款
- 如果参考图是"多栏布局"，每段文案按相同结构排
- 如果参考图有 CTA/tags，在最后一段同步出现

━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【四、技术实现要求（避坑重点）】
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
技术栈：纯 HTML + CSS + JavaScript，不用任何框架。

- 视频全屏背景：position: fixed, object-fit: cover
- 主视频必须 muted + playsInline + preload="auto"，不 autoplay
- 页面总高度 = main 时长 × 100vh
- scroll 进度(0-1) × main.duration = main.currentTime
- 用 requestAnimationFrame 平滑 seek，避免卡顿
- 文案容器 position: fixed 居中，fade in/out 切换
- 移动端兼容：iOS Safari 必须 playsInline
- 响应式：PC 多栏布局在移动端自动堆叠

━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【输出】
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
直接输出完整 index.html 文件。```

brew install ffmpeg

ffmpeg -i main.mp4 -vf scale=1920:-1 -r 30 -crf 25 -an main-small.mp4