Contenido detallado
🗺️ Descripción general — intros, outros y lower-thirds
Las intros y outros son los primeros y últimos frames que ve el espectador. Una introducción débil pierde visualizaciones en los primeros 5 segundos. Un final sin llamada a la acción pierde suscripciones y clics. Estas plantillas resuelven ambos aspectos.
🎯 Concepto central
Todas estas plantillas usan el mismo patrón: spring() para entradas con física natural + interpolate() para salidas suaves. La diferencia está en el qué anima — texto, subrayados, anillos, partículas.
🎞️ cinematic-title-intro — spring + subrayado
O cinematic-title-intro es la plantilla de apertura más usada: el título sube con física de resorte (spring()), una línea secundaria se expande de izquierda a derecha y el subtítulo aparece con un fade in con delay. Resultado cinematográfico con ~50 líneas de código.
const titleY = spring({ frame, fps, from: 50, to: 0, durationInFrames: 40, config: { damping: 14, mass: 0.8 }, }); const underlineWidth = interpolate( frame, [20, 50], [0, 100], { extrapolateLeft: "clamp", extrapolateRight: "clamp" } ); const subtitleOpacity = interpolate( frame, [40, 60], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" } );
💡 Consejo práctico
Cambia el color de underline para el color de tu marca. Con una línea de cambio en el gradient tienes un intro completamente personalizado. Combínalo con fade-through-black antes para la entrada cinematográfica desde el negro.
⏱️ countdown-intro — ¡anillo 3-2-1-GO!
O countdown-intro usa un anillo SVG con strokeDasharray animado para mostrar el progreso de cada segundo, mientras el número del centro cambia de 3 → 2 → 1 → GO con spring de escala.
const circumference = 2 * Math.PI * 70; const ringProgress = (frame % fps) / fps; const dashOffset = circumference * ringProgress; // GO! com spring de escala const goScale = spring({ frame: Math.max(0, frame - totalCountdownFrames), fps, config: { damping: 8, stiffness: 100 }, }); // SVG: anel gira -90deg (topo = início) <svg style={{ transform: "rotate(-90deg)" }}> <circle stroke="#3b82f6" strokeDasharray={circumference} strokeDashoffset={dashOffset} /> </svg>
✓ Contextos ideales
- •Streams en vivo (intervalo antes del inicio)
- •Tutoriales técnicos con introducción enérgica
- •Videos de deportes, juegos y desafíos cronometrados
✗ Evita en
- •Contenido corporativo serio / formal
- •Videos emocionales o narrativos
- •Cuando el propio contenido ya tiene una introducción contundente
📋 lower-third — barra de nombre/título
O lower-third es el overlay clásico de TV: aparece una barra en el tercio inferior del frame con el nombre y el cargo o la función. Es el estándar en periodismo y entrevistas; en YouTube aporta un toque de profesionalismo.
La barra se desliza desde la izquierda
Un elemento translateX(-100% → 0) con spring entra desde el límite izquierdo del frame.
El texto aparece con retraso
El nombre y el cargo hacen opacity fade in después de que la barra esté visible — evita que el texto aparezca antes que el contenedor.
La barra sale hacia la izquierda
Cerca del final de la composición, la barra recorre el camino inverso con interpolate suave.
💡 Consejo práctico
Usa lower-third con <Sequence from={fps * 3} durationInFrames={fps * 4}> para mostrar la barra solo en un tramo determinado del video. El useCurrentFrame() dentro de la Sequence empieza desde cero, sin cálculos de offset manuales.
🔔 end-card + subscribe-reminder — conversión
O end-card muestra una tarjeta de call-to-action al final del video con botones para suscribirse. El subscribe-reminder es un overlay flotante que puede aparecer en cualquier momento; ambos son recursos de conversión para canales de YouTube.
// Aparece no frame 90, fica 3s, some const showAt = fps * 3; const hideAt = fps * 6; const opacity = interpolate( frame, [showAt, showAt + 10, hideAt - 10, hideAt], [0, 1, 1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" } ); const translateY = spring({ frame: Math.max(0, frame - showAt), fps, config: { damping: 12 }, from: 60, to: 0, });
✓ Buenas prácticas
- •Mostrar subscribe-reminder a la mitad del video
- •End-card de 20s de duración (estándar de YouTube)
- •Mantén el cloche visual breve y directo
✗ Errores comunes
- •Mostrar subscribe-reminder muy temprano (antes de 30s)
- •End-card con más de 4 elementos: confunde
- •Colores que entran en conflicto con el contenido de fondo
💬 quote-card + title-split — impacto visual
O quote-card muestra una cita con el autor destacado — ideal para videos de motivación, entrevistas y momentos destacados de clase. El title-split divide el título en dos bloques que se encuentran en el centro: un efecto dramático para las aperturas.
💡 title-split en la práctica
El truco de title-split es simple: dos spans, uno con translateX(-80 → 0) y otro con translateX(80 → 0), ambos animados con spring en el mismo frame. El encuentro en el centro crea una tensión visual que el espectador siente incluso sin notar el mecanismo.
const progress = spring({ frame, fps, config: { damping: 18, stiffness: 90 } }); // Metade esquerda vem da esquerda const leftX = interpolate(progress, [0, 1], [-80, 0]); // Metade direita vem da direita const rightX = interpolate(progress, [0, 1], [80, 0]);
📚 Biblioteca completa de Intro & Outro
Las 9 plantillas de esta categoría — referencia rápida:
📌 Resumen del módulo
Próximo módulo:
2.9 — Logo y branding: 9 animaciones de logotipo para identidad visual