scroll-world 是一个面向 Claude Code 的 Skill/插件，用于生成沉浸式“滚动驱动”的品牌/行业落地页：用户滚动页面时，镜头像飞行一样穿过多个由 AI 生成的等距微缩场景，并通过无剪切的连接片段实现连续转场。它主要依赖 Higgsfield 生成图像与视频资产，内置提示词模板、生成流水线、FFmpeg 编码步骤以及一个可移植的 vanilla JavaScript 滚动播放引擎，可用于 HTML、Next.js、Vue 或其他前端项目。
适用领域
AI 生成式设计 / 前端交互动画 / 品牌营销落地页 / 视频驱动网页体验 / Claude Code 插件/Skill / 滚动叙事页面 / 创意技术 / Creative Coding
配置难度
中高。安装本身不复杂，但要产出稳定的商业级效果，需要理解 Claude Code Skill、Higgsfield 生成流程、FFmpeg 编码、视频抽帧、滚动播放引擎和前端部署优化。适合有一定前端和工具链经验的开发者。
商业价值
商业价值较高，尤其适合品牌官网、Campaign 页面、产品发布页和创意营销项目。它可以显著降低制作高端滚动叙事页面的原型和资产生成成本，让小团队也能快速产出类似大型品牌站的沉浸式体验。对于服务客户的设计开发工作室，它可作为高溢价交互页面的生产工具；但实际交付仍需控制 AI 生成成本、视觉一致性、页面性能和版权合规。
01
技术亮点
- 核心亮点是无缝场景连接：连接视频使用相邻片段的实际渲染帧作为起止图，而不是原始静态图，从而避免转场跳变
- 提供完整的 Claude Code Skill 工作流：需求访谈、提示词生成、Higgsfield 资产生成、抽帧、连接片段生成、编码与网页接入
- 框架无关：滚动引擎是 vanilla JavaScript，可嵌入普通 HTML、Next.js、Vue 或其他前端栈
- 内置可移植 scrub engine，支持按滚动位置控制视频时间轴，适合做连续飞行式页面
- 考虑了实际生产中的细节，例如 blob URL 加载、HTTP byte-range 不可用时的兼容、GOP/编码设置、懒加载与转场交叉淡化
- 适合快速生成高视觉冲击力的 AI 视觉营销页面
- MIT 许可证，商业项目中使用较灵活
02
目标用户
- 需要制作高端品牌官网或营销落地页的前端开发者
- 使用 Claude Code 进行自动化开发的开发者
- 创意技术团队、数字营销团队、设计工程师
- 希望快速生成苹果式滚动产品页体验的创业团队
- 为客户制作定制化交互网站的自由职业者或工作室
- 熟悉 FFmpeg、AI 视频生成和前端集成流程的技术人员
03
配置要求
- 需要 Claude Code 环境支持插件或本地 skills
- 需要 Higgsfield CLI，并完成认证登录
- 需要 Higgsfield 生成积分，因为每个项目会消耗图像和视频生成额度
- 需要安装 ffmpeg / ffprobe 用于抽帧、编码、视频处理
- 可选依赖：Python 3 与 Pillow，用于 transparent-scene knockout 背景处理
- 需要为项目准备行业主题、品牌信息、艺术风格、场景顺序等输入
- 生成的 mp4/webp 等资产不随仓库提供，需要按项目单独生成
- 若部署到静态站点，需要正确配置视频资源路径、加载策略和浏览器兼容性
04
适用场景
- 为物流、制造、金融、教育、医疗、SaaS 等行业生成沉浸式品牌落地页
- 制作类似 Apple 产品页的 scroll-scrubbed 交互视频体验
- 通过 AI 自动生成多个品牌场景、镜头飞行动画和场景连接片段
- 将生成的视频资产接入纯 HTML、Next.js、Vue 或 Python 静态服务页面
- 为客户提案快速生成高保真视觉原型
- 制作展会、产品发布、Campaign 活动页面的视觉主体验
05
部署与配置
- 推荐方式：在 Claude Code 中添加插件市场源：/plugin marketplace add oso95/scroll-world
- 安装插件：/plugin install scroll-world@scroll-world
- 安装完成后，可直接向 Claude Code 请求生成 scroll-through world landing page，或调用 /scroll-world
- 手动方式：克隆仓库：git clone https://github.com/oso95/scroll-world
- 将 skill 复制到 Claude Code skills 目录：cp -R scroll-world/plugins/scroll-world/skills/scroll-world ~/.claude/skills/
- 确保已安装并登录 Higgsfield CLI：higgsfield auth login
- 确保本机可用 ffmpeg 和 ffprobe
- 如需透明背景/场景抠图，安装 Python 3 与 Pillow
06
风险与注意事项
- 强依赖 Higgsfield，若服务不可用、API/CLI 变更或生成质量不稳定，会影响整个流程
- 资产生成需要 Higgsfield credits，成本会随场景数量增加，README 中说明大约需要 N 次图像生成和 2N-1 次视频生成
- 生成视频和连接片段耗时较长，不适合对实时交付有极高要求的场景
- AI 生成内容可能存在品牌一致性、细节错误、版权或合规风险，需要人工审核
- 最终网页性能取决于视频体积、编码参数、懒加载策略和设备性能，移动端可能有卡顿或加载慢的问题
- 仓库本身不是完整成品网站，而是 Claude Code Skill、模板和流水线；开发者仍需理解和集成生成结果
- 中文品牌、中文字体、中文文案在 AI 图像/视频生成中可能需要额外处理，避免乱码或视觉不一致
- 对于不熟悉 FFmpeg、视频编码和前端媒体加载的开发者，上手会有一定门槛
2026-07-13
第3名
新收录 · github_search
2026-07-12
第5名
新收录 · github_search
2026-07-11
第13名
新收录 · github_search
2026-07-10
第26名
新收录 · github_search
