Animated Video Scroll es una técnica para crear páginas web cinematográficas de una sola página donde el desplazamiento del usuario controla directamente la reproducción fotograma a fotograma de un video en alta definición. A medida que el visitante utiliza la rueda del ratón o desliza en su móvil, el metraje avanza o retrocede sincronizado con su ritmo de lectura y la aparición de bloques informativos.
Este patrón interactivo es el estándar distintivo en los lanzamientos de productos de Apple, Tesla, Porsche y de los mejores estudios de diseño del mundo.
Esta técnica no consiste en incrustar un reproductor de video tradicional ni en usar archivos GIF pesados. Se basa en una secuencia de imágenes WebP optimizadas y renderizadas por aceleración de hardware en un elemento <canvas> mediante WebGL o 2D Context, garantizando una respuesta instantánea a cada píxel desplazado.
1. Qué es un sitio con scroll de video y por qué utilizarlo
El video de fondo con reproducción automática presenta dos graves inconvenientes: avanza independientemente de la atención del usuario y genera un consumo excesivo de batería y datos móviles.
Un sitio interactivo basado en canvas y scroll soluciona ambos problemas:
- Control total de la atención: El usuario dicta la velocidad de exploración. Al detenerse en una especificación clave, la cámara congela el ángulo exacto.
- Respuesta inmediata sin buffering: El video se extrae previamente en fotogramas WebP independientes, eliminando la pesada decodificación de contenedores MP4 durante desplazamientos rápidos.
- Sincronización narrativa: Titulares, diagramas técnicos, métricas de telemetría y llamadas a la acción aparecen justo cuando la cámara revela el componente correspondiente.
Matriz de idoneidad del proyecto
| Sector / Producto | Por qué encaja el scroll de video | Sujeto visual principal |
|---|---|---|
| Automoción y maquinaria | Resalta la aerodinámica, ingeniería de chasis y acabados | Vuelos fluidos de cámara a lo largo de la carrocería |
| Electrónica de consumo | Muestra ensamblajes de precisión y acabados de metal/vidrio | Despieces en perspectiva explotada, planos macro |
| Arquitectura e inmobiliaria | Transmite sensación de volumen, luz y materiales | Recorridos aéreos desde la fachada hasta los interiores |
| Moda y joyería | Captura la caída de los tejidos y el brillo de la luz | Movimientos lumínicos sutiles sobre los materiales |
2. Arquitectura y estructura de archivos del sistema
El flujo de trabajo se organiza como una cadena de ingeniería modular donde cada componente desempeña una función aislada:
1. SKILL.md — Núcleo del proceso y algoritmo de capítulos
Define el ciclo de producción completo: análisis técnico con ffprobe, división en capítulos narrativos, cálculo de la altura de scroll y generación del código HTML/JS base.
2. visual-system.md — Sistema de diseño Precision Editorial
Establece estándares visuales estrictos: eliminación de clichés superficiales (brillos de neón, tarjetas de cristal translúcido y tipografía Playfair), paleta funcional «Trackline» y 5 esquemas de composición de contenido.
3. extract_frames.py — Script de extracción y optimización de fotogramas
Herramienta de consola en Python. Analiza los metadatos con ffprobe, calcula el número óptimo de fotogramas, genera flujos separados para escritorio y móvil en formato WebP y crea manifest.json.
4. evals.json — Criterios de verificación de calidad
Contiene un caso de prueba de referencia (utilizando un video de Porsche GT3 en pista) que evalúa la fluidez del LERP, el comportamiento adaptativo del canvas, la accesibilidad con teclado y el peso total de los recursos.
3. Mecánica de reproducción: Canvas, LERP y Dwell-Remap
En el núcleo de la interfaz se encuentra un elemento <canvas> fijado a pantalla completa (position: fixed). El desplazamiento se normaliza en un progreso relativo entre 0.0 y 1.0, el cual se asigna directamente al índice del fotograma activo.
1. Suavizado mediante LERP (Linear Interpolation)
Vincular el fotograma directamente a cada evento de scroll produce saltos bruscos en ratones con rueda por pasos.
Para lograr un movimiento cinematográfico, se implementa interpolación lineal: el fotograma mostrado en pantalla (currentFrame) persigue gradualmente al fotograma objetivo (targetFrame).
2. Desaceleración en capítulos (Dwell-Remap)
Para permitir que el usuario lea los títulos y descripciones sin necesidad de detener la rueda del ratón con precisión milimétrica, Dwell-Remap reduce deliberadamente la velocidad del video cerca de los puntos centrales de cada capítulo.
3. Carga progresiva de fotogramas
Para evitar parpadeos blancos en el canvas y no obligar al visitante a esperar la descarga de más de 120 fotogramas, se utiliza un sistema en dos fases:
- Prioridad crítica: Se cargan de inmediato los primeros 5 fotogramas y los fotogramas clave de cada capítulo antes de mostrar la página.
- Cola en segundo plano: El resto de fotogramas se descarga en lotes mediante
requestIdleCallback. Si el fotograma requerido aún no está disponible, el canvas muestra el más cercano ya descargado.
4. Proceso de producción paso a paso: del video al código
El desarrollo completo se estructura en siete etapas:
Paso 1. Análisis técnico mediante ffprobe
Antes de escribir código, se analizan las especificaciones del video original:
Se genera una hoja de contacto con 6 fotogramas clave para evaluar la trayectoria de la cámara, la posición del sujeto y el espacio negativo disponible para los textos.
Paso 2. Formulación del concepto de diseño
Se define una propuesta creativa precisa:
- Sujeto protagonista: Elemento central del metraje.
- Tono deseado: Precisión técnica, lujo sobrio, velocidad o minimalismo funcional.
- Combinación tipográfica: Titular rotundo acompañado de un acento monoespaciado.
- Detalle distintivo: Panel HUD de telemetría, estiramiento de tipografía variable o contador de fotogramas.
Paso 3. Extracción y optimización de fotogramas
El número de fotogramas y la altura de scroll se calculan en función de la duración del video:
| Duración del video | Número de fotogramas | Altura de scroll recomendada | Límite de peso total (WebP) |
|---|---|---|---|
| 0–5 segundos | 60–80 fotogramas | 450–550vh | 4–7 MB |
| 5–15 segundos | 90–130 fotogramas | 600–750vh | 8–12 MB |
| 15–30 segundos | 130–180 fotogramas | 750–900vh | 10–15 MB |
| 30+ segundos | 180–200 fotogramas | 900–1000vh | 12–16 MB |
Comando de extracción en Python:
Paso 4. Estructuración en capítulos
El contenido se divide en 4 a 6 secciones temáticas. Por ejemplo:
- Capítulo 1: Introducción (0–15%) — Nombre del modelo y silueta inicial.
- Capítulo 2: Aerodinámica (20–40%) — Detalle del alerón trasero y tomas de aire.
- Capítulo 3: Propulsión (45–65%) — Chasis o vano motor con telemetría.
- Capítulo 4: Llamada a la acción (75–100%) — Vista global del vehículo y botón de prueba.
Paso 5. Composición en capas y espacio negativo
El texto nunca debe solaparse con el elemento en movimiento. Según se mueva la cámara, el texto se desplaza de la columna izquierda a la derecha o se ancla en el tercio inferior.
Paso 6. Ensamblaje con la plantilla base
Se introducen los tokens de color, el manifiesto de fotogramas y los contenidos en la plantilla HTML5 optimizada.
Paso 7. Verificación y crítica
Prueba siempre el sitio mediante un servidor HTTP local (python3 -m http.server) y no abriendo archivos file:///. Las políticas CORS de los navegadores bloquean las peticiones asíncronas de imágenes WebP al abrir archivos directamente desde el disco.
5. Sistema visual: tipografía y paleta Trackline
La filosofía Precision Editorial descarta los adornos innecesarios en favor del rigor tipográfico suizo y la estética de instrumentación técnica.
Parejas tipográficas recomendadas
- Titulares: Archivo (Black, tracking ajustado
-0.03em) - Texto general: Archivo (Regular, 15px)
- Telemetría e indicadores: IBM Plex Mono (Medium, 11px, Uppercase)
- Recomendado para: Automoción, aeroespacial, alta ingeniería, relojería.
Paleta cromática «Trackline»
Inspirada en el asfalto de circuito, materiales compuestos y luces de control:
Los colores de acento (--color-signal y --color-heritage) se aplican con moderación, ocupando no más del 3% de la superficie visual para mantener la sobriedad técnica.
6. Composición en capas, movimiento y recursos de autor
Cada página se compone de tres capas visualmente independientes:
5 esquemas de distribución del contenido
| Esquema de composición | Disposición del contenido | Caso de uso idóneo |
|---|---|---|
| Masthead Statement | Titular de gran formato centrado en pantalla | Pantalla de apertura al inicio del video |
| Side Margin Annotation | Columna estrecha (3–4 cols) fijada a un lado | El objeto se desplaza por el lado opuesto |
| Split Statement | Titular a la izquierda, especificaciones a la derecha | El sujeto permanece fijo en el centro |
| Telemetry Dock | Panel horizontal bajo con datos instrumentales | Muestra de métricas de potencia, velocidad o cotas |
| Final Callout | Tarjeta de cierre con una única acción principal | Pantalla final tras concluir la reproducción |
Principios de animación en el DOM
Dado que el video en el canvas ya proporciona un movimiento intenso, las capas de texto deben animarse con contención:
- Aparición con máscara: El texto asciende desde un contenedor con
overflow: hidden. - Desplazamiento reducido: No superior a 16–24px en el eje Y.
- Tiempos: Entre 600 y 800ms con curva
cubic-bezier(0.16, 1, 0.3, 1). - Cero desenfoques: La propiedad
filter: blur()queda vetada para asegurar 60 FPS estables.
7. Antipatrones: eliminación de clichés anticuados
Muchos sitios de video caen en recursos genéricos que abaratan el diseño. Conviene descartarlos por completo:
| Cliché obsoleto | Por qué perjudica al proyecto | Alternativa profesional |
|---|---|---|
| Playfair Display + grotesca fina | Plantilla genérica de «falso lujo» | Tipografías con carácter industrial: Archivo, Roboto Flex |
| Glassmorphism (vidrio esmerilado) | Enturbia el video y sobrecarga la GPU | Tipografía nítida y contrastada sobre espacio negativo |
| Partículas y polvo flotante | Distrae la atención del producto real | Canvas despejado sin efectos decorativos artificiales |
| Gradientes de neón azul y morado | Cliché asociado a páginas cripto genéricas | Colores naturales extraídos directamente del video |
| Cursor personalizado con retraso | Introduce sensación de lag y empeora el uso | Cursor del sistema nativo con estados hover claros |
8. Rendimiento, accesibilidad (A11y) y optimización móvil
1. Limitación del Device Pixel Ratio (DPR)
En pantallas móviles con DPR 3.0, renderizar un canvas completo satura la GPU. Limita el DPR a un máximo de 2.0:
2. Pausa del bucle en pestañas ocultas
Detén el renderizado cuando el usuario cambie de pestaña:
3. Soporte para reducción de movimiento (prefers-reduced-motion)
Si el sistema operativo tiene activado prefers-reduced-motion: reduce, sustituye la secuencia continua de fotogramas por un póster estático en alta resolución o una composición fotográfica clásica.
9. Taller práctico: creación y puesta en marcha
Paso 1. Extracción de fotogramas
Ubica el archivo de video en la carpeta de trabajo y ejecuta:
Se generará el archivo frames/manifest.json:
Paso 2. Estructura de archivos del proyecto
Paso 3. Inicio del servidor local
Abre http://localhost:3000 en tu navegador y comprueba la sincronización de fotogramas con el desplazamiento.
10. Lista de comprobación final de lanzamiento
Ingeniería y rendimiento
- El peso de los fotogramas de escritorio no supera 12 MB (móvil hasta 5 MB).
- Los primeros 5 fotogramas cuentan con precarga prioritaria (
preload). - El DPR del canvas está limitado a
2.0. - El bucle
requestAnimationFramese detiene cuando la pestaña está en segundo plano.
Experiencia de usuario y accesibilidad
- La interpolación LERP ofrece una transición continua sin sacudidas.
- Dwell-Remap permite leer con comodidad el texto de cada capítulo.
- Existe alternativa estática para
prefers-reduced-motion. - Las zonas de interacción táctil superan las dimensiones mínimas de 44×44px.
Estética y dirección de arte
- Se emplea una combinación tipográfica con carácter industrial.
- La disposición del texto respeta el espacio del sujeto en movimiento.
- Los colores de la interfaz se derivan de la paleta real del video.
- La página finaliza con una llamada a la acción (CTA) rotunda y clara.