Vibe Motion / Habilidades de Marca

Estrella de Video de Lanzamiento de Marca

Crea una película de lanzamiento auténtica, no una plantilla de movimiento genérica. Verifica la marca, cuenta una historia específica del producto y renderiza una secuencia rápida y pulida con activos exactos y movimiento determinista.

Bloqueos de lanzamiento

1. Usa activos auténticos. Nunca inventes, redibujes, aproximes, traces o generes un logotipo, marca denominativa, producto, interfaz, mascota, empaque, persona o escena de marca.
2. Haz el logotipo exacto. Descarga el archivo oficial actual o usa el original del usuario. Nunca compongas una marca denominativa ni reconstruyas un logotipo con primitivas CSS/SVG.
3. Investiga más allá de las cargas. Trata las cargas como material fuente utilizable, no como el límite de activos. Encuentra material oficial o licenciado adicional cuando la historia lo necesite.
4. Muestra el producto. Demuestra características reales, interacciones, escenarios, resultados y pruebas. No ocultes una historia de producto débil detrás de efectos abstractos.
5. Por defecto, inglés. Usa otro idioma solo cuando se solicite explícitamente.
6. Mantén el movimiento determinista. Calcula cada estado a partir del fotograma/tiempo y entradas explícitas. Nunca dependas del orden de renderizado o de la aleatoriedad no seedeada.
7. Verifica las afirmaciones. Confirma nombres, características, métricas, eslóganes y CTA actuales contra fuentes oficiales.

Si un activo que lleva identidad no puede ser autenticado, detente y solicita un original autorizado. No renderices un sustituto plausible.

Usa gráficos procedimentales solo como capas de movimiento no representacionales: máscaras, degradados, campos de color, cuadrículas, brillos, partículas, estelas, tipografía, gráficos de datos verificados y geometría de transición.

Inicio rápido

Instala la habilidad:

npx skills add vibe-motion/skills

Invócala con un resumen concreto:

Usa $brand-launch-video-star para crear una película de lanzamiento de 15 segundos en 16:9 e inglés
para https://example.com. Investiga activos oficiales, muestra el flujo de trabajo del producto principal
y entrega un MP4 de Vibe Motion/Remotion más archivos de procedencia.

Trabaja dentro del proyecto existente de Vibe Motion o Remotion del usuario. Si no existe ninguno, inicializa un proyecto de Vibe Motion con npx create-vibe-motion, luego sigue los comandos de instalación y renderizado del proyecto generado.

Antes de la implementación:

1. Copia references/asset-manifest.example.json al proyecto y reemplaza cada valor de ejemplo.
2. Copia references/timeline.example.json al proyecto y adapta su duración y tomas.
3. Valida ambos archivos:

node <skill-dir>/scripts/validate-assets.mjs ruta/al/asset-manifest.json
node <skill-dir>/scripts/validate-timeline.mjs ruta/al/timeline.json

Usa --schema-only solo para inspeccionar la plantilla de manifiesto empaquetada:

node <skill-dir>/scripts/validate-assets.mjs \
  <skill-dir>/references/asset-manifest.example.json --schema-only

Flujo de trabajo

1. Resolver el resumen

Determina:

• Empresa/producto y URL oficial
• Enfoque del producto o campaña
• Audiencia y distribución
• Duración; por defecto 15 segundos, normalmente soporta 15-30 segundos
• Relación de aspecto; por defecto 16:9
• Idioma; por defecto inglés
• Afirmaciones requeridas, CTA y necesidades de exención de responsabilidad
• Si el usuario posee o puede publicar los activos suministrados

Haz solo preguntas que cambien materialmente la película.

2. Construir la hoja de verdad de la marca

Navega por las fuentes oficiales actuales y extrae:

• Variantes de logotipo exactas y uso
• Fuentes oficiales o fuentes web
• Colores primarios, secundarios y dinámicos
• Principios de marca, tono y motivos visuales
• Nombres de productos actuales, características, escenarios, métricas y CTA
• Fotografía oficial, renders, capturas de pantalla de UI, metraje, activos de prensa y kits de medios

Prioriza:

1. Original proporcionado por el usuario
2. Sitio web de la empresa, paquete estático, sala de prensa, portal de marca, kit de medios o repositorio oficial
3. Biblioteca de medios controlada por la empresa
4. Stock con licencia o kit de socio autorizado

Lee references/asset-authenticity.md antes de adquirir activos.

3. Crear el manifiesto de activos

Registra cada activo que lleva identidad en asset-manifest.json:

• ID estable y rol
• Ruta local
• URL de origen exacta
• Tipo de origen
• Página/archivo de verificación oficial
• Nota de derechos/licencia
• Estado de autenticidad
• Checksum SHA-256 opcional

El validador verifica la estructura del manifiesto, la procedencia declarada, la existencia de archivos locales y los checksums opcionales. No concede derechos de uso de forma independiente ni prueba que una fuente remota sea veraz; realiza la comparación con la fuente oficial manualmente.

