Videos de lanzamiento hechos con la interfaz real de tu producto

Qué incluye un proyecto de video de lanzamiento

Un proyecto de video de lanzamiento cubre la historia, el movimiento y todos los archivos que necesita el lanzamiento. La propuesta indica qué está incluido y quién aporta pantallas, textos, acceso a un entorno de pruebas y aprobaciones.

• Guion y storyboard escritos a partir de las pantallas y estados reales de tu producto
• Motion graphics hechos en código con tu interfaz, o grabados del producto en vivo
• Tipografía y textos en pantalla de tu marca, legibles sin sonido
• Sonido: música y efectos, y voz en off cuando la historia la necesita
• Un máster, más cortes por formato, duración e idioma
• Subtítulos, imágenes de portada y notas de exportación para tu sitio, redes, anuncios y tiendas de apps

Por qué hacer el video con la interfaz real de tu producto

Un video de lanzamiento hace una promesa sobre el producto, así que el material más seguro es el producto mismo. Cuando el video muestra las pantallas que la gente va a usar, la primera sesión confirma el anuncio en vez de contradecirlo, y los colores, la tipografía y el movimiento ya son de tu marca.

Las tiendas de apps piden lo mismo. Las guías de revisión de la App Store dicen que las vistas previas de una app solo pueden usar capturas de video de la propia app, con narración y textos superpuestos para explicar lo que el video no deja claro. La ayuda de Google Play para videos de vista previa pide mostrar la experiencia principal de la app en los primeros 10 segundos.

Partimos de lo que existe: el producto en vivo, un entorno de pruebas o los archivos de diseño. Si una función aún no está construida, el storyboard la marca y acordamos contigo si esperarla o dejarla fuera.

Motion graphics hechos en código o grabados del producto en vivo

Hay dos formas de convertir una interfaz en video, y muchos videos de lanzamiento usan las dos.

Hechos en código: reconstruimos las tarjetas, los paneles y los botones que cuentan la historia como una composición de Remotion. Remotion genera video a partir de componentes de React, un fotograma a la vez, así que cada etiqueta, cifra e idioma es un dato. Cambiar un precio, un titular o el idioma es volver a renderizar, no reeditar una línea de tiempo, y el movimiento usa tu tipografía y tus colores reales.

Grabados del producto: capturamos el sitio en vivo en un navegador, así que el movimiento es exactamente el que ven los usuarios. Los videos cortos y sin sonido de nuestra página de proyectos se hicieron así con los sitios en vivo de Hyper, Janus Observatory y Gissi; en Hyper, un reloj controlado del navegador registra cada paso de la animación para que no se pierda ningún fotograma. Sirve para interfaces que ya se mueven bien, como una intro animada o una escena 3D.

Las escenas grabadas pueden ir dentro de una composición en código, con tu tipografía y tus transiciones alrededor. En ambos casos, el video se hace con tu producto, no con material de stock ni con un mockup genérico de un dispositivo.

Superame: un comercial de 28,8 segundos hecho con su propia interfaz

Superame es un ranking público de proyectos que Dardo diseñó y desarrolló. Su comercial de lanzamiento dura 28,8 segundos, en 1920 × 1080 y a 60 fotogramas por segundo, con sonido y en español. Los metadatos del archivo muestran que se renderizó con Remotion 4.0.520, y lo publicamos en nuestro sitio el 14 de septiembre de 2026.

Cada plano es la interfaz de Superame, reconstruida en código. Una tarjeta de proyecto se publica y luego se pierde entre otras; el panel de oferta sube el monto y se pulsa su botón Superar; la tarjeta sube en el ranking hasta el primer lugar. Cinco frases cuentan la historia: “Lo lanzaste.”, “¿Y el resto?”, “Sí. El tuyo.”, “Que te vean.” y un cierre con superame.lol y “hazte ver”.

