Cuándo Usarlo
Usa esta habilidad cuando el usuario quiera crear:
-
Videos Tutoriales Educativos - Investiga un tema y crea un video explicativo animado.
- Ejemplo: "Crea un tutorial sobre el ciclo de vida de una mariposa para estudiantes de 3er grado"
-
Demostraciones de SaaS - Muestra las funciones del software con una interfaz animada.
- Ejemplo: "Crea un video demo que muestre cómo usar la función de base de datos de Notion"
-
Anuncios de Lanzamiento de Productos - Videos de marketing con gráficos en movimiento.
- Ejemplo: "Crea un video de lanzamiento anunciando nuestra nueva función de búsqueda con IA"
-
Videos Tutoriales / Guías - Guías paso a paso con animaciones de cursor.
- Ejemplo: "Crea un tutorial que muestre cómo configurar un proyecto en nuestra app"
-
Videos Promocionales para Redes Sociales - Videos cortos y dinámicos con texto cinético para anuncios.
- Ejemplo: "Crea un anuncio de 15 segundos para Instagram de nuestra app de fitness"
-
Videos de Presentación de Apps/Productos - Texto cinético combinado con maquetas de interfaz flotantes.
- Ejemplo: "Crea un promo mostrando la interfaz de nuestro exchange de criptomonedas"
-
Videos de Presentación de Landing Pages - Estética de herramientas de diseño con animaciones de página web.
- Ejemplo: "Crea un video que muestre el diseño de nuestra nueva landing page de SaaS"
Flujo de Trabajo de Producción de Video
Sigue este proceso para todos los tipos de video:
1. ENTENDER → 2. INVESTIGAR → 3. GUIÓN → 4. ESCENAS → 5. AUDIO → 6. ANIMAR
Paso 1: Entender la Solicitud
Identifica:
- Tipo de video: ¿Tutorial educativo, demo de SaaS, lanzamiento de producto, tutorial/guía, promo social, presentación de app, presentación de landing page o explicación con IA?
- Público objetivo: Edad, nivel de experiencia, contexto
- Tono: Educativo, profesional, enérgico, divertido, dramático, minimalista
- Duración: Ultra-corto (5-15s), corto (30-60s), medio (1-3min), o largo (3-5min)
- Formato: Pantalla ancha 16:9 (1920x1080), cuadrado 1:1 (1080x1080), o vertical 9:16 (1080x1920)
- Estilo visual: Oscuro dramático, gradiente suave, minimalista limpio o estética de herramientas de diseño
Paso 2: Investigar (para tutoriales y demos)
Para contenido educativo:
- Busca información precisa y actualizada
- Usa fuentes confiables (documentación oficial, sitios educativos)
- Reúne datos clave, estadísticas o pasos para explicar
Para demos de SaaS:
- Explora el producto para entender las funciones
- Captura capturas de pantalla o nota patrones de UI
- Identifica el flujo de trabajo clave a demostrar
Paso 3: Escribir el Guión
Escribe un guión de voz completo ANTES de generar el audio. La estructura varía según el tipo de video (ver más abajo).
Paso 4: Planificar las Escenas
Divide el guión en segmentos visuales:
- Cada escena = una idea o paso clave
- Anota qué imágenes acompañan a cada línea
- Planifica las transiciones entre escenas
Paso 5: Generar Audio
Usa Resemble.ai para generar la narración (ver configuración abajo).
Paso 6: Crear Animaciones
Construye la composición de Remotion con animaciones sincronizadas con el audio.
Tipo de Video: Tutorial Educativo
Objetivo: Explicar un concepto claramente para un nivel de audiencia específico.
Estructura del Guión
GANCHO (5-10s)
"¿Alguna vez te has preguntado cómo una oruga se convierte en mariposa?"
INTRODUCCIÓN (10-15s)
Contextualiza y avanza lo que aprenderán.
CUERPO (contenido principal, dividido en 3-5 puntos clave)
- Punto 1: Explica con una metáfora visual
- Punto 2: Construye sobre el punto anterior
- Punto 3: Añade detalle o ejemplo
- ...
RESUMEN (10-15s)
Resume las conclusiones clave.
CIERRE (5s)
Llamada a la acción o pensamiento final.
Adaptación al Público
| Audiencia | Estilo de Lenguaje | Visuales |
|---|---|---|
| K-2º grado | Muy simple, lúdico, frases de 5 palabras | Colores brillantes, personajes lindos, formas grandes |
| 3º-5º grado | Simple pero informativo, analogías | Diagramas claros, paso a paso, ritmo moderado |
| 6º-8º grado | Más vocabulario, causa-efecto | Gráficos, diagramas etiquetados, ritmo más rápido |
| Secundaria+ | Términos técnicos aceptables, matices | Visualización de datos, gráficos detallados |
| Adultos | Profesional, conciso | Diseño limpio, infografías |
Patrones de Animación para Tutoriales
- Revelaciones: Aparecen elementos gradualmente cuando el narrador los menciona
- Transformaciones: Las formas se transforman para mostrar cambios (oruga → mariposa)
- Diagramas: Etiquetas animadas, flechas que apuntan a partes
- Líneas de tiempo: Barras de progreso, indicadores de pasos
- Comparaciones: Lado a lado con resaltado
Ejemplo de Plan de Escena
Guión: "Primero, la mariposa pone huevos diminutos en una hoja."
Escena 1:
- Visual: Aparece una hoja (deslizar desde abajo, animación de resorte)
- Visual: Huevos pequeños aparecen gradualmente en la hoja
- Temporización: Sincronizar la palabra "huevos" con la aparición de los huevos
- Duración: 4 segundos
Tipo de Video: Demo de SaaS
Objetivo: Mostrar a los usuarios cómo realizar una tarea en un software.
Estructura del Guión
GANCHO (5-10s)
"Déjame mostrarte cómo [lograr objetivo] en [Producto]."
CONTEXTO (10s)
Por qué esta función es importante, qué problema resuelve.
GUÍA (contenido principal)
- Paso 1: Navega a X
- Paso 2: Haz clic en Y
- Paso 3: Configura Z
- ...
RESULTADO (10s)
Muestra el resultado, el estado final.
CIERRE (5-10s)
Resume el beneficio, sugiere próximos pasos.
Elementos Visuales
- Maquetas de UI: Representaciones estilizadas de la interfaz
- Animaciones de cursor: Puntero animado moviéndose a objetivos de clic
- Resaltados: Bordes brillantes alrededor de botones/campos que se discuten
- Efectos de zoom: Enfoque en áreas específicas de la UI
- Llamadas: Etiquetas de texto que apuntan a elementos de la UI
Patrones de Animación para Demos
- Movimiento del cursor: Curvas bezier suaves, pausa breve antes del clic
- Efecto de clic: Onda o pulso al hacer clic
- Enfoque de campo: Borde resaltado, ligero aumento de escala
- Animación de escritura: Caracteres que aparecen en campos de entrada
- Transición: Deslizar o desvanecer entre pantallas
- Flechas de llamada: Animación de entrada, apuntar al elemento, desvanecer
Ejemplo de Plan de Escena
Guión: "Haz clic en el botón azul 'Nueva base de datos' en la barra lateral."
Escena:
- Visual: Maqueta de UI de la barra lateral
- Animación: El cursor se mueve al botón (0.8s ease-out)
- Animación: El botón se resalta con brillo
- Animación: Efecto de onda al hacer clic
- Animación: Nuevo panel se desliza desde la derecha
- Duración: 3 segundos
Tipo de Video: Anuncio de Lanzamiento de Producto
Objetivo: Generar emoción sobre un nuevo producto o función.
Estructura del Guión
GANCHO (5-10s)
Declaración audaz o pregunta que capte la atención.
PROBLEMA (10-15s)
¿Qué punto débil resuelve?
REVELACIÓN DE LA SOLUCIÓN (10-15s)
Presenta el producto/función de forma dramática.
FUNCIONES CLAVE (20-40s)
3-5 aspectos destacados con imágenes.
PRUEBA SOCIAL (opcional, 10s)
Estadísticas, testimonios o marcadores de credibilidad.
LLAMADA A LA ACCIÓN (5-10s)
¿Qué deberían hacer los espectadores a continuación?
Estilo Visual
- Tipografía audaz: Texto grande, animaciones de tipo cinético
- Colores de marca: Usa la paleta de colores del producto de manera consistente
- Iconos y gráficos: Formas abstractas, iconos de funciones
- Alta energía: Cortes rápidos, movimiento dinámico
- Revelación del logotipo: Logotipo animado al final
Patrones de Animación para Lanzamientos
- Impactos de texto: Las palabras aparecen con impacto
- Tipografía cinética: Palabras que se mueven, escalan, rotan
- Animaciones de contador: Números que cuentan hacia arriba (usuarios, ingresos, etc.)
- Secuencias de iconos: Funciones que aparecen con rebote/resorte
- Fondos gradientes: Degradados de color que cambian lentamente
- Efectos de partículas: Destellos sutiles, formas flotantes
- Revelación del logotipo: Aumentar escala, desvanecer o ensamblar desde piezas
Ejemplo de Plan de Escena
Guión: "Presentamos Smart Search — encuentra cualquier cosa en milisegundos."
Escena:
- Visual: Fondo oscuro con gradiente
- Animación: "Presentando" aparece gradualmente (0.5s)
- Animación: "Smart Search" aparece con impacto, grande y audaz (0.3s, con vibración)
- Animación: Lema se escribe debajo (máquina de escribir, 1.5s)
- Animación: El icono de búsqueda pulsa
- Duración: 4 segundos
Tipo de Video: Tutorial / Guía
Objetivo: Enseñar a los usuarios cómo realizar una tarea con una guía visual clara paso a paso.
Estructura del Guión
INTRO (3-5s)
"Aquí te mostramos cómo [lograr objetivo] en [Producto]."
PASO 1 (10-20s)
Primera acción con una demostración visual clara.
PASO 2 (10-20s)
Segunda acción, basada en el paso anterior.
PASO 3+ (10-20s cada uno)
Continúa con el flujo de trabajo...
ESTADO DE ÉXITO (5-10s)
Muestra la finalización, celebra el resultado.
RESUMEN (opcional, 5s)
Resumen rápido de lo que se logró.
Estilo Visual
- Fondos claros y limpios: Blanco roto (#fafafa), crema o gris claro
- Contexto completo de UI: Muestra la interfaz completa, no solo fragmentos
- Indicadores de progreso: Migas de pan de pasos, etapas numeradas (1 → 2 → 3)
- Cursor como guía: Movimiento suave del cursor que dirige la mirada del espectador
- Celebración de éxito: Marcas de verificación verdes, confeti o pantallas de éxito con marca
- Distracciones mínimas: Concéntrate en la tarea, evita elementos decorativos
Patrones de Animación para Tutoriales
- Coreografía del cursor: Rutas bezier suaves con pausa breve antes de los clics
- Retroalimentación de clic: Onda sutil o resalte al hacer clic
- Enfoque de campo de formulario: Resplandor del borde cuando el campo está activo
- Simulación de escritura: El texto aparece carácter por carácter en las entradas
- Transiciones de pasos: Fundido cruzado suave o deslizamiento entre pantallas
- Actualizaciones de progreso: El indicador de paso/miga de pan se anima hacia adelante
- Explosión de éxito: La marca de verificación aumenta de escala con rebote, confeti opcional
- Revelaciones de panel: Las barras laterales o menús desplegables se deslizan suavemente
Elementos Visuales
- Navegación con migas de pan: "← 1. Intención → 2. Idea Semilla → 3. Bloc de dibujo"
- Entradas de formulario: Texto de marcador de posición, etiquetas, estados de validación
- Botones: CTA claros con estados de hover/activo mostrados
- Barras laterales/paneles: Sugerencias de IA, configuraciones o paletas de herramientas
- Pantallas de éxito: Fondo de color completo con icono + mensaje
Ejemplo de Plan de Escena
Guión: "Primero, ingresa de qué trata tu lección."
Escena 1 - Configuración (2s):
- Visual: Interfaz completa de la app, fondo claro
- Visual: La miga de pan muestra "2. Idea Semilla" activa
- Animación: La pantalla se desvanece
Escena 2 - Interacción (4s):
- Visual: Formulario con la etiqueta "Ingresa un concepto o tema:"
- Animación: El cursor se mueve al campo de entrada (0.6s ease-out)
- Animación: El borde del campo se resalta en azul
- Animación: "Las vidas secretas de los hongos" se escribe (2s)
- Animación: El cursor se mueve al botón "Continuar"
Escena 3 - Transición (2s):
- Animación: El botón se resalta al pasar el cursor
- Animación: Efecto de onda al hacer clic
- Animación: La pantalla se desliza a la izquierda, nuevo panel se desliza
Escena 4 - Resultado (3s):
- Visual: Vista de bloc de dibujo con panel de sugerencias de IA
- Animación: Las tarjetas de sugerencias aparecen escalonadas (0.15s de retraso cada una)
- Animación: La sección "Flujo de la lección" se completa
Escena 5 - Éxito (3s):
- Visual: Fondo verde de pantalla completa
- Animación: Círculo blanco aumenta de escala (resorte)
- Animación: Una marca de verificación se dibuja dentro del círculo
- Animación: "¡Tu lección está en vivo!" se desvanece debajo
- Animación: Subtítulo "Listo para inspirar asombro y descubrimiento" se desvanece
Pautas de Ritmo del Tutorial
| Complejidad del Paso | Duración | Notas |
|---|---|---|
| Clic simple | 2-3s | Clic y resultado inmediato |
| Entrada de formulario | 4-6s | Escribir + enviar |
| Formulario de varios campos | 8-12s | Múltiples entradas |
| Flujo de trabajo complejo | 15-20s | Varios sub-pasos |
| Estado de éxito | 3-5s | Deja que respire |
Consejos para Tutoriales Efectivos
- Una acción por escena — No apresures varios clics juntos
- Pausa en los resultados — Deja que los espectadores vean el resultado antes de continuar
- Resalta lo que cambia — Usa un brillo o escala sutil en los nuevos elementos
- Une la narración a la acción — El clic ocurre cuando el narrador dice "clic"
- Muestra toda la UI — El contexto ayuda a los usuarios a orientarse
- Termina con celebración — Los estados de éxito refuerzan la finalización
Tipo de Video: Promo para Redes Sociales
Objetivo: Captar la atención rápidamente con texto cinético audaz para anuncios y contenido social.
Estructura del Guión
GANCHO (1-3s)
Una sola palabra o frase poderosa que detenga el desplazamiento.
PROPUESTA DE VALOR (3-5s)
¿Qué hay para ellos? Una frase impactante.
RÁFAGA DE FUNCIONES (5-10s)
2-3 beneficios clave, rápidos.
CTA (2-3s)
Acción clara: "Descarga ahora", "Prueba gratis", URL
Estilo Visual
- Fondos mínimos: Colores sólidos o gradientes simples
- Máximo contraste: Fondo oscuro + texto blanco O fondo de color + texto blanco
- Revelaciones palabra por palabra: Cada palabra tiene su propio momento
- Transiciones de color: El color de fondo cambia entre escenas
- Formato cuadrado: 1080x1080 para Instagram/redes sociales
Patrones de Animación para Promos Sociales
- Impacto de palabra: Las palabras individuales aparecen con impacto (escala 1.2→1 + ligera vibración)
- Destello de fondo: Cambios de color instantáneos entre palabras/frases
- Escalado de texto: Las palabras crecen y luego se reducen para dar paso a la siguiente
- Movimiento mínimo: Deja que la tipografía audaz haga el trabajo
- Cortes rápidos: Máximo 0.5-1s por palabra/frase
Ejemplo de Plan de Escena
Guión: "We are ready."
Secuencia de escenas (4 segundos en total):
- Cuadro 1: Fondo negro, "WE" aparece con impacto en blanco (0.8s)
- Cuadro 2: Fondo blanco, "A" aparece en negro, centrado (0.8s)
- Cuadro 3: Fondo rojo, "R" se escribe, se convierte en "READY" (1.6s)
- Cuadro 4: Mantener el cuadro final (0.8s)
Guías de Duración
| Plataforma | Duración Ideal | Duración Máxima |
|---|---|---|
| Instagram Reels | 15-30s | 90s |
| TikTok | 15-60s | 3min |
| Twitter/X | 15-45s | 2min 20s |
| 30s-1min | 10min | |
| YouTube Shorts | 15-60s | 60s |
Tipo de Video: Presentación de App/Producto
Objetivo: Demostrar la interfaz de un producto con estilo cinematográfico, combinando texto y UI.
Estructura del Guión
GANCHO (3-5s)
Declaración del problema o pregunta intrigante.
PRESENTA EL PRODUCTO (5-10s)
Muestra el nombre/logotipo del producto, establece la marca.
RECORRIDO DE FUNCIONES (20-40s)
Recorre 3-5 funciones clave con demostraciones de UI.
RESUMEN DE BENEFICIOS (5-10s)
Resume lo que lo hace especial.
CTA (5s)
URL, insignia de la tienda de aplicaciones o próximo paso.
Estilo Visual
- Fondos con gradientes oscuros: Negro a púrpura/azul para productos tecnológicos
- Fondos con gradientes suaves: Pasteles (rosa, lavanda, menta) para apps amigables
- Maquetas de UI flotantes: Pantallas de apps en ángulos ligeros con sombras
- Texto cinético junto a UI: El texto aparece al lado o encima de la interfaz
- Interacciones con cursor: Muestra clics, desplazamientos, escritura dentro de la UI
Patrones de Animación para Presentaciones de App
...