scroll-world

scroll-world

生成一个由滚动驱动镜头动作的落地页：镜头从场景外部潜入内部，再拉出并穿入下一个场景，环环相扣，全程无任何可见的剪辑切镜。所有视觉素材均由 AI 生成——静态图通过 Higgsfield（或 Codex）生成，视频渲染链默认走 Monid（按次计费的 Seedance 2.0 模型；Higgsfield 积分作为备选降级方案）——而页面只需根据滚动位置实时逐帧播放（scrub）预渲染好的视频。这与 Apple 官网产品展示页所采用的技术同理：镜头是真实移动的，滚动只是在控制时间的推进。

你需要生成的产物： N 个场景静态图 → N 段“潜入”镜头片段 → N-1 段将相邻场景无缝串联的“连接器”片段 → 一个可复用的视频控速播放引擎，将整条视频链当作一趟连续飞行来播放。

决定成败的核心铁律： 接缝处的帧必须绝对逐像素一致（frame-identical）。生成任何连接器片段前，请务必先阅读无缝链条章节。接缝处理不当是导致失败最常见的原因，会让场景转换时出现肉眼可见的“跳帧闪烁（pop）”。

请勿预设特定的前端框架。位于 references/scrub-engine.js 的控速播放引擎是独立的原生 JS 代码（它会自动构建 DOM 并注入 CSS 到你指定的容器中），因此可以轻松嵌入纯 HTML、Next.js、Vue、Python 渲染的页面等任何环境。本 Skill 的真正核心价值在于 Higgsfield 的生成流水线、Prompt 提示词设计以及无缝接缝的处理方案，而非前端框架本身。

---

Step 0 — 环境准备与工具检查 (Bootstrap)

1. Monid CLI — 视频链默认后端：检查 monid --version、monid keys list（当前生效密钥）以及 monid balance——视频链按生成的视频片段以美元计费（Step 1.7 包含了具体价格；一个 1080p、N=6 的视频链约需 $27）。若缺少 CLI 或余额不足以覆盖本次生成，需明确告知用户，并降级切换为使用 Higgsfield 积分渲染视频链——同样的模型和流水线，仅结算方不同（Step 4 → Monid 后端）。
2. Higgsfield CLI — 即使走 Monid 路径也仍然需要：它负责渲染场景静态图（gpt_image_2），也是 kling3_0 NSFW 降级机制以及备用视频链的运行载体。若 $PATH 中未找到 higgsfield，请按 higgsfield-generate Skill 进行安装。若 higgsfield workspace list 报身份验证错误，请提示用户运行 higgsfield auth login（交互式 OAuth 认证，你无法代为执行）；如有必要，再运行 higgsfield workspace set <id>。确认积分足以支付静态图（约 N 次图像生成）——若降级至此生成视频链，还需包含额外 (2N-1) 次视频生成。
3. ffmpeg / ffprobe：需在 $PATH 中可用（用于抽帧与视频编码）。
4. 图像处理工具（用于抠除背景，若需要悬浮场景）：PIL（python3 -c "import PIL"），或 cwebp/sips。可选工具——详见 Step 3。
5. (可选) Codex CLI：若 $PATH 中存在 codex（≥ 0.125）且 codex login status 显示已登录 ChatGPT，场景静态图可以通过 Codex 内置的 image_gen（同样基于 gpt-image-2 模型）生成，费用直接记在用户的 ChatGPT 订阅上，而非消耗 Higgsfield 积分——可在 Step 1.7 向用户提供此选项，对应命令见 Step 2。未安装则自动忽略该选项。
6. 注意事项与踩坑指南：macOS 预装的是 bash 3.2（不支持 declare -A），切勿在脚本中使用关联数组（associative arrays）。Higgsfield 的生成任务每项需要 3–8 分钟—务必以后台解耦（detached background）方式运行并轮询，绝不能使用前台阻塞式调用。使用任务 UUID（job-UUID）引用的方式会被媒体标志拒绝—必须向 --image/--start-image/--end-image 传递本地文件路径。不同视频模型支持的参数有所差异（例如 Kling 没有 --resolution 参数），且是否支持首尾帧（start/end-image）条件约束也各不相同—在批量提交前，先通过 higgsfield model get <job_type> 确认所选模型的 Schema 规范，并查阅 Step 4 的模型对照表。

---

Step 1 — 访客需求调研 (Interview the user)

