Scroll-Cinematic — 一次提示 3D 产品站点
这到底是什么（请先阅读）
流行的“3D 滚动”效果不是 Three.js。它是一种画布图像序列擦洗：
将一段简短的电影剪辑导出为约 180 张编号的 JPG 图像，全部预加载，并
根据滚动进度选择绘制到 <canvas> 的帧。向前/向后滚动即可播放
剪辑。配合 Lenis 平滑滚动和与滚动同步的叠加文案，呈现出高级 3D 效果。
“3D”效果完全来自源视频——我们使用 Higgsfield 生成。
技术栈：纯 HTML + CSS + JS + Lenis（零构建，可在任何静态服务器上运行）。
前置条件
- Higgsfield MCP 已连接并拥有积分（每个站点约 $1–2 美元）。这是用户必须设置的唯一内容。
- ffmpeg — 不要要求用户安装。下面的步骤 0 会自动安装（无需 Homebrew）。
- 此技能已安装到
~/.claude/skills/scroll-cinematic/。
步骤 0 — 确保 ffmpeg（始终首先运行）
运行 bash ~/.claude/skills/scroll-cinematic/scripts/ensure-ffmpeg.sh。该脚本会使用系统中已有的 ffmpeg（如果存在），
否则会下载一个静态二进制文件到 /tmp/ffmpeg-bin/ffmpeg（适用于 macOS/Linux，无需 Homebrew）。
提取/压缩脚本已自动回退到该路径。切勿因 ffmpeg 而阻塞构建。
流程——从单个提示中运行所有这些
1. 确定简报（适用于任何站点——除非主题不明确，否则无需额外提问）
根据用户提示选择：站点类型、主体主题、风格/配色、品牌/名称 （如果未提供则自行发明），以及 2 个主体动作。主体主题就是站点所涉及的内容—— 产品、人物/创始人、建筑物/空间、菜肴、车辆或抽象视觉。 按站点类型的默认动作：
- 产品（瓶子、小工具、鞋子、化妆品）→ 360° 旋转 + 爆炸/倾倒/展示。
- 作品集 / 个人品牌 → 电影肖像或抽象液体/几何运动 + 慢速视差/轨道运动。
- 机构 / 应用 / SaaS → 抽象 3D 形状/标志变形或太空中的 UI + 光流飞行穿越。
- 承包商 / 家居服务 / 房地产 → 建筑物/家/工地的慢速轨道或飞行穿越 + 细节展示。
- 餐厅 / 食品 → 菜肴 360° 旋转 + 食材/蒸汽运动或内部飞行穿越。
- 健身 / 活动 / 旅行 → 主体（运动员、人群、风景）的运动 + 扫掠摄像机运动。 如果不确定，默认使用一个 主体轨道/飞行穿越 和一个 展示/视差 剪辑。
2. 生成主体关键帧（Higgsfield generate_image）
- 模型：
nano_banana_pro（顶级质量/清晰）。提示语描述站点主体 （产品、人物、地点、抽象），强调光影、有意向的背景，“超清晰、 逼真、8k、编辑/广告风格”。16:9 比例。（对于作品集，也可以使用品牌色彩的 抽象 3D 渲染，以避免肖像权/IP 问题。） - 轮询
job_display直到status:"completed"；保留作业的 id（用作视频起始帧）。
3. 生成 1–2 个电影剪辑（Higgsfield generate_video）
- 模型：
seedance_2_0，resolution:"1080p"，aspect_ratio:"16:9"，duration:6，medias:[{role:"start_image", value:<关键帧 id>}]。始终传递declined_preset_id:"24bae836-2c4a-48e0-89b6-49fcc0b21612"（如果提示建议预设）；如果 建议不同的预设，则使用该预设的 id 在declined_preset_id中重试。 - 动作提示模式（选择适合主题的）：
- 旋转台 — “平滑无缝的完整 360 度旋转，完整一圈，保持居中”。
- 飞行穿越 — “缓慢连续的向前摄像机飞行穿越/围绕 [建筑物/空间/场景]，平滑推轨，深度视差”。
- 展示/爆炸 — “[内容/组件/元素] 爆炸式向外散开或组装并缓慢漂浮”（保持物体/场景语境——适合审核）。
- 抽象 — “优雅慢速变形的液态金属/玻璃/粒子形态飘动并旋转”。
- 同时生成两个剪辑（一条消息中调用两个工具），然后轮询
job_display。 1080p 渲染大约需要 3–8 分钟；在轮询之间后台休眠。 - 费用： 使用
get_cost:true预检一次；每个 1080p 剪辑约 54 积分。如果用户积分不足，请确认。
4. 处理渲染结果
completed→ 使用curl下载results.rawUrl。nsfw或failed→ 退款，重试。审核可能会误将抽象的“漂浮药丸/ 溶解人物”标记为违规；将其改为产品相关语境，或将该剪辑切换到grok_video_v15（resolution:"720p"，更宽松）。产品旋转台/爆炸在 1080p 下能通过审核。- 告知用户任何重试；如果没有渲染成功，绝不声称剪辑已渲染。
5. 分割并压缩帧（ffmpeg）
scripts/extract-frames.sh <clip.mp4> frames/<name> 180→ 约 179 张编号的 JPG 图像。scripts/compress-frames.sh frames/<name> 1600 88→ 宽度 1600px，质量 88（清晰，每节 <~15MB）。- 每个剪辑一个文件夹（例如
frames/spin、frames/explode）。
6. 从 templates/ 构建站点
- 复制
templates/index.html、styles.css、scroll-cinematic.js到项目。 - 编辑
SCRUB_SECTIONS配置（index.html 底部）——每个剪辑一个条目：{ section:"#hero", frameCount:179, bg:"#0a0a12", framePath:(i)=>frames/spin/frame_${String(i).padStart(4,"0")}.jpg}。 - 编写品牌文案、配色方案（CSS 变量）、优势/颜色变体/功能部分、统计信息、行动号召按钮。
- 色调偏移技巧用于产品变体/颜色变体（无需额外生成）：
ffmpeg -i base.png -vf "hue=h=120:s=1.15" variant.png。
7. 在 localhost 上启动
- 将
templates/Launch Demo.command复制到项目，编辑 PORT 和名称，chmod +x它。 - 启动它（
python3 -m http.server <port>），curl页面和一个帧以确认 200 状态码，openURL。 - 告诉用户 URL，以及双击 .command 文件可重新启动用于录制。
引擎规则（已包含在 templates/scroll-cinematic.js 中）
- 预加载每一帧；首次加载时绘制第 0 帧；仅在帧索引发生变化时重新绘制。
- 粘性舞台：外部部分
height: 420–600vh，内部position:sticky; top:0; height:100vh。 进度 =clamp(-rect.top / (rect.height - innerH), 0, 1)。在 rAF 循环中节流。 - 适应画布绘制 + HiDPI（
devicePixelRatio，上限 2）。从 Lenis rAF 循环驱动更新 （对任何滚动源都稳健）。叠加文案根据每行[in,out]进度窗口淡入淡出。 - 多部分：
SCRUB_SECTIONS数组；引擎跳过其元素缺失的部分。
已知问题
- 更多/更大的帧 = 加载缓慢 → 保持 1600px / 质量 88 / 约 180 帧。
- 仅限连续运动剪辑（无硬切——向后擦洗时看起来糟糕）。
- 无头截图工具在滚动时会使粘性画布部分变空白；请使用像素采样验证， 并在真实浏览器中实时查看。
python http.server预览在空闲时会关闭——.command启动器是持久的演示方式。
文件
templates/index.html、styles.css、scroll-cinematic.js— 多部分擦洗站点。templates/CinematicReveal.tsx— React/Next 直接使用（可选）。templates/Launch Demo.command— 双击本地主机启动器。scripts/extract-frames.sh、scripts/compress-frames.sh— ffmpeg 流程。