Scroll Video Website Skill：一句话把产品视频变成滚动操控的交互网站

把一段产品视频扔给 AI Agent，几分钟后，一个滚动驱动、帧级同步的交互网站就此生成——这不是概念演示，而是 scroll-video-website-skill 正在实现的事情。这个 Skill 将视频转化为 WebP 帧序列，再以全视口 Canvas 渲染，让用户在滑动页面时真正”操控”视频的每一帧，方向可进可退，像操作胶片一样。项目上周（2026-08 第四周）出现在 skilld.dev Trending Agent Skills 列表，获得了 12 个赞和可观的社区关注。

功能与原则

scroll-video-website-skill 的核心能力，是将用户提供的视频文件转换为”滚动可操控的网站”。它的设计逻辑围绕三个原则：

• 视频优先：不是把视频当背景素材，而是将其作为页面的核心叙事载体
• 保留现有技术栈：生成的网页是纯静态 HTML + JS，不依赖任何框架，插入现有项目零冲突
• 交互精确控制：帧级 scrubbing（双向），而非传统视频的播放/暂停二元控制

认可度

• GitHub Star：26（截至 2026-08-29），属新晋增长期项目
• 社区热度：上线约一周即进入 skilld.dev Trending Agent Skills 列表，Twitter/X 上获得 12 个点赞
• 平台收录：已被 OpenAgentSkill、tool.lu 等 Skill 索引平台收录并打上”Reviewed”标签
• 定位：不是通用工具，而是面向创意/产品展示的垂直场景

链接

GitHub：https://github.com/musoyangrigor/scroll-video-website-skill

原作者

GitHub 用户 @musoyangrigor，专注于 Agent Skills 的创意类工具方向，已在 skilld.dev 等平台发布多个 Skills。

介绍

这个 Skill 的灵感来源于 Apple 产品页常见的”滚动驱动视频”效果——用户滚动页面时，视频内容随着滚动进度实时呈现，不同于普通视频的背景播放或自动播放，它是一种主动的、可逆的交互体验。

使用时，用户只需将视频路径传给 Agent：

$scroll-video-website ./media/product-demo.mp4

Skill 会自动完成：提取视频帧 → 转换为优化 WebP 序列 → 构建响应式全视口 Canvas 页面。每帧按序加载，支持双向滚动时的渐进式缓冲，页面滑动到哪里，视频就”演”到哪里。

如果已有生成的帧序列，还可以用 $scroll-video-website optimize 进行交互式优化——Skill 会分析现有文件的实际大小、帧数和画质，给出具体影响估算，用户确认后再执行重编码，避免误操作覆盖大量文件。

设计方向也可以通过自然语言指定，例如 $scroll-video-website ./media/product-film.mp4 use a dark editorial style，Skill 会据此调整输出风格。

特点

• 帧级双向 scrubbing：滚动前进后退均可精确控制视频位置，非传统播放模式
• WebP 帧序列优化：将视频转为压缩 WebP 序列，控制文件体积
• 渐进式帧加载：不需要等待全量下载，按需加载相邻帧，保证滚动流畅
• 响应式全视口 Canvas：适配不同屏幕尺寸，支持 reduced-motion 无障碍偏好
• 零框架依赖：输出为纯 HTML + JS，保留项目现有技术栈，插入成本极低

使用方法

安装：

npx skills add musoyangrigor/scroll-video-website-skill --skill scroll-video-website

基础调用（在 Claude Code / Codex / Gemini CLI 中）：

$scroll-video-website ./media/product-demo.mp4

指定设计风格：

$scroll-video-website ./media/product-demo.mp4 use a dark editorial style

优化已有帧序列：

$scroll-video-website optimize

Skill 会在交互式确认后展示文件大小、帧数、画质影响量，再执行重写。

使用场景与人群

适用场景：

• 产品发布页面（cinematic product reveals）
• 品牌故事/叙事型着陆页（scrollytelling）
• 电影感强的作品集展示
• 电商产品细节展示
• 任何需要”视频即内容”的单页网站

目标用户：

• 前端开发者 / 设计师，需要快速为产品团队生成高交互展示页
• AI 开发者 / Prompt 工程师，想把视频内容快速转化为可分享的网页原型
• 创意机构，需要在提案阶段快速呈现”滚动视频网站”效果

输入与输出案例

案例 1：产品视频转着陆页

• 输入：$scroll-video-website ./product-launch.mp4 use a dark editorial style
• 输出：一个全屏 Canvas 网页，滚动产品视频的每一帧，支持双向 scrubbing，视觉风格为深色编辑风，可直接部署到 Netlify/Vercel

案例 2：优化现有帧序列

• 输入：$scroll-video-website optimize
• 输出：Skill 扫描当前项目中的帧序列文件，给出”格式建议：WebP / 帧数：120 / 预估大小：+15MB”等量化信息，确认后重写，节省调试时间

GitHub: https://github.com/musoyangrigor/scroll-video-website-skill