Mapa de la ruta
Contenido detallado
📺 Apertura de canal
Un bumper completo de 10–15 s que combina animación del logo (T2), fondo starfield/gradiente, entrada del título con división del texto y transición cinemática al contenido principal.
Un Series con 4 escenas secuenciales: fondo animado (starfield), animación del logo, entrada del título y transición de salida.
La estructura de apertura se puede reutilizar en cualquier canal — cambia el logo y los colores y estará listo.
Series · AbsoluteFill · capas de escena.
templates/starfield.tsx y gradient-shift.tsx componen el fondo que permanece durante toda la apertura.
Los fondos animados dan profundidad sin necesidad de una cámara real: son puramente computacionales.
random con seed · ciclos con interpolate · AbsoluteFill en z=0.
templates/logo-spin-reveal.tsx ou logo-stroke-draw.tsx — el logo aparece girando o dibujándose.
La entrada del logo es el momento de identidad de la marca; un spring bien calibrado marca la diferencia visual.
spring · SVG stroke-dashoffset · timing de 0–30 frames.
templates/cinematic-title-intro.tsx ou title-split.tsx — el nombre del canal aparece en fragmentos o de forma cinematográfica.
El título y el tagline son la segunda capa de identidad; la animación debe tener carácter.
stagger por letra · translateY + opacity · esperar a que el logo termine con Sequence from.
templates/iris-transition.tsx ou fade-through-black.tsx — la apertura se cierra con elegancia antes de que empiece el contenido.
La transición conecta la apertura con el contenido sin un corte brusco — eso es lo que diferencia lo amateur de lo profesional.
clip-path animado · opacidad hacia negro · timing en los últimos 15 frames.
El componente raíz usa Series para colocar el fondo + el logo + el título + la transición en secuencia, sin calcular offsets manualmente.
Series elimina la aritmética de offsets y mantiene el código legible cuando hay 4+ escenas.
Series.Sequence · durationInFrames por escena · el orden = el tiempo.
🛍️ Video de producto
Un video de 30–60 s que muestra un producto con movimiento ken-burns, identifica el nombre y el precio con un lower-third animado, muestra una comparación y termina con un CTA en una end-card.
Secuencia: Hero (ken-burns), Identidad (lower-third), Comparación (split-screen), Números (stat-counter), CTA (end-card).
Los videos de producto siguen una estructura persuasiva comprobada: aprender este orden es aprender marketing visual.
Series · props de datos · reutilización entre SKUs.
templates/ken-burns.tsx — la imagen del producto se acerca lentamente mientras se desplaza, creando un movimiento cinematográfico con una foto estática.
Ken-burns transforma cualquier foto fija en una escena dinámica: es la técnica más usada en videos de comercio electrónico.
scale + translateX/Y mediante interpolate · overflow hidden · easing suave.
templates/lower-third.tsx — franja animada en el tercio inferior con el nombre y el precio del producto que aparecen deslizándose.
Los lower-thirds son el pan de cada día de cualquier producción profesional — reutilizables en cualquier producto.
translateX desde fuera de la pantalla · Sequence from para aparecer después del ken-burns · props de texto.
templates/image-comparison-slider.tsx ou split-screen.tsx — divide el cuadro para mostrar dos estados del producto.
Las comparaciones visuales son poderosas para mostrar una transformación (antes/después) o las diferencias del producto.
clip-path animado · línea divisoria · timing para revelar lentamente.
templates/stat-counter.tsx — números animados desde 0 hasta el valor final (ej.: «4.8★ · 12k avaliações»).
Los números animados captan la atención y validan socialmente el producto; son más persuasivos que el texto estático.
Math.floor(interpolate) · formato con toLocaleString · Easing.out.
templates/end-card.tsx — última escena con URL, código QR o botón animado que dirige al espectador.
Sin call-to-action, el video pierde conversiones. El end-card garantiza que el último frame tenga un propósito.
scale spring · texto de acción · logo en la esquina inferior.
📈 Data-Story
Un video que cuenta una historia con datos: gráficos animados, contadores, comparaciones y texto destacado — todo orquestado para guiar al espectador por la narrativa de los números.
Escenas: Contexto (el problema) → Dato central → Comparación → Tendencia (línea de tiempo) → Conclusión.
Los datos por sí solos no convencen: el orden de las escenas crea la narrativa que hace memorable la cifra.
ritmo de 5–8 s por escena · texto + dato juntos · transición suave entre gráficos.
templates/chart-animation.tsx ou line-chart.tsx — las barras o líneas crecen para revelar los datos progresivamente.
Un gráfico estático es aburrido; al crecer frame a frame, guía la mirada del espectador hacia el dato más importante.
height/width vía interpolate · retraso escalonado entre barras · la etiqueta aparece cuando la barra llega.
templates/donut-chart.tsx — segmentos animados mediante SVG stroke-dasharray, que muestran los porcentajes de forma visual.
Las proporciones son más fáciles de asimilar visualmente en un gráfico de dona que en texto: es el lenguaje natural de los datos.
stroke-dasharray · stroke-dashoffset animado · leyenda de color.
templates/stat-counter.tsx + text-highlight.tsx — el número «cuenta» hasta el valor final mientras el texto aporta contexto.
El número animado es el ancla emocional: el espectador se fija en él. El texto destacado refuerza el mensaje.
interpolate con Math.round · background highlight mediante width animada · timing sincronizado.
templates/comparison-chart.tsx — dos columnas crecen juntas, haciendo que la diferencia sea visualmente evidente.
La comparación es el argumento más sólido en data-story; el gráfico debe revelar la diferencia de forma dramática.
stagger entre las dos barras · color contrastante · etiqueta de diferencia porcentual.
Overlap de opacidad entre escenas — la escena A hace fade-out mientras la escena B hace fade-in, creando un dissolve suave.
En data-story, los datos necesitan fluir: los cortes secos rompen el ritmo analítico de la narrativa.
Sequence con overlap · dos interpolates de opacidad · duración de transición de 10–15 frames.
📱 Reels / Shorts
Un video vertical 9:16 (1080×1920) para Instagram Reels o YouTube Shorts — ritmo rápido, textos impactantes, fondo vibrante y recordatorio para suscribirse, todo en 30–60 s.
Composition con width:1080, height:1920 — todo se lee mediante useVideoConfig para que los componentes se adapten automáticamente.
El formato 9:16 cambia las proporciones de todo: fuentes más grandes, menos texto por escena y márgenes laterales más estrechos.
useVideoConfig · width/height dinámicos · centrado vertical.
templates/typewriter-subtitle.tsx o bounce-text.tsx — el texto aparece letra por letra o con cada palabra saltando.
El 85% de los Reels se ve sin sonido; los subtítulos animados son el audio visual que mantiene al espectador mirando.
slice por palabra · stagger por frame · fuente grande (mín. 60px en 1080px).
templates/glitch-text.tsx — la palabra clave del Reel parpadea con un desplazamiento de color durante algunos fotogramas, creando impacto.
El glitch llama la atención durante los primeros 3 segundos: el algoritmo de Reels mide la retención y el inicio es crucial.
random con seed · translateX corto · duración de 2–4 frames por glitch.
templates/sound-wave.tsx — barras de onda animadas que pulsan al ritmo del contenido y le dan energía al video.
Las ondas sonoras crean la sensación de que hay música incluso sin sonido — una señal visual que remite a contenido energético.
Math.sin para oscilación · random seed por barra · tamaño relativo al height.
templates/bokeh-circles.tsx — círculos desenfocados que flotan y simulan un fondo con profundidad de campo fotográfica.
El bokeh le da sofisticación al fondo sin necesidad de una cámara; el texto en primer plano se destaca de forma natural.
filter blur · opacity variable · translateY lento para flotar.
templates/subscribe-reminder.tsx — animación de campana + «Suscríbete» que aparece en los últimos 5 segundos del Reel.
El recordatorio para suscribirse en el momento adecuado aumenta la conversión sin parecer spam: es cuestión de timing, no de intromisión.
Secuencia from=totalFrames-150 · animación shake · spring de entrada.