KubeezMedia/kubeez-scroll-world-video

# 🍔 Kubeez Scroll-World-Video — *Smash & Co.* 演示 ### ▶️ **[在线演示 → kubeezmedia.github.io/kubeez-scroll-world-video](https://kubeezmedia.github.io/kubeez-scroll-world-video/)**  _{▶ **[观看完整的 20 秒视频](https://kubeezmedia.github.io/kubeez-scroll-world-video/img/showcase.mp4)** · 或亲自滚动 **[在线演示](https://kubeezmedia.github.io/kubeez-scroll-world-video/)**。} ## 项目简介 在这里，滚动并不会移动页面 — 它**驱动着摄像机**。每个场景都是一段简短的预渲染视频；引擎会将你的滚动位置映射到视频的 `currentTime`，因此滚动操作会让摄像机在世界中向前推进。在场景之间，专门的**过渡片段**会让摄像机平滑地从一处移动到另一处，因此整个旅程看起来就像是一次连续的飞行。 | 世界全景 | 着陆页（市场） | 柜台 | 汉堡 | |---|---|---|---| |  |  |  |  | ## 制作过程（教程） 整个项目 — 包括静态图、动态效果，所有的一切 — 都是在 **Kubeez** 平台上生成的。没有使用任何外部工具。以下是工作流： ### 1. 静态图 — 构建一个连贯的世界 - 一张**主世界静态图**（`gpt-image-2`，text‑to‑image）设定了色调、角度和光线。 - 每个**场景静态图**（市场、烤架、柜台、主打汉堡）都是通过 **image‑to‑image** 从主图衍生而来的，因此它们都共享同一种视觉风格。 ### 2. 潜入片段 — 飞入每个场景 - 每个场景静态图都使用 **Seedance 2 Fast (720p)** 的 `image-to-video` 进行动画处理：摄像机一开始位于高处且视野广阔，接着向前滑行并下降进入场景中。 ### 3. 过渡 — 让人感觉连贯无缝的关键 ✨ 这才是真正重要的技术。对于每一对连续的潜入片段： ``` transition.firstFrame = the ACTUAL last frame of dive N (extracted from the rendered mp4) transition.lastFrame = the ACTUAL first frame of dive N+1 (extracted from the rendered mp4) ``` 将这两张真实的帧作为关键帧输入给 **Seedance 2**，并加上**平缓向前滑行**的 prompt，它就会自动生成中间的过渡画面。因为过渡片段*开始*于潜入片段 N 的真实最后一帧，并*结束*于潜入片段 N+1 的真实第一帧，所以**接缝在帧级别上是完全对齐的** — 引擎会播放 `dive1 → transition1 → dive2 …`，因此当滚动到一个潜入片段的结尾时，就会触发它的过渡效果，而不会出现任何可见的剪切。 ### 4. 编码以实现平滑的拖动 scrubbing - 保持原始分辨率，`crf 20`，较小的 GOP (`-g 8`)，轻微锐化，无音频，启用 faststart。 - 引擎会将每个片段作为 **Blob** 加载并对 `currentTime` 进行 scrubbing，因此即使在那些不提供 HTTP 字节范围（byte ranges）服务的静态托管平台（如 GitHub Pages）上，也能实现平滑的随机定位读取。 ### 5. 连接引擎 整个页面只是一个传递给轻量级、零依赖的原生 vanilla-JS 引擎的配置对象： ``` ``` 该引擎负责处理滚动到时间的映射、Blob 加载、懒加载预取、帧匹配的淡入淡出、固定在各个区块的文案、路线轨迹导轨、`prefers-reduced-motion` 以及移动端的强化适配。 ## 视频片段 | 部分 | 模型 | 备注 | |---|---|---| | 市场 / 烤架 / 柜台 / 汉堡潜入 | Seedance 2 Fast · 720p | 从每个场景静态图生成的 `image-to-video` | | 过渡片段 (×3) | Seedance 2 Fast · 720p | 以真实的边界帧作为关键帧；conn3 时长为 7 秒 | | 静态图 | gpt‑image‑2 | 主图 + image‑to‑image 场景 | 完成整个 720p 构建大约消耗 ~1,150 个 Kubeez 积分。 ## 构建你自己的项目 — 安装该技能 这个演示是由 **`scroll-world-video`** 技能制作的，它会针对你的主题和品牌进行调研询问，生成整个世界，并为*任何*业务接入这个完全相同的引擎。 **Claude Code**（安装插件并自动接入 Kubeez MCP）： ``` /plugin marketplace add KubeezMedia/kubeez-scroll-world-video /plugin install scroll-world-video@kubeez /scroll-world-video ``` **Codex / Cursor / 其他 agent：** 将你的 agent 指向 [`skills/scroll-world-video/SKILL.md`](skills/scroll-world-video/SKILL.md) 并连接 Kubeez MCP — 详情请参阅 [`AGENTS.md`](AGENTS.md)。 ## 在本地运行 引擎会以 Blob 的形式获取片段，因此请通过 HTTP 提供服务（而不是 `file://`）： ``` python -m http.server 8080 # 打开 http://localhost:8080 ``` _{由 [Kubeez](https://kubeez.com) 制作。所有图像和动态效果均在 Kubeez 平台上生成。}

标签：AIGC, Web动画, 多模态安全, 数据可视化, 滚动驱动动画, 自定义脚本, 视频处理