Video y Visuales de Lanzamiento
Esta habilidad cubre la creación de activos visuales y de video para lanzamientos de productos. Estos son los activos de mayor impacto que crearás: un gran video demo o GIF detiene el desplazamiento, comunica valor más rápido que las palabras y se comparte. Uno malo puede socavar activamente el lanzamiento al hacer que el producto parezca confuso o poco pulido.
La jerarquía de medios
Para la mayoría de los lanzamientos, la decisión de qué crear sigue este orden:
- Video demo: Muestra el producto en acción con contexto. Ideal para explicar cómo funciona algo.
- GIF animado o bucle de grabación de pantalla: Más corto, se reproduce automáticamente en línea en redes sociales. Ideal para mostrar una interacción específica.
- Captura de pantalla anotada: Estática, rápida de producir, buena para mostrar un estado o característica específica.
- Diagrama o ilustración: Para arquitectura, conceptos o cosas que no se pueden capturar en pantalla.
En general: usa video cuando el flujo importa, GIF cuando una interacción única comunica el valor, y capturas de pantalla cuando un estado específico es el punto.
Video demo
Duración por plataforma
| Plataforma | Duración objetivo | Límite estricto |
|---|---|---|
| Product Hunt | 60-90 segundos | 3 minutos |
| Página de inicio (hero) | 60-90 segundos | 2 minutos |
| X/Twitter incrustado | 30-45 segundos | 2 minutos 20 segundos |
| 45-90 segundos | 10 minutos | |
| YouTube (demo completa) | 3-5 minutos | — |
Los límites estrictos de las plataformas no son solo técnicos: el engagement cae bruscamente más allá de ellos. Un video de 4 minutos en Product Hunt es efectivamente ningún video.
Estructura del guion (para demo corta)
Mantén esto en 5-7 compases:
- Problema (5-10 segundos) — Enuncia el problema a resolver. Una oración. Sin una introducción larga.
- Presenta la solución (5-10 segundos) — Nombra el producto y la propuesta de valor central.
- Demo: camino feliz (30-60 segundos) — Muestra el caso de uso principal funcionando de principio a fin. Este es el corazón del video.
- Capacidades clave (10-20 segundos) — 2-3 cortes rápidos que muestren funciones secundarias. Mantén el ritmo.
- Punto de prueba (5-10 segundos) — Una métrica, cita de cliente o punto de referencia. Una diapositiva o línea de voz en off.
- CTA (5 segundos) — Una acción. "Pruébalo gratis en [URL]" o "Regístrate en [URL]".
Evita: introducciones largas, logotipos animados (el público hace clic para salir), pantallas de inicio lentas del producto y cualquier cosa que no muestre al producto haciendo algo.
Consejos de grabación
- Usa un entorno de demostración, no producción. Datos limpios, sin información vergonzosa del cliente, estado confiable.
- Ralentiza las interacciones deliberadas. Las personas siguen mejor los movimientos del cursor cuando te mueves intencionalmente, no a la velocidad de trabajo normal.
- Graba al doble de tu resolución objetivo. Graba a 2880×1800 o 1440×900 (Retina), luego reduce la escala para la entrega. Esto te da espacio para hacer zoom y se ve más nítido.
- Oculta todo lo superfluo. Cierra las notificaciones de Slack, oculta la barra de marcadores del navegador, usa un perfil de navegador limpio. Las distracciones en la grabación erosionan la confianza.
- Captura más de lo que usarás. Graba flujos de trabajo completos y corta en la postproducción. Es más rápido que volver a grabar porque te perdiste un compás.
Voz en off vs. silencioso
Ambos funcionan. La elección depende del contexto:
- Voz en off: Más cálida, más explicativa, funciona mejor en YouTube y páginas de inicio. Requiere un entorno de grabación limpio y buena calidad de audio. Un audio malo es peor que ningún audio.
- Silencioso con superposiciones de texto: Funciona mejor en contextos de reproducción automática con sonido silenciado (redes sociales). Más rápido de producir. Requiere etiquetas claras en pantalla.
Si no estás seguro: graba el demo en silencio, agrega superposiciones de texto en los momentos clave, luego decide si agregar voz en off según la plataforma.
Herramientas
- Grabación de pantalla: Loom (rápido), Screen Studio (salida pulida, buena para marketing), QuickTime (crudo), OBS (control total)
- Edición de video: CapCut (rápido, fácil), DaVinci Resolve (profesional, gratuito), Final Cut Pro, Adobe Premiere
- Diseño de movimiento / animaciones de logotipos: After Effects, Motion (Mac), Jitter (basado en web)
- Subtítulos: Descript (también bueno para editar mediante transcripción), Captions app, Rev
- Video programático: Remotion (basado en React — consulta la sección a continuación)
Video programático con Remotion
Para equipos que envían rápido y no quieren esperar a un diseñador de movimiento para cada lanzamiento, el video programático te permite escribir componentes de React y renderizarlos como archivos MP4. El video es código: control de versiones, parametrizado e iterable sin un editor de línea de tiempo.
Cuándo usar video programático
Funciona bien para:
- Clips de anuncio de lanzamiento (15-45 segundos) para redes sociales
- Videos de recorrido de producto que muestran la interfaz de usuario en acción
- Reels de características destacadas con superposiciones de texto y capturas de pantalla
- Videos basados en datos (comparaciones de puntos de referencia, métricas de crecimiento)
- Videos plantilla que reutilizarás en varios lanzamientos (solo intercambia el contenido)
Menos adecuado para:
- Videos de marca cinematográficos que requieren diseño de movimiento complejo
- Videos narrativos del fundador con imágenes en vivo
- Videos que necesitan ilustraciones personalizadas extensas o 3D
Para lanzamientos importantes de Nivel 1, podrías combinar enfoques: video programático para clips sociales y un diseñador de movimiento profesional para el video principal.
Configuración de Remotion
npx create-video@latest mi-video-de-lanzamiento
cd mi-video-de-lanzamiento
npm start # Abre Remotion Studio para vista previa
Conceptos clave:
- Composition: Un video es un componente de React con una duración definida (en fotogramas) y una velocidad de fotogramas
- useCurrentFrame(): Hook que devuelve el número de fotograma actual — úsalo para impulsar animaciones
- Sequence: Componente que desplaza sus hijos en el tiempo — úsalo para secuenciar escenas
- spring(): Utilidad de animación para movimiento de sensación natural (entrada/salida suave)
- Assets: Las imágenes, capturas de pantalla y audio van en la carpeta
public/
Plantilla de planificación de escenas
Antes de escribir código, planifica el video escena por escena:
| Campo | Descripción |
|---|---|
| Escena # | Número secuencial |
| Duración | Segundos (ej., "3s") |
| Propósito | Qué comunica esta escena (una oración) |
| Contenido de texto | Texto exacto que aparece en pantalla |
| Elementos visuales | Capturas de pantalla, iconos, fragmentos de código, diagramas |
| Estilo de animación | Fundido, deslizar desde la izquierda, máquina de escribir, escalar, etc. |
| Transición de salida | Cómo sale esta escena (fundido, corte, deslizamiento) |
Patrones de código
Escenas secuenciadas:
<Sequence from={0} durationInFrames={90}>
<HookScene />
</Sequence>
<Sequence from={90} durationInFrames={120}>
<DemoScene />
</Sequence>
<Sequence from={210} durationInFrames={90}>
<CTAScene />
</Sequence>
Revelación de texto:
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 20], [0, 1], {
extrapolateRight: 'clamp',
});
return <h1 style={{ opacity }}>Tu propuesta de valor principal aquí</h1>;
Flujo de trabajo de iteración
- Planifica escenas usando la plantilla anterior
- Recopila activos — capturas de pantalla, logotipos, imágenes del producto → carpeta
public/ - Escribe o solicita el primer borrador — consigue la estructura y el contenido correctos
- Vista previa en Studio — míralo completo, anota problemas de sincronización y visuales
- Itera — ajusta sincronización, animación y contenido. Generalmente toma 2-4 rondas
- Renderiza —
npx remotion render src/index.ts MiComposicion out/video.mp4 - Verifica las especificaciones de la plataforma — confirma que la resolución y el tamaño del archivo sean adecuados para tu plataforma objetivo
GIFs y bucles cortos
Los GIFs se reproducen automáticamente en la mayoría de las plataformas y son ideales para mostrar una sola interacción: un cambio de estado de la interfaz de usuario, una salida de comando de CLI, una respuesta de API. Son más rápidos de producir que un video y a menudo más efectivos para publicaciones en redes sociales.
Cuándo usar GIF vs. video
Usa GIF cuando:
- Todo el valor se puede comunicar en 3-8 segundos
- Estás mostrando una sola interacción de la interfaz de usuario, no un flujo de trabajo
- El activo se incrustará en un tweet o README donde la reproducción de video es menos confiable
Usa video cuando:
- El valor requiere contexto (problema → solución)
- La interacción toma más de 8 segundos para demostrarse
- Necesitas audio
Grabación de GIFs
- Captura al doble, reduce la escala a la resolución objetivo
- Mantén por debajo de 5MB para rendimiento web (usa reducción de paleta o menos fotogramas)
- Bucle sin interrupciones: el estado inicial y final deben coincidir para que el bucle no sea discordante
- Opciones de herramientas: CleanShot X (recomendado para Mac), Kap, Giphy Capture, Gifski (para convertir clips de video)
Optimización del tamaño de archivo GIF
- Reduce la paleta de colores (256 → 128 o 64 colores para muchas grabaciones de interfaz de usuario)
- Elimina fotogramas (30fps → 15fps rara vez se nota en grabaciones de interfaz de usuario)
- Recorta agresivamente: muestra solo lo que cambia, no toda la pantalla
- Convierte a MP4 con reproducción automática/bucle en lugar de GIF cuando la plataforma lo admita (MP4 es ~10 veces más pequeño que un GIF equivalente)
Capturas de pantalla
Las capturas de pantalla están infrautilizadas en los lanzamientos. Una captura de pantalla bien compuesta con anotaciones claras comunica una característica más rápido que un párrafo.
Composición
- Muestra el producto en un estado significativo — no una pantalla vacía, no un estado de carga, no una pantalla llena de datos ficticios que dificultan ver las funciones
- Usa un entorno limpio — navegador sin pestañas, modo oscuro o claro aplicado de manera consistente, sin datos personales visibles
- Destaca el área relevante — cuadros de llamada, flechas o resaltados dirigen la atención a lo que importa
Herramientas de anotación
- CleanShot X (Mac) — captura, anota y exporta en un solo flujo
- Skitch — anotaciones simples
- Figma / Sketch — para tomas de producto más pulidas con estilo personalizado
Marco del navegador
Para productos web, usa un marco de navegador para que las capturas de pantalla parezcan intencionales en lugar de crudas. Herramientas como Screely, Browserframe o plantillas personalizadas de Figma agregan una superposición de cromo del navegador.
Múltiples capturas de pantalla para cuadrículas de funciones
Las páginas de inicio y las galerías de Product Hunt a menudo necesitan 3-5 capturas de pantalla que muestren diferentes aspectos del producto. Planifícalas como un conjunto:
- Cada captura de pantalla muestra una capacidad distinta
- Tratamiento visual consistente (mismo nivel de zoom, mismo tema de navegador, mismo estilo de anotación)
- Cuenta una progresión: entrada → acción clave → resultado
Lista de verificación de activos por nivel
Nivel 1
- Video demo (60-90 segundos, adecuado para PH y página de inicio)
- Corte social corto (30-45 segundos de la misma grabación)
- 3-5 capturas de pantalla anotadas para la página de inicio y la galería de PH
- 1-2 GIFs para publicaciones en redes sociales (mostrando interacciones clave)
- Imagen Open Graph para publicaciones de blog y vistas previas de enlaces sociales
Nivel 2
- 1-2 GIFs o grabación de pantalla corta
- 2-3 capturas de pantalla para la sección de la página de inicio
- Imagen Open Graph
Nivel 3
- 1 captura de pantalla
- Opcional: GIF corto si el cambio es visual
Imágenes Open Graph
Cada pieza de contenido que se comparte como enlace (publicación de blog, página de inicio, entrada de changelog) debe tener una imagen Open Graph (OG) personalizada. La imagen OG es lo que aparece cuando el enlace se pega en Twitter, Slack, iMessage o LinkedIn.
- Tamaño: 1200×630px
- Contenido: Nombre del producto + propuesta de valor principal. Trátalo como una valla publicitaria: legible en tamaño pequeño
- Consistencia: Usa una plantilla para que todo tu contenido de lanzamiento tenga una apariencia cohesiva
- Herramientas: Plantilla de Figma, Vercel OG (generado por código), Bannerbear (automatizado)
Especificaciones de video por plataforma
| Plataforma | Resolución | Duración máxima | Formato | Notas |
|---|---|---|---|---|
| X/Twitter | 1280×720 o 1920×1080 | 2:20 | MP4 (H.264) | Reproducción automática sin sonido: agrega subtítulos |
| 1920×1080 | 10 min | MP4 (H.264) | Cuadrado (1080×1080) funciona bien en el feed | |
| Product Hunt | 1920×1080 | 90 seg | MP4 | Mantén por debajo de 50MB |
| Hero de sitio web | 1920×1080 | Sin límite | MP4/WebM | Considera bucle de reproducción automática (sin audio) |
Habilidades complementarias
- launch-strategy — determina qué activos se necesitan para el nivel de lanzamiento
- launch-tweet — los GIFs y videos van en el tweet (adjuntos, no enlazados)
- launch-landing-page — el video demo y las capturas de pantalla van en la página
- launch-distribution — requisitos de formato por plataforma