No comiences el renderizado final mientras la validación falle.

4. Elegir la columna vertebral de la historia

Presenta 2-3 direcciones concisas y recomienda una:

• IA/SaaS: intención -> pensamiento/planificación -> capacidades -> ejecución -> resultado -> prueba -> logotipo
• Producto físico: héroe -> interacción -> macro de característica -> contexto de uso -> resultado -> logotipo
• Servicio/empresa: contexto -> proceso -> evidencia -> resultado -> promesa -> logotipo
• Marca basada en imágenes: imágenes auténticas -> motivo visual -> beneficio -> recompensa emocional -> logotipo

Lee references/story-patterns.md para patrones de duración.

5. Planificar fotogramas exactos

Usa 30fps a menos que el proyecto requiera lo contrario. Convierte cada límite a un fotograma entero.

Para 15 segundos, apunta a 5-8 tiempos principales; para 30 segundos, apunta a 8-12. Dale a cada tiempo:

• Fotograma de inicio/fin
• Propietario visual e IDs de activos auténticos
• Acción principal
• Anticipación, compromiso, impacto, freno y asentamiento
• Texto y mantenimiento legible
• Estado de color
• Transición de entrada/salida

Usa superposiciones de 6-12 fotogramas cuando la continuidad se beneficie. Una toma posee la velocidad; la siguiente posee el destino.

6. Construir intensidad con control

• Usa movimiento del producto, trayectorias del cursor, luz, contenido desplazable, bordes de objetos o geometría emparejada para impulsar las transiciones.
• Usa 2-5 estados de color deliberados con fuerte contraste.
• Mantén una acción principal por tiempo; retrasa las capas secundarias de 2 a 6 fotogramas.
• Establece 2-3 picos de alta energía y momentos de frenado más silenciosos.
• Preserva siluetas legibles, texto y espacio libre del logotipo.
• Evita HUDs falsos, tarjetas de vidrio arbitrarias, muros de texto decorativos, métricas no verificadas y la misma suavización en todas partes.

Lee references/motion-quality.md antes de la implementación.

7. Demostrar causa y efecto

Incluye al menos una cadena legible:

intención del usuario -> acción del producto -> respuesta del sistema -> resultado útil

Para productos de IA:

prompt -> planificación -> capacidades paralelas -> resultado generado -> prueba

Usa capturas de UI reales, grabaciones, código fuente o capturas de pantalla proporcionadas oficialmente. Si la UI real no está disponible, usa movimiento abstracto claramente conceptual; nunca fabriques una interfaz con marca y la presentes como real.

8. Implementar y renderizar

Para Remotion:

• Define state = f(frame, fps, inputs, constants).
• Mantén los límites de las tomas en un solo módulo de timeline/constants.
• Seedea la variación procedimental con IDs estables.
• Preserva valores fraccionarios al derivar la velocidad.
• Mantén las dimensiones de la imagen y la relación de aspecto explícitas.
• Preserva composiciones/salidas anteriores durante la iteración.

Prefiere el CLI local del proyecto. Los comandos típicos de descubrimiento y renderizado son:

pnpm exec remotion compositions <archivo-de-entrada>
pnpm exec remotion render <archivo-de-entrada> <id-de-composición> out/launch-film.mp4

Vista previa por defecto:

• 1920x1080
• 30fps
• H.264 MP4
• Duración exacta solicitada
• V1 visual primero; añade sonido solo cuando se solicite o esté disponible

9. Verificar

• Ejecuta la validación del manifiesto de activos y la línea de tiempo.
• Ejecuta el descubrimiento/construcción de composiciones y comprobaciones de lint/tipo dirigidas.
• Verifica la duración del medio, la velocidad de fotogramas, las dimensiones y la integridad del archivo.
• Inspecciona fotogramas representativos y el renderizado completo.
• Solicita comentarios con código de tiempo sobre ritmo, claridad, impacto, autenticidad y suavidad.

10. Entregar procedencia

Proporciona:

• Video renderizado
• Ruta de composición/fuente
• Especificaciones exactas y duración
• Manifiesto de activos
• Enlaces de fuentes de marca/producto
• Nota de derechos/exención de responsabilidad
• Identificador de versión

Indica cuándo la película es un concepto no oficial y cuándo la publicación comercial requiere permiso.

Recuperación de fallos

• Logotipo incorrecto: elimínalo, localiza el archivo oficial actual, registra la procedencia y vuelve a renderizar.
• Producto/UI de aspecto falso: reemplázalo con medios oficiales, proporcionados por el usuario o con licencia; no mejores la imitación.
• Rápido pero caótico: reduce las acciones simultáneas, asigna un propietario visual y conserva el movimiento emparejado entre cortes.
• Hermoso pero genérico: añade una interacción completa del producto, afirmaciones verificadas y resultados reales.
• Suave pero lento: acorta las pausas, superpone las transiciones y frena solo alrededor de los mensajes clave.
• Activo no disponible: solicita un original autorizado; nunca adivines.