hyperframes-commercial-video

Vídeo Comercial de HyperFrames

Usa esta habilidad después de inspeccionar el sitio con mobile-dom-fidelity.

Estructura del Vídeo

1. Introducción con un titular breve.
2. Desplazamiento o entrada al carrusel.
3. Destacado principal del producto.
4. Clic simulado en el producto.
5. Beneficios principales.
6. Precio.
7. Opciones del usuario.
8. Carrito o pago.
9. CTA o confirmación final.

Recorrido Interactivo

El vídeo debe sentirse como una sesión de navegación real, no como una secuencia de diapositivas. Modela cada acción como causa y efecto:

• el desplazamiento revela la sección;
• el carrusel se mueve entre productos;
• la tarjeta principal vuelve al centro;
• el cursor hace clic en la tarjeta;
• la página del producto entra;
• los beneficios aparecen;
• el precio y el CTA reciben foco;
• el clic lleva al carrito o al pago;
• el final muestra la conclusión o aprobación.

Reglas de Composición

• Formato vertical: 1080×1920.
• Usa texto real extraído del DOM.
• Usa recursos locales o URLs permitidas.
• Registra las líneas de tiempo de GSAP pausadas en window.__timelines.
• Evita solicitudes en tiempo de render.
• Evita Date.now() y Math.random() no deterministas.
• Cada clic animado debe alcanzar un componente visible.

Patrones de Animación

• Títulos: escritura suave, sin velocidad agresiva.
• Tarjetas: entrada con y, opacity y ligero scale.
• Carrusel: movimiento horizontal con una pausa en la tarjeta principal.
• Clic: cursor, ondulación, microzoom y sombra de foco.
• Cambio de pantalla: transición lateral de derecha a izquierda.
• Producto: zoom ligero en la imagen principal y entrada escalonada de beneficios.

Mapeo de Clics

Antes de animar un clic, registra:

selector del objetivo:
visible desde:
momento del clic:
rectángulo del objetivo:
clic x/y:
escena posterior al clic:

No aceptes el clic si:

• el objetivo sigue invisible;
• el objetivo está fuera del viewport;
• otra superposición cubre el objetivo;
• el cursor llega antes de que termine la animación de entrada.

Validación Requerida

Antes de la entrega:

npx hyperframes lint ./project
npx hyperframes validate ./project
npx hyperframes inspect ./project --samples 18

Si hay clics simulados, también valida:

• que el objetivo exista;
• que el objetivo sea visible en el momento del clic;
• que el centro del clic esté dentro del cuadro delimitador;
• que no haya imágenes rotas;
• que no haya texto superpuesto en fotogramas clave.

Salida Esperada

• composición index.html;
• vídeo MP4 renderizado;
• resumen de validación;
• carpeta de entrega limpia, si es necesario.