Monólogo atractivo (16:9)
Referencia: Ali Abdaal, «How I'd Create Content in 2026 (If I Had To Start Over)» (youtu.be/A8PxRHQrLJ8, 16 min, 1080p).
El lenguaje de movimiento se copia de ese vídeo. El aspecto es el kit FringeLines v2.1:
My Drive/FringeLines Design System files/Fringe Lines Design system v2_1/ y los tokens en …/handoff/fringelines-tokens.css.
Qué hace que la referencia funcione
Medido del vídeo a 1 fotograma cada 2 s, más muestras densas alrededor de las transiciones.
- Alrededor del 55% de plano medio fijo. Una cámara fija, plano medio. Cortes cada ~5 s (mediana): unos 122 cortes en 16 min. Cada corte alterna entre plano general y zoom, por lo que los cortes se perciben como intencionados.
- Dos diseños, nunca más:
- Orador a pantalla completa con elementos superpuestos: tercios inferiores con nombre, tarjeta de llamada de color en la esquina superior izquierda con una pequeña etiqueta, frases serif blancas en la parte inferior, pequeños chips de color cerca de la cabeza y un CTA en la parte inferior central.
- Lienzo de papel. El orador se reduce a un PiP vertical (esquinas redondeadas, marco blanco, lado derecho, de aproximadamente 400×560) mientras se construye un gráfico sobre una página cálida de color blanco roto con un suave barrido. El lienzo contiene frases cinéticas, tarjetas de hoja de ruta numeradas, diagramas de píldoras, pirámides y capturas de pantalla o b-roll en tarjetas redondeadas con un pie de foto debajo.
- Sin subtítulos continuos. El texto en pantalla es elegido. Una frase a la vez, que se revela palabra por palabra al ritmo del discurso. Cada palabra comienza tenue y borrosa, luego se enfoca. La frase clave cambia de color.
- Los diagramas se construyen pieza por pieza a medida que se dice cada elemento. Las píldoras aparecen con un pequeño rebote. Las capas de la pirámide caen desde arriba.
- La cámara se mueve dentro de los gráficos. La hoja de ruta de 5 tarjetas vuelve en cada capítulo, se acerca a la tarjeta activa y desenfoca las demás.
- Las salidas se desenfocan en lugar de cortarse. El cambio de pantalla completa a PiP es una transición suave y rápida de aproximadamente 0,4 s.
- Ritmo: una nueva idea visual cada 10–20 s, un momento de énfasis (blanco y negro) por sección y un tercio inferior la primera vez que aparece cada persona.
- Sonido: soplidos suaves en los cambios de diseño y ligeros pops cuando los elementos aparecen, siempre por debajo de la voz.
Cómo se traduce a FringeLines (no te desvíes de esto)
| Referencia | Versión FringeLines |
|---|---|
| Serif cálido con detalles de coral | Instrument Serif para todo el texto mostrado. El detalle es un italic frase, tinta-azul #1A4F6B sobre papel o blanco sobre vídeo. Naranja #D4622A solo para el número que importa ([7 AM], la estadística). |
| Sans redondeado en píldoras | Archivo 500–600 para píldoras, chips, elementos de lista, etiquetas de pila |
| Etiquetas en versalitas | IBM Plex Mono 600, mayúsculas, +0,14em, ≥ 22 px: cejas, etiquetas de píldora, fuentes, metadatos |
| Llamadas con degradado coral/rojo | Degradados del kit: verde (por defecto), azul (segunda idea), naranja (advertencia o «error») |
| Tarjetas de hoja de ruta pastel | Lavados verde, azul y naranja, una insignia de número mono y un conector naranja discontinuo |
| Papel crema + barrido | Papel #F7F7F5 con un suave barrido de lavado verde |
| Sombras paralelas | Ninguna. Superficies planas, líneas finas de 2 px #E3E5DF, un marco blanco en el PiP, radio 16–18 |
| Píldora de patrocinio | Píldora CTA blanca (fringelines.co / newsletter) con una pestaña naranja mono «Enlace en la descripción» |
| Outro del canal | Tarjeta final verde, portada de Clip Slides: ceja mono, regla naranja, titular serif con una frase en italic, sub Archivo, ● fringelines.co |
Las reglas del kit siguen vigentes:
- una idea por pantalla;
- un naranja por pantalla;
- el verde es el color por defecto, el azul la comparación;
- cada estadística tiene un
source; - nada por debajo de 22 px.
Piezas
- Plantilla:
pipeline/remotion/src/Monologue.tsx, la composiciónMonologuea 1920×1080 / 30 fps. Reutiliza el seguimiento facial deShortV2.tsx. - Construcción:
pipeline/build_monologue.py, que tiene dos pasos,cutyrender. - Carpeta de trabajo:
work/monologue/<slug>/contieneclip.mp4,props.json,transcript.txt,beats.jsonyfaces.json. - Salida:
out/monologue/<slug>.mp4, normalizado a −14 LUFS. - Ejemplo de trabajo:
work/monologue/morning-loop-test/beats.json, un clip de 62 s de Quinn del episodio del 30 de octubre.
1. Obtener una toma
Una grabación de una sola cámara 16:9 con buen audio, una sola persona, de aproximadamente 1 a 15 min. Colócala en inbox/monologue/<slug>/take.mp4.
Para extraer un fragmento de un episodio, combina la cámara con su pista de sonido de estudio. Toma los desplazamientos del XML de Descript con build_short.xml_offsets; mira cómo se hizo morning-loop-test:
ffmpeg -ss <t0-videoOffset> -t <dur> -i Quinn.mp4 -ss <t0-audioOffset> -t <dur> -i studio-sound-Quinn.m4a -map 0:v -map 1:a … take.mp4
2. Cortar
~/.shorts-skill/bin/python pipeline/build_monologue.py cut --slug <slug> --src inbox/monologue/<slug>/take.mp4 \
[--range 12.0:95.5 --range 120:180] [--replace "gtm=>GTM" --replace "quick=>Quick"]
Lo que hace el paso de corte:
- Transcribe la toma con Whisper (almacenado en caché en
words-src.json). - Elimina muletillas, tartamudeos y pausas largas, usando el mismo planificador que los cortos.
- Alterna el zoom (1.0 / 1.12, centrado en la cara) en cada salto.
- Escribe
transcript.txt, conword@secondsen el reloj de corte.
--replace solo corrige las palabras usadas para sincronizar las revelaciones; no se añaden subtítulos automáticamente.
3. Escribir work/monologue/<slug>/beats.json
Lee transcript.txt y planifica los tiempos contra él.
{"brand": "FringeLines", "beats": [
{"type": "title", "at": 0.2, "end": 2.0, "eyebrow": "FringeLines · Monólogo", "text": "El *bucle matinal*"},
{"type": "name", "at": 2.1, "end": 5.4, "text": "Quinn", "role": "Presentador · Fringe Lines"},
{"type": "chips", "at": 3.0, "end": 7.4, "items": [{"text": "Bucles GTM", "at": 3.1}, {"text": "Bucles de código", "at": 5.1, "tone": "azul"}]},
{"type": "text", "at": 7.6, "end": 11.3, "eyebrow": "¿Qué es un bucle?", "text": "Un bucle es solo un *objetivo declarado* y luego funciona *autónomamente*"},
{"type": "callout", "at": 11.5, "end": 16.2, "label": "La configuración", "tone": "verde", "text": "Uso Quick Desktop con rutinas que se ejecutan en cualquier momento"},
{"type": "overlay", "at": 16.4, "end": 18.3, "text": "Normalmente lo ejecuto a las [7 AM]"},
{"type": "stack", "at": 22.4, "end": 36.4, "title": "Mi equipo principal · 4 personas", "items": [{"text": "Ejecutivo de cuentas", "at": 25.6}, "…"]},
{"type": "stat", "at": 51.2, "end": 55.1, "kicker": "Mi equipo de cuentas habitual", "value": 14, "text": "personas con las que interactúo regularmente", "source": "Recuento propio de Quinn · Fringe Lines, 30 oct 2026"},
{"type": "end", "at": 58.4, "end": 61.4, "text": "Construyendo el *bucle matinal*", "sub": "El tutorial completo está en el episodio de esta semana."}
]}
Tiempos
- Los tiempos están en segundos en el clip cortado.
end(ohold) cierra un tiempo, y su salida se desenfoca en 0,3 s. - El texto se revela palabra por palabra en sincronía con el discurso. Cada palabra de
textse compara con la transcripción dentro de la ventana del tiempo.- Cita al orador textualmente (se permiten recortes ligeros) para que funcione la sincronización.
- Si el texto es una paráfrasis, la revelación se distribuye uniformemente. Fuerza esto con
"reveal": "even".
- Los tiempos de los elementos
atpor defecto se escalonan uniformemente. Ajústalos al momento en que se dice cada elemento, aproximadamente 0,1 s antes de la palabra.
Formato
*destacado en cursiva*: una frase por pantalla.[número de acento]: naranja, uno por pantalla, solo números.
Tipos de tiempo
Orador a pantalla completa (superposiciones):
| tipo | campos | uso |
|---|---|---|
title | text, eyebrow? | Título de apertura sobre un marco atenuado (primeros 2–3 s) |
name | text, role? | Tercio inferior la primera vez que aparece una persona |
overlay | text | Una frase hablada en serif blanco en la parte inferior: la línea que quieres que se recuerde |
callout | text, label?, tone?, side? | Tarjeta de color en la esquina superior izquierda (o derecha) con una etiqueta mono: «Error #1», «La configuración», «Regla» |
chips | items[{text, at, tone?}], side?, tone? | 2–3 etiquetas cortas que aparecen junto a la cabeza: voz interior, nombres, opciones |
cta | text, sub? | Píldora inferior: el boletín, el episodio o la oferta. Una vez, normalmente a mitad del vídeo |
bw | (ninguno) | Énfasis en blanco y negro del orador; combínalo con un overlay |
media + "full": true | src, video?, from? | B-roll a sangre con el orador en el PiP |
Lienzo de papel (el orador se mueve al PiP):
| tipo | campos | uso |
|---|---|---|
text | text, eyebrow?, align? | Una frase cinética: definiciones, la tesis, la línea «más importante...» |
stack | items[{text, at, tone?}] (abajo→arriba), title? | Pirámide o capas: fundamentos → estrategia → recompensa, capas de equipo |
compare | title?, left{label, items}, right{label, items}, winner? | A vs B: hobby vs ingresos, antes vs después. El perdedor se vuelve gris hacia el final |
roadmap | items[{text}] (≤6), active?, zoom? | Los capítulos del vídeo. Muéstralo una vez al principio, luego reutilízalo por capítulo con active = el índice del capítulo y zoom = cuándo hacer zoom |
steps | items[{text, at}], title? | Una lista numerada con reglas finas: especialistas, herramientas, pasos |
stat | value, prefix?, suffix?, decimals?, kicker?, text, source | Un número que cuenta en naranja; se requiere fuente |
media | src, title?, meta?, video?, from? | Una captura de pantalla o b-roll en una tarjeta redondeada con un pie de foto (título + línea de metadatos mono). Los archivos van en la carpeta de trabajo |
end | text, eyebrow?, sub?, url?, tone? | La tarjeta final verde (2–4 s) |
Los tiempos de papel que están a menos de 0,7 s de distancia permanecen en el diseño PiP, para que el orador no rebote.
Reglas de ritmo (de la referencia)
- Abre con un
titley unname, ambos dentro de los primeros 5 s. - Los tiempos de papel ocupan entre el 35 y el 45 % del tiempo de ejecución. Nunca pases más de ~20 s sin un cambio visual, y nunca permanezcas en el papel más de ~15 s.
- Alterna los dos diseños. No pongas dos
calloutseguidos; pon untexto un diagrama entre ellos. - Una idea por tiempo. Mantén los tiempos
texten ≤ 14 palabras y los callouts en ≤ 16. - Los elementos del diagrama aparecen en la palabra, nunca todos a la vez. El primer elemento de un diagrama debe aparecer dentro de ~1 s desde que comienza el tiempo; de lo contrario, el tiempo comienza más tarde.
- Secciones:
- Muestra una
roadmapal final de la introducción. - Reutilízala al inicio de cada sección con
activeajustado. - Cierra cada sección con un
overlayde su línea clave, conbwpara la más importante.
- Muestra una
- Una
ctapor cada 5 min como máximo, nunca en los primeros 30 s. - Termina con la tarjeta
end. Puede continuar después de la última palabra.
Honestidad
- Los números en pantalla deben ser lo que se dijo, o provenir de una fuente nombrada en
source. - Las capturas de pantalla del contenido de otras personas necesitan crédito en
meta. - No pongas palabras en boca del orador: un tiempo
overlayotextque no sea una cita debe leerse como una etiqueta, no como un discurso.
4. Renderizar
~/.shorts-skill/bin/python pipeline/build_monologue.py render --slug <slug> [--sfx-db -22]
- Rastrea la cara una vez (
faces.json; bórralo si vuelves a cortar). - El tiempo de renderizado crece con la duración del vídeo; una prueba de 1 min tardó unos minutos en el Mac mini.
- Efectos de sonido: un soplo en cada cambio de diseño, un pop cuando aparece un elemento, un ascensor hacia el título y las tarjetas finales. Aumenta
--sfx-dbhacia −18 para más energía.
5. QA (siempre)
for t in 1.5 5 10 20 30 40 50 60; do ffmpeg -v error -y -ss $t -i out/monologue/<slug>.mp4 -frames:v 1 -vf scale=640:-1 /tmp/m_$t.png; done
Revisa cada una de estas:
- Texto: ningún texto se superpone al PiP (el área de papel termina en x = 1320). Las etiquetas de pila caben en una línea.
- Destacados: sin
*o[sueltos. Hay como máximo un naranja por pantalla. - Encuadre del rostro: el rostro está centrado en el PiP, y los zooms no cortan la cabeza.
- Sincronización de revelaciones: las revelaciones coinciden con la palabra hablada. Si un tiempo muestra palabras tenues durante mucho tiempo, su
ates demasiado temprano. - Volumen:
ffmpeg -i out.mp4 -af ebur128 -f null - 2>&1 | grep " I:"muestra aproximadamente −14.
Informa al usuario:
- la duración y la lista de tiempos (tiempo → tipo → texto);
- lo que aún necesita revisión: números, nombres y créditos de capturas de pantalla;
- cualquier tiempo que haya recurrido a una revelación uniforme, porque su texto no era textual.
No construido aún
- Una versión 9:16: la composición es solo 16:9. Para vertical, corta un corto con la skill
editorial-short. - Planificación automática: escribir
beats.jsones un juicio, por lo que se hace a mano o por Claude a partir detranscript.txt.