)} // Los subtítulos normales se siguen mostrando encima del fondo oscuro {currentWord && !inCard && !inHook && (

{/* subtítulo word-by-word */}

)} ``` **Criterio para elegir entre Opción A y B:** - Hay b-roll contextual que encaja con la narración → usar b-roll (Opción A) - No hay b-roll adecuado, o el momento es muy verbal/filosófico → fondo oscuro (Opción B) - Momentos de "destruido", "difícil", "fracaso" → b-roll pesado o fondo oscuro - Nunca mezclar fondo oscuro con b-roll al mismo tiempo **Verificar archivos antes de incluir:** ```bash ffprobe.exe -v error -show_entries format=duration -of default=nw=1 archivo.mp4 # Si falla con exit code 1 → archivo corrupto, descartar y usar otro ``` **Criterio contextual de b-rolls:** - Relacionar el clip con lo que se narra en ese momento - No poner clips celebratorios en momentos negativos/de queja - No poner b-roll durante el hook --- ## 9. MARGEN SEGURO IG (1080x1920) ``` Top unsafe: 0 - 269px (14%) — UI bar Zona segura: 269 - 1536px Bottom unsafe: 1536 - 1920px (20%) — botones, caption Lados unsafe: 0 - 54px (5%) — cada lado ``` Checklist antes de renderizar: - [ ] Hook arriba: top >= 269px | Hook abajo: paddingBottom >= 384px - [ ] Subtítulos: top "70%" = 1344px desde arriba (576px desde fondo) OK - [ ] Color card centrado OK - [ ] Ningún texto a menos de 54px de los bordes laterales --- ## 10. ANIMACIONES Toda animación debe sentirse orgánica. Sin easing = movimiento robótico. Regla inamovible. ### Ease In/Out con interpolate ```tsx // Ease out (entra rápido, frena suave) — para entradas const opacity = interpolate(frame, [START, START + 12], [0, 1], { easing: Easing.out(Easing.ease), extrapolateLeft: "clamp", extrapolateRight: "clamp" }); // Ease in (arranca lento, termina rápido) — para salidas const slideOut = interpolate(frame, [EXIT, EXIT + 10], [0, -80], { easing: Easing.in(Easing.ease), extrapolateLeft: "clamp", extrapolateRight: "clamp" }); ``` ### Spring (para elementos UI — lo más natural) ```tsx const scale = spring({ frame, fps, from: 0.8, to: 1.0, config: { damping: 14, // más alto = menos rebote stiffness: 180, // más alto = más rápido mass: 0.8, }, }); ``` Valores de referencia: - Entrada suave: `{ damping: 18, stiffness: 120, mass: 1 }` - Pop snappy: `{ damping: 10, stiffness: 220, mass: 0.6 }` - Rebote notorio: `{ damping: 6, stiffness: 200, mass: 0.8 }` ### Graph Editor mental (control milimétrico de velocidad) ```tsx // Movimiento que arranca rápido, se frena a la mitad y aterriza suave const y = interpolate( frame, [0, 4, 10, 18, 24], // keyframes [80, 20, 8, 2, 0], // valores en px { extrapolateLeft: "clamp", extrapolateRight: "clamp" } ); // Cada par de puntos define un segmento de la curva de velocidad ``` ### Entrada estándar de elementos de texto ```tsx function entryAnimation(frame: number, startFrame: number) { const f = frame - startFrame; return { opacity: interpolate(f, [0, 10], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }), transform: `translateY(${interpolate(f, [0, 12], [20, 0], { easing: Easing.out(Easing.ease), extrapolateLeft: "clamp", extrapolateRight: "clamp", })}px)`, }; } ``` --- ## 12. ESTRUCTURA COMPOSICIÓN ```tsx // Orden de capas (de abajo hacia arriba): {/* 1. Video principal con zoom */} {/* 2. B-rolls silenciados */} {/* 3. Música segmentada */} {/* 4. SFX flash inicio */} {/* 5. Subtítulos + hook + color card — siempre encima */} ``` --- ## 13. RENDERIZAR ```bash npx remotion render [CompositionId] out/[nombre]-final.mp4 ``` Si falla con un b-roll: `Invalid data found when processing input` → verificar con ffprobe, remover el corrupto y reemplazar.