{"id":"25137d53-b3c4-4606-9ca8-2414301bec28","slug":"scroll-web","kind":"skill","name":"scroll-web","summary":"Codex Skill for building scroll-controlled brand video webpages.","owner":"DannyZZ2","repoUrl":"https://github.com/DannyZZ2/scroll-web","license":"MIT","licenseTier":"permissive","trust":"community","stars":5,"match":null,"fewStars":false,"format":"skill","createdAt":"2026-07-20T10:04:58.000Z","addedAt":"2026-10-21T23:31:05.389Z","logoUrl":"https://avatars.githubusercontent.com/u/264982954?v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["design-media"],"tags":[],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-26T20:40:38.934Z","sample":false,"url":"https://conduits.dev/tools/scroll-web","language":"JavaScript","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# Scroll Web / 滚动视频网页\n\n`scroll-web` is a Codex Skill for turning a first-party brand website, approved brand kit, product story, or value chain into a scroll-controlled video webpage.\n\n`scroll-web` 是一个 Codex Skill，用于把品牌官网、已确认的品牌资料、产品故事或价值链制作成由滚动位置控制的视频网页。\n\n## What it builds / 最终产物\n\nThe default production chain contains three asset groups:\n\n默认制作链由三类素材组成：\n\n1. Five 16:9 visual guides generated with Codex ImageGen. / 使用 Codex ImageGen 生成 5 张 16:9 场景视觉图。\n2. Five scene videos generated with Dreamina `image2video`. / 使用即梦 `image2video` 生成 5 段场景视频。\n3. Four adjacent connector videos generated with Dreamina `frames2video`. / 使用即梦 `frames2video` 生成 4 段相邻场景首尾帧转场视频。\n\nThe final webpage scrubs nine short-GOP MP4 clips in this order:\n\n最终网页按以下顺序滚动控制 9 段短 GOP MP4：\n\n```text\nscene-01 → connector-01 → scene-02 → connector-02 → scene-03\n→ connector-03 → scene-04 → connector-04 → scene-05\n```\n\nThe five still images are generation guides only. Final playback uses rendered scene videos, connector videos, and posters extracted from the encoded scene videos.\n\n五张场景图仅用于引导视频生成，不进入最终播放时间线；网页使用场景成片、转场成片，以及从编码后场景视频提取的海报帧。\n\n## Requirements / 依赖\n\n- Codex with ImageGen access / 可使用 ImageGen 的 Codex\n- Dreamina CLI command `dreamina` / 即梦 CLI 命令 `dreamina`\n- FFmpeg and FFprobe / FFmpeg 与 FFprobe\n- Git and Node.js for repository preflight / 用于仓库预检的 Git 与 Node.js\n- A modern desktop or mobile browser / 现代桌面或移动浏览器\n\nVerify the local tools before any paid generation job:\n\n提交任何付费生成任务前，先检查本地工具：\n\n```bash\ndreamina -h\ndreamina image2video -h\ndreamina frames2video -h\nffmpeg -version\nffprobe -version\n```\n\nDreamina generation consumes credits. The Skill requires an explicit job plan and user approval before submission.\n\n即梦生成会消耗积分；本 Skill 要求先列出任务数量和重试预算，并在提交前获得用户明确批准。\n\n## Install / 安装\n\nAsk Codex to install the Skill from this repository:\n\n让 Codex 从本仓库安装 Skill：\n\n```text\nInstall the scroll-web skill from https://github.com/DannyZZ2/scroll-web\n```\n\nReview the repository before installation and restart Codex if the installer requests it.\n\n安装前请先审查仓库内容；如果安装器提示重启 Codex，请按提示操作。\n\n## Quick start / 快速使用\n\nProvide a first-party brand URL or an approved brand kit:\n\n提供品牌第一方官网或已确认的品牌资料：\n\n```text\nUse $scroll-web to turn https://brand.example into a five-scene,\nscroll-controlled brand video webpage. Start by organizing the brand facts\nand ask me to approve them before generating paid video jobs.\n```\n\n```text\n使用 $scroll-web，把 https://brand.example 整理成五幕滚动控制的品牌视频网页。\n先整理品牌事实并让我确认，再提交任何付费视频任务。\n```\n\nThe full production commands, frame invariants, encoding settings, and publishing checklist are in [`references/pipeline.md`](references/pipeline.md). Reusable prompt contracts are in [`references/prompts.md`](references/prompts.md).\n\n完整制作命令、首尾帧规则、编码设置和发布检查清单见 [`references/pipeline.md`](references/pipeline.md)；可复用提示词契约见 [`references/prompts.md`](references/prompts.md)。\n\n## Repository contents / 仓库内容\n\n```text\nscroll-web/\n├── README.md                    # GitHub overview / GitHub 项目说明\n├── SKILL.md                     # Codex workflow / Codex 工作流\n├── LICENSE\n├── agents/openai.yaml           # Skill UI metadata / Skill 界面元数据\n├── assets/index-template.html   # Portable page shell / 可移植网页模板\n├── assets/scrub-engine.js       # Scroll-video engine / 滚动视频引擎\n├── references/pipeline.md       # Production pipeline / 制作流水线\n├── references/prompts.md        # Prompt contracts / 提示词契约\n└── scripts/preflight.sh         # Privacy and scope checks / 隐私与范围预检\n```\n\nThis repository contains the reusable Skill only. Brand research captures, logos, generated images, videos, task responses, logs, and final webpages belong in a separate project workspace.\n\n本仓库只包含可复用 Skill。品牌调研抓取、Logo、生成图片、视频、任务响应、日志和最终网页必须保存在独立项目工作区。\n\n## Security and preflight / 安全与预检\n\nNever commit API keys, tokens, cookies, passwords, authorization headers, account data, task or submit IDs, `.env` files, absolute user paths, browser data, logs, caches, media, brand assets, or generated outputs.\n\n禁止提交 API Key、Token、Cookie、密码、认证头、账号数据、任务或提交 ID、`.env`、用户绝对路径、浏览器数据、日志、缓存、媒体、品牌资产或生成结果。\n\nRun the repository preflight before every publish:\n\n每次发布前运行：\n\n```bash\n./scripts/preflight.sh\n```\n\nThe check requires the repository to contain exactly the nine approved files listed above and validates the JavaScript syntax and common privacy risks.\n\n预检要求仓库恰好包含上方九个获准文件，并检查 JavaScript 语法和常见隐私风险。\n\n## License / 许可证\n\nReleased under the [MIT License](LICENSE). / 本项目采用 [MIT License](LICENSE)。\n"}