Sandbox
Sign in
@musoyangrigor/scroll-video-website-skill
Skills#Claude Code#Codex#Any agent#Frontend#Coding#Design

Agent skill for scroll-controlled video websites

This skill turns a source video into a responsive website that scrubs through frames as you scroll. It handles WebP frame optimization, progressive loading, canvas rendering, and optional visual direction while keeping the existing project stack in place.

36 stars•5 forks•Updated 13d ago
Who it's for

Builders who want an agent to create scroll-driven video websites from a single video file.

What it delivers

You can turn a video into a polished scroll-controlled page without assembling the frame and animation workflow yourself.

What it does

Video to WebP frames

Converts a video into an optimized WebP frame sequence.

Scroll scrubbing

Lets the page move forward and backward through frames as you scroll.

Progressive loading

Loads frames in a way that keeps playback smooth while you move through the page.

Responsive canvas rendering

Uses a full-viewport canvas with adjacent-frame blending for the experience.

Reduced-motion support

Preserves the existing project stack and respects reduced-motion preferences.

Interactive optimization

Finds existing generated sequences, estimates size impact, and asks before rewriting files.

How to get it

  1. 1Run
    npx skills add musoyangrigor/scroll-video-website-skill --skill scroll-video-website
  2. 2Give your agent the skill name followed by a video path
    $scroll-video-website ./media/product-film.mp4
  3. 3Optionally add visual direction after the path
    $scroll-video-website ./media/product-film.mp4 use a dark editorial style
  4. 4Optimize an existing generated frame sequence interactively
    $scroll-video-website optimize

README

Scroll Video Website

Turn any video into a smooth, scroll-controlled website with one Agent Skill.

Scroll Video Website demo

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.

About

Scroll Video Website follows the portable SKILL.md Agent Skills format.

Files in the repo

Repository payload•4 top-level entries
  • assets
  • scroll-video-website
  • LICENSE
  • README.md

Discussion (0)

Ask about usage, or say what you built with it

Sign in to join the discussion.

No comments yet. Be the first to say what this is good for.

More skills

obra/
superpowers
obra/superpowersSkills

An agentic skills framework & software development methodology that works.

285k
1 add
Graphify-Labs/graphifySkills

Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local deterministic AST parsing, every edge explained, no vector store.

117k
1 add
Vincentwei1021/
anything2explainer
Vincentwei1021/anything2explainerSkills

Topic in, narrated explainer video out. A Claude Code / Codex skill that turns any topic into a black-canvas motion-graphics explainer video with TTS voiceover, subtitles and a chapter progress bar. Chinese or English; every frame drawn in code with Remotion.

666
career-ops-hq/career-opsSkills

Open-source AI job search: scan job portals, evaluate listings into a structured A-H report with a global 1-5 score, tailor your CV, track applications — runs locally in your AI coding CLI (Claude Code, Codex, OpenCode, Antigravity…)

71k