scrollfilmlisted

# ScrollFilm — Landings con video controlado por scroll ScrollFilm es el efecto donde **el scroll controla la línea de tiempo de un video**: al hacer scroll hacia abajo, un video a pantalla completa avanza fotograma a fotograma; al subir, retrocede. Apple lo popularizó en sus páginas de producto (iPhone, MacBook Pro). El término técnico es *scroll scrubbing* o *scroll-driven video*. Tu trabajo con esta skill es generar un ScrollFilm **completo y de calidad de producción** — no una demo de juguete. El patrón completo tiene ocho piezas, todas trabajando juntas. Constrúyelas todas salvo que el usuario pida explícitamente solo el efecto base. ## Anatomía de un ScrollFilm completo Estas ocho piezas son las que hacen que se sienta premium en lugar de tosco. Cada una existe por una razón: 1. **Contenedor de scroll** — un elemento alto (p. ej. `height: 500vh`) que le da a la página espacio para hacer scroll. Cuanto más alto, más lento y suave es el scrub. Esta es la perilla más importante para el "feel": demasiado corto y el video pasa volando, demasiado alto y se arrastra. 2. **Escenario sticky** — un wrapper `position: sticky; top: 0; height: 100vh` que fija el video al viewport mientras el contenedor alto pasa por detrás. Es lo que mantiene el video en pantalla. 3. **Motor de scrubbing** — mapea el progreso del scroll (0→1) sobre el video. O bien `video.currentTime = progress * duration` (técnica de video) o dibujando el fotograma correspondiente en un `<canvas