An agent skill for Claude Code and Codex that turns AI-generated motion into web animations driven by scroll, mouse, drag, touch or device orientation.
2.6K197PythonMITUpdated 16 days ago
musoyangrigor/scroll-video-website-skill
An Agent Skill that converts a video into an optimized WebP frame sequence and builds a scroll-controlled canvas website around it.
- Stars
- 57
- Forks
- 5
- Open issues
- 0
- Last commit
- 2 months ago
What is it?
Scroll Video Website is a portable AI-agent skill for turning a video into a full-viewport page where scrolling forward or backward moves through the video's frames. You invoke it with a video path, and the agent converts the video into optimized WebP frames and generates the responsive scroll-controlled page.
The generated page uses a canvas renderer with adjacent-frame blending and progressive frame loading, so playback scrubs smoothly in both directions. It preserves the existing project stack and respects reduced-motion preferences. By default the output is a minimal canvas-only experience, and you can add visual direction such as a style after the path.
The skill also includes an interactive optimize command for existing frame sequences. It measures the actual assets, trial-encodes sample frames, and reports estimated size impact for format, frame count and quality before rewriting any files. It follows the SKILL.md format and installs with npx skills add.
Key features
- 01Converts a video into an optimized WebP frame sequence.
- 02Scrubs smoothly in both directions with progressive frame loading.
- 03Renders a responsive full-viewport canvas with adjacent-frame blending.
- 04Respects reduced-motion preferences and keeps the existing project stack.
- 05Offers an interactive optimize command with file-specific size estimates.
Use cases
- Building a product landing page driven by a short demo video.
- Creating scroll-based storytelling pages from a film or motion clip.
- Prototyping scroll-scrubbed video sections in an existing frontend project.
- Reducing the size of frame sequences already generated for a scroll site.
Quick start
- 1
Install the skill
npx skills add musoyangrigor/scroll-video-website-skill --skill scroll-video-website - 2
Run the skill with a video path in your agent
$scroll-video-website ./media/product-film.mp4
Things to know
- The README does not state which tools or dependencies the skill needs to convert video to WebP frames.
- Requires an Agent Skills-compatible agent to run; it is not a standalone app.
Topics
FAQ
- What is scroll-video-website-skill?
- An Agent Skill that converts a video into an optimized WebP frame sequence and builds a scroll-controlled canvas website around it. Scroll Video Website is a portable AI-agent skill for turning a video into a full-viewport page where scrolling forward or backward moves through the video's frames. You invoke it with a video path, and the agent converts the video into optimized WebP frames and generates the responsive scroll-controlled page.
- Is scroll-video-website-skill free to use? What license does it have?
- scroll-video-website-skill is open source under the MIT license. Check the license terms before using it in commercial products.
- Is scroll-video-website-skill still maintained?
- Updated within 6 months. The last commit to scroll-video-website-skill was on Sep 4, 2026.
- What can I use scroll-video-website-skill for?
- Building a product landing page driven by a short demo video. Creating scroll-based storytelling pages from a film or motion clip. Prototyping scroll-scrubbed video sections in an existing frontend project. Reducing the size of frame sequences already generated for a scroll site.
- How do I install scroll-video-website-skill?
- Install the skill: npx skills add musoyangrigor/scroll-video-website-skill --skill scroll-video-website Run the skill with a video path in your agent: $scroll-video-website ./media/product-film.mp4
- Where can I get scroll-video-website-skill?
- The source code and installation instructions are on GitHub: https://github.com/musoyangrigor/scroll-video-website-skill
Summary generated by AI from the project's README. GitHub stats refresh daily.
Related projects
Agent Skills that make coding agents design distinctive frontends, using art direction, real photos and a browser self-check instead of generic AI landing pages.
99.8K6.8KJavaScriptMITUpdated 46 minutes ago
A curated directory of 1000+ Claude Skills and plugins for Claude Code, Claude.ai and coding agents like Codex, Cursor and Gemini CLI.
77.5K9.2KPythonNo licenseUpdated last month
Layout rules and templates that let AI agents export documents as PDF, PNG and editable PowerPoint.
12K557HTMLMITUpdated 2 days ago
An interface design skill for AI agents that explores distinct design directions, compares them side by side, and refines them against real screenshots.
1.8K98PythonMITUpdated 2 days ago
An Obsidian plugin for browsing, creating, and editing AI agent skills, commands, and agents across 17 coding tools like Claude Code and Cursor.
85476TypeScriptMITUpdated 2 months ago