Scroll Video Website is a portable AI-agent skill that turns videos into smooth, scroll-controlled canvas experiences with optimized WebP frames, progressive loading, and responsive animation.
36
stars
19
commits
Sep 4, 2026
updated
README
Scroll Video Website
Build or redesign a website around a user-provided video as a smooth, scroll-controlled full-viewport canvas frame sequence. Use for cinematic product reveals and storytelling pages where scrolling should scrub an animation; do not use for ordinary autoplay video backgrounds or unrelated scroll effects.
Turn any video into a smooth, scroll-controlled website with one Agent Skill.
Install
npx skills add musoyangrigor/scroll-video-website-skill --skill scroll-video-website
Live Demo · Install · Usage · Features
Live Demo
Example Website
The demo shows a simple product website made from a single video. The video fills the screen, and scrolling forward or backward smoothly moves through its frames.
You can create the same kind of website with:
$scroll-video-website ./media/product-demo.mp4
The skill converts the video into optimized frames and builds the responsive scroll-controlled page for you.
Usage
Give your agent the skill name followed by a video path:
$scroll-video-website ./media/product-film.mp4
Optionally add visual direction after the path:
$scroll-video-website ./media/product-film.mp4 use a dark editorial style
Optimize an existing generated frame sequence interactively:
$scroll-video-website optimize
The command takes no arguments. The agent discovers generated sequences in the current project, measures the real assets, trial-encodes representative frames, and shows separate estimates for format, frame count, quality, and other supported settings. It then shows their combined estimated impact and asks for confirmation before rewriting anything.
Features
- Converts video into an optimized WebP frame sequence.
- Scrubs smoothly in both directions with progressive frame loading.
- Renders a responsive, full-viewport canvas with adjacent-frame blending.
- Preserves the existing project stack and supports reduced-motion preferences.
- Builds a minimal canvas-only experience by default, or follows added design direction.
- Interactively optimizes existing sequences with file-specific size estimates before processing.
About
Scroll Video Website follows the portable SKILL.md Agent Skills format.
Contributors
19 commits
See what people are saying
Similar repos
Scroll Video Website is a portable AI-agent skill that turns videos into smooth, scroll-controlled canvas experiences with optimized WebP frames, progressive loading, and responsive animation.
36
stars
19
commits
Sep 4, 2026
updated
README
Scroll Video Website
Build or redesign a website around a user-provided video as a smooth, scroll-controlled full-viewport canvas frame sequence. Use for cinematic product reveals and storytelling pages where scrolling should scrub an animation; do not use for ordinary autoplay video backgrounds or unrelated scroll effects.
Turn any video into a smooth, scroll-controlled website with one Agent Skill.
Install
npx skills add musoyangrigor/scroll-video-website-skill --skill scroll-video-website
Live Demo · Install · Usage · Features
Live Demo
Example Website
The demo shows a simple product website made from a single video. The video fills the screen, and scrolling forward or backward smoothly moves through its frames.
You can create the same kind of website with:
$scroll-video-website ./media/product-demo.mp4
The skill converts the video into optimized frames and builds the responsive scroll-controlled page for you.
Usage
Give your agent the skill name followed by a video path:
$scroll-video-website ./media/product-film.mp4
Optionally add visual direction after the path:
$scroll-video-website ./media/product-film.mp4 use a dark editorial style
Optimize an existing generated frame sequence interactively:
$scroll-video-website optimize
The command takes no arguments. The agent discovers generated sequences in the current project, measures the real assets, trial-encodes representative frames, and shows separate estimates for format, frame count, quality, and other supported settings. It then shows their combined estimated impact and asks for confirmation before rewriting anything.
Features
- Converts video into an optimized WebP frame sequence.
- Scrubs smoothly in both directions with progressive frame loading.
- Renders a responsive, full-viewport canvas with adjacent-frame blending.
- Preserves the existing project stack and supports reduced-motion preferences.
- Builds a minimal canvas-only experience by default, or follows added design direction.
- Interactively optimizes existing sequences with file-specific size estimates before processing.
About
Scroll Video Website follows the portable SKILL.md Agent Skills format.
See what people are saying
Similar repos
Contributors
19 commits