调研主题应由用户自主表达——请使用自然流畅的口语提出开放式问题，绝不要提供人为拼凑的单选或多选项。凭空列出行业列表会限制用户的思路，显得像是你在替他们做决定；让他们用自己的语言描述（他们实际经营的业务、客户的项目，或者任何创意想法）。请把结构化的多项选择（在 Claude Code 中使用 AskUserQuestion；在其他环境中提出明确的二选一/多选一问题）留给下面那些确实可枚举且风险较低的选择——美术风格、镜头语言以及品牌视觉规范（brand kit）的制定方式——即便在这些选项中，也应提示用户可以自由指定其他方案（如“其他”）。仅询问你无法根据常理做出合理默认设定的内容。需涵盖：

1. 主题（开放式提问，切勿设计为选择题）—“你想打造一个关于什么主题的世界？你的公司、客户的项目，或任何创意想法均可——用简单的一个词或一句话表达即可。” 捕获行业/产品信息 + 一句话宣传语（例如：“一家波霸奶茶品牌，从茶叶采摘到咽下最后一口”），以及品牌名称（若用户已有；否则你在后续环节提出建议）。

2. 品牌视觉规范（Brand kit）—提供三种途径，由用户选择其一：

   • 从 URL 导入：higgsfield marketing-studio brand-kits fetch --url <site> --wait（自动拉取品牌名称、配色与语气风格）。随后使用 brand-kits list --json 读回。
   • 用户直接提供色板 + 品牌名 + 语气风格。
   • 由你提出一套推荐的色板 + 品牌名，交由用户确认。
     最终需确定 4–6 个命名 Hex 十六进制色值、一个显示名称，以及一两个描述语气风格的词汇。

3. 美术风格（Art direction）—默认设为“柔和哑光低多边形粘土微缩模型（clay diorama）、等距视角、移轴微缩景深、暖色光照”。亦可提供备选方案（扁平剪纸风、高光玩具风、粘土动画风、霓虹夜景风）。无论最终选择哪种，都将作为通用的风格前缀文本（style preamble），逐字套用到每个场景 Prompt 中（这是保证全景风格统一步调的关键）。

4. 镜头风格—务必主动询问；这是影片的灵魂语气，绝非单纯的技术细节。 请根据感官体验向用户提问（Claude Code 中使用 AskUserQuestion，其他环境直接提问），并将结果记录为 CAMERA。各选项与 Step 4 的架构直接映射——Step 4 仅负责执行该选项，绝不二次决定：

   • “穿越世界 (Fly through the world)”—镜头潜入每个场景，随后拉高飞出，跨越微缩世界跳跃至下一场景；视角不断变换，充满富有表现力的大幅度航拍动作（这是 flagship-demo 旗舰演示同款视觉效果）。
     → 映射至 Architecture B。推荐作为微缩模型/粘土风格美术方向的默认首选。
   • “连续漫游 (One continuous walkthrough)”—单向向前推进的飞行轨迹，顺滑穿过每个场景并直接进入下一场景，全程不往回拉；每个场景内动作丰富但始终保持向前推进（参照镜头语法表）。→ 映射至 Architecture A。推荐作为写实/真实感美术方向的默认首选。
   • “锁定等距平移 (Locked isometric glide)”—镜头在全片中保持单一固定视角，呈现 Emons 经典的极简风格；世界在镜头前向前或向侧面滑动，无旋转、无隐藏元素的揭示。
     → 映射至 Architecture A + 每个分段 Prompt 中加入锁定等距条款（prompts.md）。
     用简明的一句话说明各自的权衡取舍（架构 B 在接缝处会反转镜头方向—在微缩模型中别具灵动巧思，但在写实风格中容易显得突兀；锁定等距最平缓且重新渲染成本最低；连续漫游则介于二者之间）。

5. 漫游旅程/页面板块（sections）—镜头依次飞过的场景顺序。根据用户主题的自身价值链提出一组初始规划，并允许用户编辑。通常 5–7 个场景效果最佳。
   以波霸奶茶为例：茶园 → 珍珠工坊 → 旗舰门店 → 外送途中 → 社区广场 → 核心爆款产品。每个板块需要包含：一段简短的主体描述（微缩模型里有什么）、小标题（eyebrow）、主标题（headline）、一行正文简介，以及 0–3 个标签气泡（tag pills）。最后一个板块通常是核心爆款产品 + 行动呼吁（CTA）。

