Apple-Style Scroll Video Websites from Video

Where this fits

A developer hands an agent a product demo video and asks for an “Apple-style landing page.” Without a skill, the agent guesses with CSS transforms and autoplay video; with scroll-video-website, it extracts frames, generates an optimized WebP sequence, and wires a fixed canvas to scroll progress. This skill solves the specific workflow of scroll scrubbing instead of leaving the agent to improvise a fragile animation pipeline.

Why agents benefit

• The skill defines the expected output: frame sequence, fixed canvas, scroll handler, and progressive loading, so the agent does not have to design the architecture from scratch.
• It knows how to optimize WebP frames and create progressive loading, preventing a bloated page with hundreds of heavy images.
• It can turn a user-provided video into a responsive full-page animation, including viewport-sized canvas behavior.
• It includes a frame-asset optimization path, so the agent can re-encode an existing sequence instead of regenerating frames from source video.
• It is clearly scoped: it handles scroll-controlled video, not autoplay video backgrounds, which helps the agent reject unrelated requests.

Practical scenarios

Cinematic product reveal

The user has a 10-second phone video and wants a product reveal on scroll. The agent uses the skill to generate a WebP frame sequence, sets up canvas scrubbing, and enables progressive loading. The result is a scroll-driven product story that feels like an Apple launch page.

Scrollytelling with footage

A narrative film clip drives story sections. The agent maps the frames to a scroll timeline, keeps the canvas fixed behind text, and ensures the animation stays responsive across screen sizes.

Optimizing an existing animation

A previous project produced a bloated PNG frame sequence. The agent uses the skill’s optimization path to convert frames to WebP, adjust quality, and update the HTML, without regenerating frames or re-shooting footage.

Add it to your agent workflow

Install the skill with:

npx skills add musoyangrigor/scroll-video-website-skill --skill scroll-video-website

Then prompt your agent: “Use scroll-video-website on assets/product.mp4; build a full-page scroll scrub page with WebP frames and progressive loading.” The agent will process the video and output static site files ready to open or deploy.

Compare before adopting

Before adding it to your workflow, compare the skill against your actual needs. Does the project require scroll-controlled video, or would a simple <video> background work? Evaluate maintenance signals: recent commits, open issues, and star trend. Also compare alternatives like GSAP ScrollTrigger or a manually configured ffmpeg and Canvas pipeline. Finally, confirm workflow fit: if your agent already has a video encoding pipeline, this skill may overlap with existing tooling.

Why it is worth tracking

This skill focuses on a task that normally requires manual ffmpeg, frame optimization, and Canvas wiring: Apple-style scroll-video websites. Its README clearly defines when to use it and when not to, which is a strong quality signal for an agent skill. With 26 stars as a starting point, it is still early, but it is worth evaluating for landing page and product reveal work. For a fuller listing, see the OpenAgentSkill page at https://www.openagentskill.com/skills/musoyangrigor-scroll-video-website-skill-scroll-video-website. Track it if you build cinematic web experiences with agents.