sangbiaolaoda-arch/remotion-srt-workflow

Flujo de trabajo de animación Remotion con SRT

Convierte un guión SRT (locución oral) en un vídeo animado 2D renderizado con Remotion. Este flujo ha sido completamente verificado en un proyecto real de 81 frases / 193 segundos / 35 actos (incluyendo 12 renderizados y 11 errores reales detectados por las compuertas de validación).

Cuándo usarlo

• El usuario proporciona un archivo SRT / guión / texto de locución y necesita un "vídeo explicativo con imágenes"
• Ya existe un proyecto Remotion y se necesita añadir o modificar actos
• Revisar la calidad final de un proyecto Remotion de otro

Principios básicos (no cumplirlos = fracaso)

1. Límite de evidencia: No inventar acciones ya ejecutadas. Las conclusiones se dividen en tres categorías: "hechos verificados / sugerencias de diseño / asuntos no verificados".
2. No saltar compuertas: Al final de cada etapa hay una compuerta G. No avanzar sin confirmación del usuario. El usuario responde "continúa" = autorización para la compuerta actual.
3. Todo de una vez: Cuando el usuario solicita explícitamente una entrega continua ("¿No puedes hacerlo todo de una vez?"), completar todos los actos restantes de una sola vez. La compuerta de validación se aplica automáticamente; no dividir en múltiples rondas de espera.
4. Determinismo de fotogramas: La línea de tiempo solo usa fotogramas como unidad. Prohibido: CSS animation/transition/@keyframes/Tailwind animate-*, setTimeout para la línea de tiempo; Random debe usar una semilla fija.
5. Espaciado de texto según caja de línea: Las fuentes CJK (Noto Serif SC, etc.) tienen una caja de línea de ~1.44 em. El texto visualmente no superpuesto puede superponerse al medirlo. Dejar un margen de ≥0.3 em entre bloques de texto y ≥1.55 em para texto vertical.
6. Cero signos de puntuación en el texto visual: Los signos de puntuación del SRT se convierten en espacios en la capa de renderizado. No se requiere modificar el archivo fuente.

Resumen del flujo

Etapa	Producto	Compuerta
S0	Evaluación de viabilidad (clasificación / ruta técnica / tabla de riesgos / brechas en el Brief), sin código ni descarga de activos	G0 El usuario define la ruta
S1	Inicialización del proyecto: npm instalar el ecosistema Remotion, fuentes en public/fonts/, tsconfig, Root	—
S2	brief.md + beat-sheet.md (frase → acto, límites de fotogramas derivados del SRT) + style-guide.md + 3 styleframes renderizados reales	G1 Dirección visual
S3	assets.md planificación de activos (lista de elementos gráficos + parámetros + riesgos; priorizar SVG 100% programático, cero compras externas)	G2 Confirmación combinada
S4	storyboard.md storyboard por acto (límites de fotogramas / visual principal / movimiento principal / justificación de transición / puntos de anclaje para verificación de silencio)	G3 Confirmación combinada
S5	Slice vertical: seleccionar 3–4 actos con mayor densidad de datos, renderizar real + QA de extracción de fotogramas	G4 Muestra
S6	Completar todos los actos (se puede hacer de una vez), cada acto pasa por la compuerta de validación	—
S7	Renderizado completo + verificación de cinco niveles + entrega	G5 QA → G6

Todos los archivos de estado se guardan en disco (brief / beat-sheet / style-guide / assets / storyboard / progress / findings). Las tareas largas usan los archivos como fuente de verdad.

Manual detallado (leer según sea necesario)

• references/workflow.md — Detalles operativos de cada etapa, métodos de recálculo numérico, estándares de verificación bibliográfica
• references/qa-gates.md — Principios de la compuerta de validación de superposición, blackframe, contact print, comandos de extracción de fotogramas, reglas de rango de renderizado
• references/remotion-rules.md — Reglas estrictas de Remotion y problemas encontrados en pruebas reales (fotogramas negros en espacios entre actos, carga de fuentes, posicionamiento absoluto, etc.)
• assets/OverlapAudit.tsx — Capa de auditoría de superposición de texto fotograma a fotograma, lista para copiar directamente al proyecto. Montar en la capa superior de la Composition principal.

Inicio rápido en 10 minutos

1. npm i remotion @remotion/cli @remotion/bundler react react-dom typescript (+ @remotion/renderer)
2. Fuente CJK: cp /c/Windows/Fonts/NotoSerifSC-VF.ttf public/fonts/ (un solo archivo de fuente variable que cubre todos los pesos, licencia SIL OFL para uso comercial). Cargar localmente con staticFile() + FontFace + delayRender/continueRender. Prohibido Google Fonts en línea.
3. Copiar assets/OverlapAudit.tsx a src/audit/. Montar en la capa superior de la Composition principal.
4. Siguiendo S2, crear el beat-sheet. Los límites de fotogramas se escriben en la única fuente de verdad: src/acts/acts.ts.

Comandos de renderizado (verificados localmente)

npx remotion render src/index.ts Main out.mp4 --codec h264 --crf 18 --frames=START-END --log=error
npx remotion still src/index.ts Main out.png --frame=N          # Verificación de un solo fotograma
npx remotion browser ensure                                     # Descargar Headless Shell por primera vez

Referencia de velocidad de renderizado: Efectos complejos en 1080p ≈17–27 fps (película completa de 5810 fotogramas ≈3–6 minutos).