skill-texto - capa de texto para video (Remotion)

Kit reutilizable y sin marca para poner texto sobre video en Remotion: los subtítulos (karaoke), el resaltado de palabras clave y los efectos de texto animado. Todo lo visual (color de acento, color base, fuentes, posición, tamaño) entra como parámetro, no está hardcodeado - por eso funciona para cualquier proyecto.

Alcance estricto: SOLO texto. Este skill no corta video, no toca la cámara, no pone SFX ni música, no dibuja gráficos de marca ni stickers. Si el video necesita eso, es trabajo de otro skill; aquí solo llega el clip ya montado y le ponemos la capa de texto encima.

Los componentes listos para copiar están en references/components.md. Copia el que sirva a src/ de tu proyecto Remotion y pásale tus props (colores/fuente).

Doctrina de captions (arranca por aquí)

Un caption bien hecho se lee sin sonido y no cansa. Reglas base (todas aplican salvo que el proyecto pida lo contrario):

• UNA palabra por chunk. Cada palabra hace su pop y entra con la voz. En tramos de habla muy densa se permiten 2, pero el default es 1.
• Case natural, NUNCA TODO MAYÚSCULAS. Se escribe como se habla: minúsculas, con mayúscula solo donde la gramática la pide (inicio, nombres propios, marcas). El bloque todo-mayúsculas se ve barato.
• Sin puntuación. Nada de puntos, comas ni signos, salvo que el énfasis lo amerite.
• SIN FONDO. Nada de caja, pill ni scrim detrás del texto. La legibilidad sale del contorno + sombra, no de un rectángulo:

  WebkitTextStroke: "2.5px rgba(0,0,0,0.6)",
  paintOrder: "stroke",
  textShadow: "0 4px 18px rgba(0,0,0,0.55)",

• Palabra clave diferenciada. La palabra importante va en el color de acento y/o una tipografía distinta y más grande (~1.3x) con una micro-rotación (rotate(-1.5deg)). El resto en el color base.
• Una tipografía base por video. Si cambias de fuente, cámbiala completa; no mezcles tres. La keyword sí puede usar una segunda fuente (esa es la excepción).
• Pop de entrada de cada palabra con spring, no un fade plano.

Input esperado

El componente de captions espera un array de palabras con tiempos, p. ej.:

[
  {"word": "esto", "start": 0.42, "end": 0.61},
  {"word": "cambia", "start": 0.61, "end": 0.95, "hot": true},
  {"word": "todo",  "start": 0.95, "end": 1.30}
]

start/end en segundos; hot: true marca la palabra clave. Cómo obtener esos tiempos (Whisper con word-timestamps, corrección de onsets, etc.) NO es parte de este skill: aquí solo se renderiza. Si te pasan el JSON, listo; si no, pídelo o deriva la transcripción al skill de edición que corresponda.

Catálogo de efectos de texto

Traducidos a Remotion (varios vienen de Teo Visuals / Mateo Escobar, que los enseña en Premiere). Van SOLO en keywords y reveals, nunca en cada palabra del karaoke corrido (si se abusan, pierden el efecto). Todos actúan sobre el TEXTO, nunca sobre el video.

1. Shine / glow (ShineText). Barrido de brillo que cruza la palabra una vez (background-clip: text + backgroundPosition animado) + glow ambiente con textShadow del MISMO color del texto, blur alto, opacidad ~10-15%. Para el reveal grande y palabras hot.
2. Entrada corta + easing + motion blur (SlideIn). La regla clave de una entrada cinemática: recorrido CORTO (~40-80px, que no venga de lejos), velocidad con easing (arranca rápido y desacelera, nunca lineal) y motion blur durante el movimiento (@remotion/motion-blur <Trail> o blur() proporcional a la velocidad). Regla: largo + lineal + sin blur = robótico; corto + eased + con blur = cinemático.
3. Palabra clave DETRÁS del sujeto (TextBehindSubject). El texto gigante va en una capa detrás del recorte (cutout con alpha) del sujeto, de modo que su cabeza/hombros lo tapen. Da profundidad y se ve caro. Solo es orden de capas: [fondo] -> [texto gigante] -> [sujeto con alpha] -> [captions]. Necesita el cutout con alpha ya generado (video con canal alpha o secuencia PNG); generarlo es de otro skill.
4. Reveal grande (RevealText). El concepto central recibe su propio plano: tipografía enorme, entrada blur+escala con spring. Combínalo con ShineText.
5. Inicial decorativa (DecoInitial). La PRIMERA letra de la keyword en una fuente script/decorativa y el resto en la base bold. Personalidad sin perder legibilidad. Solo en keywords.
6. Flicker de entrada (Flicker). Parpadeo corto de opacidad antes de asentar. Solo para textos de hook y con moderación.

Cómo usarlo

1. Ten un proyecto Remotion con la composición del video ya montada (o crea una vacía del tamaño del video: vertical 1080x1920 30fps es lo típico de reels).
2. Copia de references/components.md los componentes que necesites a src/.
3. Registra las fuentes (@remotion/google-fonts o @font-face) y pasa tus colores/fuente como props - no hay colores hardcodeados.
4. Monta <Captions words={...} accent="#TU_ACENTO" base="#TU_BASE" font="Tu Fuente"/> como capa global (usa frame global para cubrir todo el video), y encima los efectos puntuales dentro de <Sequence from={...}> donde correspondan.
5. QA por frame (npx remotion still ... --frame=N) antes de renderizar.

Reglas firmes

• Solo texto. No agregues SFX, cortes, gráficos de marca ni toques la cámara desde este skill.
• Nada hardcodeado de marca. Color de acento, color base, fuentes y posición son props. Si un proyecto tiene su paleta, se la pasas; el skill no la asume.
• Sin fondo detrás del texto. Legibilidad por contorno + sombra.
• Efectos = keywords/reveals, no el karaoke corrido.
• Sin emojis en el texto renderizado (a menos que el proyecto lo pida explícito).</content>