scroll-cinema

What problem does it solve?

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.

Core Features & Use Cases

• Frame extraction & interpolation: FFmpeg analysis with optional motion interpolation for short clips to reach a smooth target frame count.
• Canvas-first playback: Preloads image sequences and renders frames to a canvas for pixel-perfect, instant frame switching.
• Scroll choreography: Integrates Lenis smooth scrolling with GSAP ScrollTrigger to map scroll progress to frame indices and animate fixed overlay sections.
• Production scaffold: Opinionated HTML/CSS/JS patterns, quality checklist, and a loader/preload strategy for reliable delivery.
• Use Cases: product landing pages from demo videos, fashion/editorial showcases, brand hero experiences, and portfolio presentations that require cinematic pacing.

Quick Start

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.