What are the prerequisites for using this skill?

You need FFmpeg installed on your machine and a short video file (3-10 seconds) that ideally starts with a white background for the best visual transition.

Is the generated website mobile-friendly?

Absolutely. The skill includes specific mobile optimizations like compact annotation cards, adjusted scroll heights, and simplified layouts for touch devices.

Can I use my own brand colors and logos?

Yes, the skill includes a mandatory interview step to gather your brand name, logo, accent colors, and background preferences to build a tailored site.

How does the scroll animation work technically?

It uses FFmpeg to extract video frames as high-quality JPEGs, which are then preloaded and drawn to a canvas element based on the user's scroll position for frame-perfect, lag-free performance.

Scroll-Stop Animation Builder

Name: Scroll-Stop Animation Builder
Author: spuneiartur

byspuneiartur

0•

デザインツール

Transforms video files into premium, high-performance scroll-driven animation websites using frame-perfect canvas rendering.

The Scroll-Stop Builder skill automates the creation of high-end 'Apple-style' landing pages by converting video animations into interactive, scrollable experiences. It handles the full technical workflow: extracting frames via FFmpeg, preloading images for performance, and mapping scroll positions to a canvas-based renderer. The skill includes a customized design system with glass-morphism cards, snap-stop annotations, and animated starscape backgrounds, making it ideal for product launches and luxury digital showcases where buttery-smooth performance is critical.

主な機能

01Frame-perfect canvas rendering for smooth scroll-driven playback

02Snap-stop annotation cards for guided storytelling

03Animated count-up stats and scroll-to-pill navbar transforms

040 GitHub stars

05Fully responsive design with specific mobile UI adaptations

06Automatic frame extraction and optimization via FFmpeg

ユースケース

01Building cinematic product landing pages from 3D assembly animations

02Creating interactive digital brochures with 'Apple-style' scrolling

03Developing high-performance portfolios featuring product deconstructions

主な機能

01Frame-perfect canvas rendering for smooth scroll-driven playback

02Snap-stop annotation cards for guided storytelling

03Animated count-up stats and scroll-to-pill navbar transforms

040 GitHub stars

05Fully responsive design with specific mobile UI adaptations

06Automatic frame extraction and optimization via FFmpeg

ユースケース

01Building cinematic product landing pages from 3D assembly animations

02Creating interactive digital brochures with 'Apple-style' scrolling

03Developing high-performance portfolios featuring product deconstructions