Un corte sin sonido de 1280 × 720 se reproduce en nuestro portafolio, porque el video silenciado puede empezar solo cuando carga la página. Lo que este ejemplo no muestra: no hemos publicado cuánto tardó, cuánto costó ni cómo funcionó, y es un solo video en un solo idioma. Es evidencia del método, no de resultados.

Un máster, cortado para cada lugar donde se ve

Cada plataforma recorta, limita y reproduce el video a su manera, así que planeamos los cortes desde el storyboard y mantenemos los textos clave dentro de la zona segura de cada formato. A octubre de 2026, las páginas de ayuda de las propias plataformas dicen:

Por eso un máster a 60 fps como el de Superame necesita una exportación con menos fotogramas para LinkedIn y la App Store, y un corte vertical se recompone en vez de recortarse, para que la interfaz se lea en un celular. Revisamos la página de cada plataforma antes de exportar, porque estos límites cambian.

Subtítulos, sonido apagado y versiones por idioma

Un video de lanzamiento suele empezar sin sonido: Chrome solo inicia un video con sonido en casos limitados, como cuando la persona ya interactuó con el sitio; Google Play reproduce las vistas previas sin sonido, y las especificaciones de Meta para anuncios en Reels llaman a los subtítulos opcionales pero recomendados. Por eso la historia se escribe para funcionar en silencio, con los textos en pantalla, y el sonido suma.

Los subtítulos también son un requisito de accesibilidad: el criterio de éxito 1.2.2 de las WCAG 2.2, de nivel A, pide subtítulos para el audio pregrabado en contenido multimedia sincronizado, con diálogos y sonidos relevantes. Entregamos subtítulos opcionales en archivos SRT, el formato que exige LinkedIn, e incrustamos subtítulos abiertos en los cortes para redes que no aceptan un archivo.

En una composición en código, el texto en pantalla es un dato, así que las versiones en español, inglés y portugués se renderizan con su propio largo de línea, fechas y monedas en vez de escribirse encima del corte original. Cada idioma tiene su propia revisión antes de exportar.

Cuándo vale la pena un video de lanzamiento

Un video de lanzamiento vale la pena cuando el producto funciona, sus pantallas principales están estables y hay una fecha y un lugar donde se verá: el anuncio del lanzamiento, una landing page, la ficha en una tienda de apps o una campaña pagada. Antes de eso, una grabación de pantalla hecha por tu equipo basta para probar el interés.

Si las visitas llegan y no actúan, la página puede importar más que el video: empieza por una landing page o por el diseño web para SaaS. Si la interfaz misma no es clara, primero va el diseño de producto, porque un video solo puede mostrar lo que existe. Para movimiento que las visitas recorren y controlan dentro del sitio, mira el desarrollo creativo.

No grabamos acción real. Actores, locaciones y equipo de rodaje son trabajo de una productora audiovisual; podemos entregarle las escenas de interfaz para su montaje.

Qué mueve el costo de un video de lanzamiento

No hay un precio de paquete: un loop de 15 segundos grabado de un producto en vivo y un comercial de 60 segundos con voz en off en tres idiomas son trabajos distintos. Esto es lo que más lo mueve:

• La duración y la cantidad de escenas distintas
• Si la interfaz existe en código o en archivos de diseño que podamos usar
• Motion hecho en código, grabado del producto o ambos
• La voz en off y la música con licencia para anuncios pagados
• Las versiones: formatos, duraciones e idiomas
• Cuántas personas aprueban el guion y los cortes

La propuesta cotiza por separado guion, producción, sonido y cada grupo de versiones, con fechas calculadas hacia atrás desde tu lanzamiento. Nuestra página de precios lista los rangos de presupuesto del formulario de contacto.

Preguntas antes de elegir

Desde el blog

• Remotion: cómo hicimos un video promocional de producto con código

  Hicimos el comercial de 28,8 segundos de Superame con Remotion. Qué es, cómo renderiza, quién necesita licencia y cuándo After Effects encaja mejor.