Video de lanzamiento: la película principal de director creativo

Video de lanzamiento SaaS: director creativo

Cada video debe sentirse hecho para su producto: su propio concepto, estructura, aspecto y transiciones. Este skill es un director + conjunto de herramientas, no una plantilla. Nunca recurras a un solo estilo predeterminado.

Requisitos

Node 18+, FFmpeg en PATH, npx [email protected]. Los skills de HyperFrames hyperframes-creative, hyperframes-animation e hyperframes-registry (instalación: npx [email protected] init <cualquier-dir>; actualización: npx [email protected] skills update). Python + pip install librosa solo para el análisis de música.

¿Video de referencia? Si el usuario envía un video para replicar ("como este"), sigue references/REFERENCE.md: ejecuta scripts/analyze-reference.mjs y escribe reference.md justo después del paso 1. Luego, esto dará forma a la propuesta, el guion, las comprobaciones de construcción y la música.

Flujo de trabajo (4 puntos de control necesitan al usuario)

1. Configurar y conocer el producto. Ejecuta node <skill>/scripts/new-project.mjs <dir>. Luego, conoce el producto a partir de la mejor fuente disponible:

   • Código: lee los componentes, rutas, tema y textos; escribe brand.json (references/BRAND.md) y ejecuta scripts/brand.mjs.
   • Enlace: node <skill>/scripts/from-link.mjs <url> <dir> escribe brand.json y brand-kit.md; verifica los logotipos y colores.
   • Pantallas: solicita el logotipo, los colores y las pantallas clave.

   Enumera las funcionalidades activas, la audiencia y el tono.

2. PUNTO DE CONTROL: propuesta de 3 direcciones. Usa references/PITCH.md. Combina estilos de references/DIRECTIONS.md (4 familias × 3 estilos) con formas de references/NARRATIVES.md. Las tres deben diferir (al menos 2 familias) y cada una recibe un fotograma clave renderizado. El usuario elige o mezcla; guarda la decisión en direction.md. Con una referencia, la dirección A es la referencia en la fidelidad solicitada, y cada fotograma fijo se muestra junto al fotograma de referencia al que responde.

3. PUNTO DE CONTROL: guion. Una tabla de ritmos para la dirección elegida (escena, contenido en pantalla, texto, movimiento, transición, sonido), más las acciones exactas de la interfaz de usuario. Después de la aprobación, solicita las pantallas dentro de la aplicación que necesita (references/UI-REBUILD.md).

4. PUNTO DE CONTROL: imágenes (solo si la dirección las necesita). Escribe las indicaciones y espera los archivos; nunca las generes o falsifiques tú mismo (references/IMAGES.md).

5. Construir.

   • Una subcomposición por escena.
   • Para cada escena, lee su plano de HyperFrames y busca en el registro (npx [email protected] catalog <palabras> --json) antes de construir manualmente.
   • Las escenas de producto comienzan desde reference/ui-rig.html. Usa lib/fx.js para el movimiento y lib/three-stage.js para 3D.
   • Bucle: lint → captura de pantalla → corrige hasta que cada fotograma se vea bien, luego haz un render borrador (references/WORKFLOW.md). Con una referencia, verifica el borrador con analyze-reference.mjs --compare.

6. PUNTO DE CONTROL: música. Escribe music-plan.json, ejecuta scripts/music-plan.mjs, e indica al usuario que genere de 2 a 4 tomas en ElevenLabs. Alinéalas con analyze-track.py --drop, mézclalas con mix-variations.mjs, y permite que el usuario elija (references/MUSIC.md).

7. Entregar. Monta la pista, renderiza con -q delivery, luego ejecuta scripts/finalize.mjs (masterización a −14 LUFS + una copia de subida de menos de 100 MB).

Reglas

• Solo funcionalidades reales, interfaz real, datos de demostración. Nunca inventes pantallas; pídelas.
• Un movimiento característico y 2-3 transiciones por video (o el conjunto propio de la referencia), utilizados de forma consistente. Mantén cada línea de texto el tiempo suficiente para leerla.
• Solo variables de marca en las escenas (var(--brand-primary), var(--font-display)); nunca codifiques un color o una familia tipográfica de la marca.
• Una referencia es gramática, no contenido. Copia su ritmo, transiciones, roles tipográficos y de color; nunca su material de archivo, logotipos, nombres, textos o música.
• Sin aspecto predeterminado. Si un borrador comienza a derivar hacia un genérico "fondo oscuro degradado + ventana inclinada + tarjetas de texto", detente y vuelve a leer direction.md.
• Lee references/GOTCHAS.md antes de construir. Enumera las trampas de HyperFrames que cuestan renders.

Archivos

Ruta	Qué es
toolkit/fx.js	ayudantes de movimiento: escritura, texto en streaming, barrido, revelación de máscara, cursor, cuenta ascendente, dibujo/seguimiento de trayectoria
toolkit/three-stage.js	Escena de portátil / teléfono / paneles flotantes en Three.js con cámara con fotogramas clave e intercambios de pantalla
toolkit/ui-rig.html	Rig de reconstrucción de interfaz (cámara plana / inclinada / frontal), copiado a reference/ en cada proyecto
toolkit/skeleton/	index.html raíz vacío (marcadores de marca, importmap, fx)
examples/	Demostraciones de técnicas, una por familia: new-project.mjs <dir> --examples las monta. Estúdialas, nunca las copies.
scripts/	new-project, from-link, brand, analyze-reference, fetch-sfx, music-plan, analyze-track.py, mix-variations, finalize