carrusel

Image carousel (Carrusel de imágenes)

El estilo proviene de los carruseles de referencia:

• Sin presentadores: los carruseles nunca usan imágenes o fotos de los anfitriones. Solo usan texto, gráficos que construimos e imágenes no personales como gráficos y capturas de pantalla.
• Diapositivas de foto: una imagen a sangre completa oscurecida en la parte inferior, con un titular pesado en MAYÚSCULAS condensadas. Las palabras clave están en el color de acento.
• Portada: una regla delgada con un "kicker" de marca.
• Diapositivas de solo texto: degradado oscuro, título en color de acento, subtítulo blanco en negrita, cuerpo regular. El tipo es deliberadamente más grande que la referencia (título 92, subtítulo 60, cuerpo 52 px a 1080 de ancho).

Componentes:

• Plantilla: pipeline/remotion/src/Carousel.tsx, la composición Carousel de Remotion, renderizada como imágenes fijas.
• Construcción: pipeline/build_carousel.py.
• Cada carrusel vive en su propia carpeta carousels/<slug>/ con un archivo carousel.json y una subcarpeta images/.
• Salida: out/carousels/<slug>/01.png … más <slug>.pdf, que está listo para subir como una publicación de documento de LinkedIn.

1. Planificar la historia (7–10 diapositivas)

1. Portada: una promesa o una brecha de curiosidad, por ejemplo "5 señales de IA de esta semana que la mayoría de los equipos están pasando por alto" o "Buenas noticias de todo el mundo de las que nadie habla". Escríbelo en 8–14 palabras.
2. Una idea por diapositiva: un hecho, una conclusión o un paso. El titular debe tener sentido sin un pie de foto.
3. Mezcla los tipos de diapositiva. No pongas tres fotos o tres diapositivas de texto seguidas. Patrón típico: portada → foto → foto/gráfico → gráfico → texto → foto → texto → CTA.
4. CTA al final: "Sigue a Fringe Lines", "Guarda esto para tu próxima reunión de planificación".

Acentos: envuelve 1–4 palabras por titular en *…*, normalmente el sujeto o el número. Usa como máximo dos grupos de acento por diapositiva.

2. Visuales: sin presentadores, nunca

Los carruseles nunca muestran a los anfitriones o invitados. Eso significa que no hay marcos de cámara, primeros planos ni "foto de la persona hablando", ni siquiera borrosa. Cada diapositiva se construye a partir de texto, gráficos que creamos e imágenes no personales.

Las imágenes van en carousels/<slug>/images/. Fuentes, en orden de preferencia:

• Gráficos que construimos:
  • diapositivas graphic (estadística / personas / líneas / cita / titular / lista de Graphics.tsx);
  • una cover tipográfica, que no necesita imagen;
  • una cover con una tarjeta graphic;
  • un PNG de infografía terminado colocado como diapositiva image (ver la habilidad de infografía).
• Comparticiones de pantalla de episodios: gráficos, diapositivas y pantallas de producto, nunca la cámara.
  • Captura con ffmpeg -ss <seg> -i "<raw>/Pantalla de Quinn-3.mp4" -frames:v 1 -vf "crop=iw:ih*0.895:0:ih*0.105" images/grafico.png; el recorte elimina el marco del navegador.
  • Recorta a la parte relevante, muéstralo con fit: "contain" y acredita al editor original del gráfico.
  • Para una publicación comercial, considera redibujar gráficos de terceros como gráficos lines o stat propios a partir de los números subyacentes.
• Imágenes no personales del usuario: capturas de pantalla de productos, logotipos, fotos de lugares u objetos que proporcionen.
• Imágenes generadas por IA o de stock: solo cuando el usuario lo solicite.
  • Sin personas reales (incluidos los anfitriones) ni "fotos" falsas de eventos reales.
  • Acredita las fotos de stock y solo usa las que tengan licencia.

Las citas están bien como texto (gráfico quote, atribuido por nombre). Simplemente no las combines con la imagen del orador.

3. Escribir carousels/<slug>/carousel.json

