scroll-stop-builder

Map video playback to scroll position for scroll-driven websites.

1|Updated Mar 21, 2026

Search Tags:#video #animation #canvas #ffmpeg #responsive-design #scroll #frame-extraction

Ready to run

npx skills add https://github.com/spuneiartur/claude-agent-specs --skill scroll-stop-builder

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: scroll-stop-builder
Source: https://github.com/spuneiartur/claude-agent-specs/tree/main/next-js/skills/skills/scroll-stop-builder
Command: npx skills add https://github.com/spuneiartur/claude-agent-specs --skill scroll-stop-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Turning a video into a scroll-driven, production-ready website that responds to user scroll, enabling cinematic interactions without hand-coding frame-by-frame.

Core Features & Use Cases

Frame extraction from video assets (FFmpeg) for frame-accurate playback on a canvas.
Canvas-based rendering with responsive, scroll-synced framing for desktop and mobile.
Use Case: marketing/product pages that showcase products with Apple-style scroll stop effects, portfolios, and case studies.

Quick Start

Provide a video file and any brand preferences, and I will generate a production-ready scroll-driven website controlled by scrolling.

Frequently Asked Questions about scroll-stop-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I turn a video into a scroll-driven website?▼

A scroll-driven website maps video playback directly to the user's scroll position. This approach uses frame extraction and canvas rendering to produce cinematic, scroll-reactive interactions without hand-coding frame-by-frame animations.

How does scroll-synced video animation work on a canvas?▼

Scroll-synced canvas animation works by extracting individual video frames and preloading them. As the user scrolls, the canvas renders the specific frame matching the current scroll position, creating a smooth playback effect tied to user input.

Do I need FFmpeg to build a scroll-driven video experience?▼

Yes, FFmpeg is required for frame extraction from video assets. Extracting frames with FFmpeg allows the scroll-driven website to achieve frame-accurate playback on a canvas, ensuring precise control over the animation as the user scrolls.

Can I use scroll-driven video for responsive design and mobile?▼

Yes, scroll-driven video supports responsive design and mobile. The canvas-based rendering includes responsive, scroll-synced framing to ensure the cinematic experience adapts correctly across both desktop and mobile devices.

What is the best way to create Apple-style scroll stop effects for a product page?▼

Creating Apple-style scroll stop effects is best achieved by mapping video playback to scroll position. This technique is ideal for marketing and product pages, using frame extraction and canvas rendering to showcase products with cinematic interactions.

Are there accessibility considerations when building scroll-synced canvas animations?▼

Yes, building scroll-synced canvas animations requires robust accessibility considerations. A production-ready scroll-driven website must include a comprehensive design system that accounts for responsive behaviors and accessibility to ensure usability for all visitors.