Product Motion Video (60s)

Vídeo Animado de Producto (60s)

0. Entradas (preguntar solo lo que falte, un mensaje, máximo 3 preguntas)

• TEMA: producto/idea (obligatorio)
• MARCA: URL o archivo md (opcional) -> extraer nombre, eslogan, 3 beneficios, colores, tono. Una sola web_fetch como máximo.
• REF. ESTILO: opcional; inferir 3 rasgos (ritmo, tipo, paleta) en una línea. Sin investigación profunda. Si el usuario dejó {placeholders} sin rellenar, tratarlos como vacíos, indicar suposiciones en una línea y construir.

1. Plan (<=15 líneas de reflexión, sin ensayos)

Paleta (fondo, tinta, 1 acento, 1 secundario), 1 fuente display + 1 fuente cuerpo (sistema/Google Fonts con fallback), 8 escenas.

Estructura por defecto 60s (segundos):

1. 0-5 Gancho: tipografía cinética, una afirmación audaz
2. 5-13 Problema: glitch/tensión, contadores
3. 13-21 Revelación: logo/producto morph-in
4. 21-31 Características 1-3: tarjetas UI, iconos emergentes, escalonados
5. 31-41 Prueba: gráfico animado/contadores numéricos
6. 41-49 Flujo/cómo funciona: trazado de línea + nodos
7. 49-56 Montaje: cortes rápidos, tiempos de 0.4s, texto en marquesina
8. 56-60 CTA: logo, eslogan, URL, pulso

2. Construcción (un archivo .html, JS vanilla, cero dependencias, <=18KB)

Arquitectura, mantenlo pequeño:

• Escenario 1920x1080 escalado para ajustarse mediante transform CSS; todos los colores como variables CSS.
• Línea de tiempo maestra: scenes=[{t0,t1,build(escenario), update(p)}] con p en 0..1 desde un único reloj rAF t=(now-start)/1000. Sin cadenas setTimeout.
• Ayudantes (escribir una vez, reutilizar): ease(p) (cúbico/expo/back), lerp, clamp, stagger(i,n,p), type(el,text,p).
• Vocabulario de movimiento (usar >=6): tipografía cinética, revelaciones con máscara, trazados con stroke-dashoffset, contadores, capas de paralaje, tarjetas escalonadas, morph de forma (ruta SVG mediante lerp de d), glitch (rebanadas con clip-path), marquesina, zoom de cámara (escala+traslación en escenario), cortinillas entre escenas.
• Reglas: superponer transiciones de escena 0.4s; cada elemento tiene easing (nunca lineal); máximo 2 puntos focales simultáneos; mantener texto clave >=1.2s; animar solo transform/opacity.
• Controles: play/pause (espacio), barra de avance, reiniciar, parámetro de búsqueda ?t=SEGUNDOS, window.seek(t) para exportación.
• Respetar prefers-reduced-motion no reproduciendo automáticamente la escena de glitch parpadeante.
• Audio opcional: golpes sintetizados con WebAudio en cortes de escena (desactivado por defecto, botón de silencio). Sin audio externo.

3. Entrega

• Publicar mediante la herramienta Artifact (publicar) como página; si no hay herramienta Artifact, create_file en /mnt/user-data/outputs + present_files.
• Responder: 2 frases (qué es, suposiciones). Sin narración escena por escena.

4. Exportación MP4 (solo si el usuario lo pide)

Playwright headless: para f en 0..1799 llamar seek(f/30), capturar pantalla 1920x1080 -> frames; ffmpeg -framerate 30 -i f_%04d.png -c:v libx264 -pix_fmt yuv420p out.mp4. Si ffmpeg/playwright falta, decirlo y dar al usuario esta receta en lugar de reintentar.

5. Disciplina de tokens

• No leer otros skills, no previsualizar-renderizar, no hacer pases de pulido a menos que se solicite.
• Reutilizar los mismos diseños de tarjetas/tipografía entre escenas; variar movimiento, no marcado.
• Escribir el archivo en UNA sola llamada de herramienta. Editar con pequeñas ediciones str_replace para revisiones, nunca reescribir.
• Limitar investigación a 1 fetch + 1 búsqueda.