Tu propia app de subtítulos animados.

Quiero que me crees mi propia herramienta de subtítulos animados para reels: una app web de un solo archivo HTML que funcione en el navegador, gratis, sin claves de API y sin subir mi video a ningún servidor.

Actúa como especialista en desarrollo web y diseño de interfaces. No sé programar: explícame cada paso en lenguaje simple.

1. Antes de empezar

Hazme en un solo mensaje estas preguntas:

¿Cómo se llama mi herramienta?

¿Cuáles son mis colores de marca?

¿Qué tipografías quiero usar? Te adjunto los archivos.

¿Cómo es mi subtítulo favorito: tamaño, color, palabra resaltada, sombra o brillo?

¿En qué formato publico más: 9:16, 4:5 o 16:9?

Usa mis colores y mis tipografías en la interfaz y en el estilo con el que arranca la herramienta.

2. Cómo trabajamos

Constrúyela por etapas. Al terminar cada una, pruébala tú con un video real, ábremela servida en localhost (nunca como archivo suelto) y dime qué tengo que hacer para probarla. Espera mi visto bueno antes de pasar a la siguiente.

3. Etapa 1: transcribir y editar

Subo un video o un audio y se transcribe en español con Whisper dentro del navegador (Transformers.js, modelo whisper-small). Mientras transcribe, muestra un reloj corriendo.

Agrupa las palabras en frases cortas. Opciones: hasta 3 palabras, hasta 4 o el número que yo elija. Corta también en las pausas y en la puntuación. Una casilla para quitar los puntos.

Lista de frases editable: corregir el texto, unir, partir, borrar y deshacer.

Lo más importante: el tiempo vive en la frase y las palabras se reparten dentro de ella. Así, si corrijo una palabra, la animación palabra por palabra nunca se rompe.

Cada frase tiene su entrada y su salida en MM:SS,mmm. Puedo escribirlas, moverlas con las flechas del teclado (0,05 s y con Shift 0,5 s), fijarlas con "Entra aquí" y "Sale aquí" desde el instante del video y oír solo esa frase con un botón Reproducir.

Los tiempos son libres: si dos frases se pisan, se ven las dos a la vez.

Vista previa sobre mi video con sonido y controles: reproducir, 5 segundos atrás y adelante, barra, reloj y silenciar.

La pantalla no se mueve: el reproductor queda fijo a la izquierda y lo que se desplaza es la lista de frases a la derecha.

4. Etapa 2: estilo y animación

Tipografía: mis fuentes subidas, que quedan guardadas dentro del proyecto, y una buena lista de Google Fonts. Tamaño, grosor, interlineado, espacio entre letras y mayúsculas.

Palabra resaltada con su propia fuente, color y tamaño. La marco con *asteriscos*, tocando las palabras una por una o en automático: una por frase, la de más peso.

Sombra, brillo y borde de letra, cada uno con su interruptor, color y opacidad. Opción de oscurecer los bordes del video solo mientras hay subtítulo.

Reparto de líneas: automático, una línea, dos líneas, una palabra por línea y escalera hacia la derecha o hacia la izquierda. Con "/" corto la línea donde yo quiera.

Animaciones: las palabras se van sumando, o salen una a la vez (entra, sale y le da el turno a la siguiente). Como mínimo pop, subir, fundido y escala, con un control de ritmo. Efectos en bucle: flotar y un borde hecho a mano que tiembla como animación cuadro a cuadro.

Formatos 9:16, 4:5, 1:1 y 16:9, con la zona segura de Instagram (Reel y Story, Feed o ninguna). Si el texto no cabe en la zona segura, se le achica la letra hasta que entre.

5. Etapa 3: exportar y guardar

Generar el MP4 con mi video, los subtítulos y el audio original (WebCodecs y mp4-muxer, sin servidor).

Exportar solo el texto sobre fondo verde, para montarlo en CapCut.

Descargar los subtítulos en .srt y el texto en .txt.

Guardar y abrir el proyecto en un .json con las frases, los ajustes y mis fuentes. El video se vuelve a subir.

6. Etapa 4: ubicación inteligente

Detecta mi silueta y mi cara con MediaPipe (selfie multiclass) y ofrece estas ubicaciones:

Fija: arriba, en el medio o abajo.

A mano: arrastro la frase en la vista previa y se queda donde la suelte.

Que no me tape la cara: el bloque de texto se mueve a donde yo no esté.

Alrededor de mi cabeza: las palabras sueltas aparecen rodeándola, sin tocarla.

Una por línea junto a mi cara: cada palabra en su renglón, a un lado y al otro, sin caer sobre mi cara.

La lectura de la silueta arranca sola en cuanto elijo una ubicación automática. Muéstrame el cuadro de la cara detectada para moverlo o agrandarlo si se equivoca, y déjame arrastrar palabras sueltas.

7. Etapa 5: control fino

Todo lo general se puede cambiar por frase: animación, ubicación, tamaño, ritmo, alineación, altura y reparto de líneas. Si selecciono un tramo (clic en la primera frase y Shift+clic en la última), el cambio se aplica a todas.

Una línea de tiempo con cada frase como barra: arrastro el centro para moverla y los bordes para cambiar cuánto dura. Las que se pisan van en carriles distintos. Con zoom y la opción de verla a todo lo ancho.

Botones para agrandar la pantalla del reproductor.

8. Diseño de la interfaz

Con mi identidad: mis colores y mis tipografías.

Limpia: nada de párrafos de instrucciones en pantalla. Si algo necesita explicación, aparece al pasar el ratón.

Ningún control va solo con icono: cada botón lleva su palabra.

Iconos dibujados en SVG, nunca emojis.

9. Notas técnicas para que no falle

Whisper corre en un Web Worker para que la página nunca se congele. Usa no_repeat_ngram_size y limpia cualquier palabra repetida en racha, porque Whisper a veces se traba repitiendo "no, no, no".

Sirve la herramienta en localhost con los encabezados Cross-Origin-Opener-Policy: same-origin y Cross-Origin-Embedder-Policy: credentialless. Así la transcripción usa varios núcleos y la exportación de video funciona.

Al leer la silueta, pide cada cuadro a mitad de cuadro y con el tiempo siempre creciente. Guarda las posiciones en proporciones de 0 a 1, para que cambiar de formato no obligue a leer el video otra vez.

La ubicación de cada frase se calcula con todos sus momentos juntos, para que el texto no baile dentro de la misma frase.

Una opción que depende de un paso previo da ese paso sola o lo avisa, nunca se queda callada.

Empieza ahora con las preguntas. Todavía no escribas código.