{
  "brand": "Fringe Lines",
  "accent": "#FF5A1F",
  "slides": [
    {"type": "cover", "kicker": "Fringe Lines · Oct 30",
     "headline": "*5 señales de IA* de esta semana que la mayoría de los equipos están pasando por alto"},
    {"type": "cover", "kicker": "Fringe Lines", "headline": "Ingresos arriba. *Plantilla sin cambios*",
     "graphic": {"type": "lines", "series": [{"label": "Ingresos", "shape": "up"}, {"label": "Plantilla", "shape": "flat"}]}},
    {"type": "photo", "image": "images/caballos.jpg", "focus": [0.4, 0.4], "credit": "Foto: …",
     "headline": "Los *caballos de Przewalski* han regresado a la naturaleza después de décadas de *conservación*"},
    {"type": "photo", "image": "images/grafico.png", "fit": "contain", "credit": "Gráfico: …",
     "headline": "Los *ingresos de Microsoft siguieron subiendo* mientras la plantilla se mantuvo estable"},
    {"type": "graphic", "headline": "La S-1 de Anthropic, *en un número*",
     "graphic": {"type": "stat", "kicker": "Retención de ingresos netos", "value": 900, "suffix": "%", "label": "…"}},
    {"type": "text", "number": "04", "title": "Realizar una Revisión Post-Acción",
     "subtitle": "El Ejército de EE. UU. termina cada ejercicio con cuatro preguntas:",
     "body": "Qué se suponía que iba a pasar, qué pasó realmente, por qué y qué cambiar la próxima vez."},
    {"type": "cta", "headline": "Sigue a *Fringe Lines*", "sub": "Nuevos episodios cada semana"}
  ]
}

tipo	campos	notas
cover	headline, kicker?, graphic?, image?, focus?	El kicker se sitúa entre dos reglas; "SWIPE →" abajo a la derecha. Sin image: una portada oscura con brillo de acento que es solo texto (titular más grande) o tiene una tarjeta graphic encima del titular. image es solo para fotos no personales
photo	image, focus?, fit?, headline, credit?	Sin personas. focus = [x, y] 0–1, la parte de la imagen que se debe mantener. Usa fit: "contain" para gráficos y capturas de pantalla (imagen completa sobre una copia borrosa de sí misma)
text	title, subtitle?, body?, number?	Tipo grande. El texto del cuerpo debe tener entre 20 y 45 palabras; el texto más largo se encoge ligeramente, así que divídelo en diapositivas
graphic	graphic, headline?, credit?	Cualquier tipo de Graphics.tsx, mostrado completamente animado; titular serif. Para números reales usa bars: {"type":"bars","kicker","signed":true,"suffix":"%","rows":[{"label","value","from?","note?","hi?"}]} (los negativos crecen hacia la izquierda en azul; las filas hi en acento). Prefiere redibujar gráficos de terceros como bars en lugar de capturas de pantalla
cta	headline, sub?	Fondo de tinta, marca registrada
image	image	Una imagen 4:5 terminada (por ejemplo, un PNG de infografía) mostrada tal cual

• Color de acento: accent por defecto es el naranja de Fringe Lines. "#E2A85A" da el aspecto dorado de la referencia.
• Números de diapositiva: las diapositivas de foto y texto muestran n/total en la parte superior derecha automáticamente.

Honestidad:

• Los hechos y números deben provenir del episodio o de una fuente que puedas nombrar. Pon la fuente en credit.
• Escribe "según se citó en el programa" cuando los anfitriones no nombraron la fuente.
• No inventes estadísticas. Si un número necesita verificación, informa al usuario.

4. Renderizar

~/.shorts-skill/bin/python pipeline/build_carousel.py carousels/<slug>

Esto toma aproximadamente 30–60 s para 8–10 diapositivas y escribe PNGs más un PDF en out/carousels/<slug>/.

Publicaciones de YouTube: agrega --youtube para renderizar cuadrados de 1080×1080 en out/carousels/<slug>-youtube/. YouTube muestra las imágenes de las publicaciones en cuadrado, por lo que las diapositivas 4:5 se recortan. El mismo carousel.json funciona; la plantilla v1 ajusta sus diseños para el cuadrado. Aún no compatible con "template": "v2".

5. QA (Control de calidad)

Haz una hoja de contactos y mírala:

ffmpeg -v error -y -pattern_type glob -i "out/carousels/<slug>/*.png" -vf "scale=360:-1,tile=4x3" -frames:v 1 /tmp/sheet.png

Comprueba:

• Ninguna diapositiva muestra a un anfitrión, invitado o persona real.
• Ningún titular tiene más de 5 líneas ni choca con el crédito.
• Los rostros y sujetos no están recortados. Ajusta focus si lo están.
• Los gráficos son legibles. Usa fit: "contain" y recorta la captura de pantalla más si es necesario.
• Los acentos se muestran como color, nunca como * literal.
• Las diapositivas de texto no tienen una palabra huérfana en la última línea. Reformula o divide si la tienen.

Informa al usuario:

• la lista de diapositivas;
• de dónde vino cada imagen (compartición de pantalla, proporcionada o construida por nosotros);
• cualquier número que necesite verificación.