npx skills add musoyangrigor/scroll-video-website-skill --skill scroll-video-website
Live Demo · Install · Usage · Features
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.
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.
- Converts video into an optimized WebP frame sequence.
- Scrubs smoothly in both directions with progressive frame .
- 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.
MIT licensed. See LICENSE.