GitHub - musoyangrigor/scroll-video-website-skill: 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. · GitHub
/" data-turbo-transient="true" />
Skip to content
Search/
Sign in<br>Sign upAppearance settings
You signed in with another tab or window. Reload to refresh your session.<br>You signed out in another tab or window. Reload to refresh your session.<br>You switched accounts on another tab or window. Reload to refresh your session.
Dismiss alert
{{ message }}
musoyangrigor
scroll-video-website-skill
Public
Notifications<br>You must be signed in to change notification settings
Fork
Star
main
BranchesTags
Go to file
CodeOpen more actions menu
Latest commit
History<br>14 Commits<br>14 Commits
Folders and files<br>NameNameLast commit message<br>Last commit date<br>assets
assets
scroll-video-website
scroll-video-website
LICENSE
LICENSE
README.md
README.md
View all files
Repository files navigation
Scroll Video Website
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
View the full demo GIF
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.
MIT licensed. See LICENSE.
About<br>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.<br>Topics<br>agent-skillsai-agentscanvasclaude-codecodexdeveloper-toolsfrontendscroll-animationscroll-driven-animationvideoweb-animationweb-development<br>Resources<br>Readme<br>MIT license<br>Activity<br>Stars<br>6 stars<br>Watchers<br>1 watching<br>Forks<br>2 forks<br>Report repository
Releases
Packages
Contributors
You can’t perform that action at this time.