01 // Escena
Video con scroll
El avance vertical de la página se traduce en tiempo del video. Tú controlas cada fotograma desplazándote.
- 3 escenas MP4 incluidas
- Carga progresiva
- Fallback visual
Experimento digital // Open template
EXP 004.5
Scroll Cinema
Una plantilla de una sola página donde el scroll dirige el video, presenta la historia y convierte cada sección en una escena.
// Un archivo, una experiencia
Diseñado para copiar, editar y publicar
No necesitas un framework ni un proceso de compilación. El contenido, los estilos y la lógica viven en index.html; los videos MP4 completan las escenas.
HTML
Tailwind
JavaScript
// Anatomía del template
Tres capas.
Una historia.
EXP 004.5 separa la experiencia en escenario visual, contenido narrativo y motor de interacción. Puedes cambiar una capa sin reconstruir las demás.
02 // Narrativa
Bloques por etapas
Cada mensaje tiene un inicio y un final dentro de la escena. Los atributos data-start y data-end deciden cuándo aparece.
- Textos superpuestos
- Entradas y salidas suaves
- Secciones modulares
03 // Interfaz
Sistema visual
Componentes cyber, rejilla, vidrio, luces y cursor personalizado forman una identidad coherente y fácil de recolorear.
- Responsive
- Variables de color
- Movimiento reducido
El principio clave
Tu scroll es
la línea de tiempo
De 0 a 1, del inicio al final
JavaScript calcula qué porcentaje de la sección recorriste, lo multiplica por la duración del video y actualiza currentTime. El resultado: navegación cinematográfica sin librerías de animación.
// Cómo funciona
El motor en cuatro pasos
La lógica es pequeña, legible y está al final de este mismo archivo. No hay dependencias ocultas.
01
Fijar
Una sección alta contiene un escenario sticky que permanece visible mientras avanzas.
02
Medir
La posición vertical se normaliza a un progreso entre 0 y 1.
03
Sincronizar
Ese progreso controla el tiempo del MP4 con una interpolación suave mediante requestAnimationFrame.
04
Narrar
Los bloques se activan en rangos específicos y construyen la historia sobre la escena.
// Tecnología usada
Ligero por diseño
Todo funciona en el navegador. Solo necesitas un hosting estático para publicarlo; el backend es opcional y depende de lo que agregues después.
HTML5
Estructura semántica, videos nativos y atributos de configuración.
Tailwind CSS
Utilidades por CDN para maquetar y adaptar sin archivos de build.
JavaScript
Scroll, carga diferida, revelados y copiado sin frameworks.
MP4 / H.264
Formato compatible y eficiente para las secuencias visuales.
Nota para producción:
el CDN de Tailwind simplifica este template. En proyectos grandes conviene instalar Tailwind y generar un CSS optimizado para reducir el peso final.
// Puntos de edición
Personaliza en tres frentes
Empieza por la identidad, continúa con la historia y termina sustituyendo las escenas.
Identidad
Marca y color
Cambia el logo textual, el título, la descripción y las variables --cyan, --pink y --yellow.
- Nombre y metadatos
- Paleta principal
- Tipografías
Narrativa
Textos y ritmo
Reemplaza títulos, párrafos y llamadas a la acción. Ajusta los rangos de cada .scroll-step para cambiar el ritmo.
data-start="0.20"data-end="0.55"- Enlaces y CTA
Media
Videos y altura
Sustituye los MP4 conservando sus nombres o edita data-src. Una sección más alta produce un scrub más lento.
slide1.mp4slide2.mp4slide3.mp4
La estructura ya está lista
Cambia la historia.
Usa EXP 004.5 para un portfolio, una campaña, el lanzamiento de un producto o cualquier relato que merezca sentirse interactivo.
// Úsalo en tu proyecto
Ruta de implementación
Una secuencia práctica para adaptar el template sin romper la sincronización.
Duplica la carpeta
Conserva index.html y los MP4 juntos. Trabaja sobre una copia para mantener un original limpio.
Define tu mensaje
Escribe primero la secuencia: apertura, explicación, prueba y llamada a la acción.
Edita el contenido
Busca “ESCENA” y los IDs de sección. Sustituye textos, links y metadatos.
Cambia los videos
Exporta MP4/H.264 optimizados para web y evita archivos innecesariamente pesados.
Prueba el ritmo
Ajusta las alturas h-[500vh] y los rangos de aparición en móvil y escritorio.
Publica
Sube toda la carpeta a GitHub Pages, Netlify, Vercel o tu hosting estático preferido.
// Quickstart
Tu primera escena
Copia esta estructura dentro de una sección cinematográfica. El motor detectará el video y los bloques automáticamente.
index.html + videos en la misma carpeta
Video recomendado: MP4 / H.264
Compatible con hosting estático
ESCENA.HTML
<section class="scrub-section h-[400vh] relative">
<div class="sticky top-0 h-screen overflow-hidden">
<video muted playsinline
class="scrub-video absolute inset-0 w-full h-full object-cover"
data-src="tu-video.mp4"></video>
<div class="scroll-step"
data-start="0.10" data-end="0.45">
<h2>Tu primer mensaje</h2>
</div>
<div class="scroll-step"
data-start="0.55" data-end="0.90">
<p>Tu segundo mensaje</p>
</div>
</div>
</section>EXP 004.5
El template es el manual
Lee los comentarios de index.html, cambia una parte a la vez y prueba después de cada ajuste.