Convert a video into a frame-accurate scroll-driven website using FFmpeg, Lenis, and GSAP ScrollTrigger.
npx skills add https://github.com/BEIRUX/agent-skills --skill scroll-cinema
Please help me install this Agent Skill. Skill: scroll-cinema Source: https://github.com/BEIRUX/agent-skills/tree/main/scroll-cinema Command: npx skills add https://github.com/BEIRUX/agent-skills --skill scroll-cinema
Many marketing and product teams have a video but lack a pixel-accurate, scroll-driven web experience that scrubs the footage smoothly and synchronizes layered section animations; native video playback is asynchronous and cannot guarantee frame-accurate scrubbing. Scroll-cinema converts a source video into a preloaded image sequence and a canvas-based renderer so the site can drive frame playback deterministically and choreograph premium section animations.
Use the scroll-cinema skill to extract frames from product-demo.mp4 into a frames/ folder and build a canvas-based scroll site with the provided scaffold.
High-intent search queries and answers about installing and using this skill.
FFmpeg analyzes the source video and extracts a preloaded image sequence, while GSAP ScrollTrigger maps scroll progress to frame indices on a canvas to create a frame-accurate, scroll-driven website.
Scroll-driven video scrubbing uses an image sequence because native video playback is asynchronous and cannot guarantee frame-accurate scrubbing. Rendering preloaded frames to a canvas ensures pixel-perfect, instant frame switching for deterministic playback.
Yes, FFmpeg and ffprobe are required dependencies. The skill uses FFmpeg for video analysis, optional motion interpolation, and frame extraction to generate the image sequence required for the canvas renderer.
Yes, the skill integrates Lenis smooth scrolling with GSAP ScrollTrigger to map scroll progress to frame indices and animate fixed overlay sections, ensuring choreographed transitions synchronized with the canvas frame playback.
The best way is using an opinionated production scaffold that extracts frames into an image sequence and renders them on a canvas, using Lenis and GSAP ScrollTrigger to choreograph scroll progress with fixed overlay section animations.
Canvas rendering requires preloading an entire extracted image sequence, which increases initial load times and memory usage, making it less suitable for very long videos without a strict preload strategy and quality checklist.
gupsammyConvert, trim, resize, rotate, flip, and extract frames from videos using FFmpeg and FFprobe.
aymenhamoudiiAudit web pages with Lighthouse and recommend prioritized performance fixes.
wyrmspireConvert video files into scroll-driven animated websites with FFmpeg, GSAP, and Lenis.
Eng0AICreate a gaming landing page with GSAP scroll animations and 3D hover effects.