6. 移动端版本—务必主动询问；切勿静默生成双端版本。 请提供两个选项进行询问（Claude Code 中使用 AskUserQuestion；其他环境直接提问）：
   “是否需要同时生成针对移动端优化的版本？移动端版本是第二套独立的镜头链，采用 9:16 竖屏原生渲染——专为手机屏幕构图，而非直接裁剪横屏影片——这大约会让 Higgsfield 积分消耗翻倍（需告知估算的具体数值）。”
   选项："仅桌面端" / "桌面端 + 移动端 (原生 9:16 — 约 2 倍积分消耗)"。积分消耗必须明确告知用户，不能仅仅含糊暗示。
   回答所决定的逻辑走向：

   • 是 → 渲染平行的 9:16 竖屏镜头链，并将其作为移动端变体交付（Step 6 / pipeline.md §6b）：竖屏起始画布 → 针对自身渲染帧进行锁帧的 9:16 潜入与连接器片段 → 720 宽度的 -m.mp4 编码视频 → stillMobile 竖屏 Poster 海报图。接入 clipMobile/connectorsMobile/stillMobile（Step 7）；执行完整的移动端 QA 测试（Step 8）。需预留约 2N-1 次额外视频生成及 NSFW 重试预算。
     绝不要默认将居中裁剪的横屏视频作为移动端版本交付—若积分不足以支持竖屏链，需明确告知用户，并提供裁剪编码方案（pipeline.md §6）作为需经用户确认的临时替代方案。
   • 否 → 完全跳过移动端编码与代码接入。引擎自带的手机端适配加固（seek-coalescing 帧寻址合并、iOS priming 预加载、安全区 CSS 等）无论如何都会保持开启——这不属于“移动端版本”，仅仅是保证手机访问时页面不会崩溃—因此仅桌面端的构建也能优雅降级展示。

7. 预算—按成本展示渲染引擎选项，在开始任何渲染前达成一致。 展示渲染梯队（使用 AskUserQuestion），然后针对用户的 N 个场景计算并说明预估的总消耗——N 张静态图 + (2N−1) 段视频 [若包含移动端则视频数 ×2] + ~15% 的重试余量——并在获得用户确认许可后再开始生成。

   • 视频生成梯队（仅列出可选方案—所有选项均包含接缝锁帧约束，详见 Step 4）：

     梯队	模型	粗略成本
     预览/草稿 (Draft)	seedance_2_0_mini (720p)	约为标准梯队的 ¼
     标准 (Standard，默认)	seedance_2_0 (1080p)	基准线
     备选 (Alternate)	kling3_0 (原生 720p)	约等于标准梯队；视觉风格与内容审查机制不同

     草稿梯队可同时兼作预演路线（previz path）：以低成本跑通全链，在确认漫游路线满意后，再在标准梯队上重新渲染最终镜头（pipeline.md 附注）—当账户余额较紧张时，可主动向用户建议此方案。

   • 后端—Monid 为视频链的默认结算方（Step 0.1；接入方式见 pipeline.md → Monid 后端）。基于同样的 Seedance 2.0 模型，按视频片段以美元计费而非积分。按 Token 计价公式 宽度 × 高度 × 24 × 秒数 / 1024，单价为 $7/1M (480p/720p) 或 $7.7/1M (1080p)—实测参考：1080p 8秒潜入镜头 ≈ $2.99，5秒连接器镜头 ≈ $1.87；720p ≈ $1.21 / $0.76；480p ≈ $0.28 / $0.35。一个 N=6 的桌面端视频链在 1080p 下约需 $27 / 720p 下约需 $11，对比 Higgsfield Plus 月度订阅约为 $32 / $16—单片段成本低约 15%，与 Plus 年度订阅基本持平；对于一次性构建项目而言在结构上更为划算（按量付费，无月度过期风险）。在 Monid 上，草稿/预演梯队仅仅是将同一 API 端点设为 480p 分辨率—无需更换模型，从而保证预演到最终渲染在架构上保持模型一致。将 monid balance 余额与预估费用进行对比展示；当用户更倾向于使用自身的订阅、余额不足或必须使用 kling3_0（仅 Higgsfield 支持）时，降级使用 Higgsfield 积分。由于底层使用的是同一个模型（seedance_2_0 对应 Monid 的 seedance-2.0），因此在另一结算方上完成中断的视频链是合理的救场方案——但两者的服务栈存在差异，跨提供商的接缝特性未经过测试：eyeba