carrossel

Carrossel de imagens

O estilo vem dos carrosséis de referência:

• Sem apresentadores: carrosséis nunca usam imagens ou fotos dos apresentadores. Eles usam apenas texto, gráficos que construímos e imagens não-pessoais, como gráficos e capturas de tela.
• Slides de foto: imagem em sangria total escurecida na parte inferior, com uma manchete condensada em CAIXA ALTA pesada. As palavras-chave estão na cor de acento.
• Capa: uma regra fina com um identificador da marca.
• Slides somente texto: gradiente escuro, título na cor de acento, subtítulo em branco e negrito, corpo de texto regular. O tipo é deliberadamente maior que o de referência (título 92, subtítulo 60, corpo 52 px a 1080 de largura).

Peças:

• Template: pipeline/remotion/src/Carousel.tsx, a composição Carousel do Remotion, renderizada como imagens estáticas.
• Build: pipeline/build_carousel.py.
• Cada carrossel vive em sua própria pasta carousels/<slug>/ com um carousel.json e uma subpasta images/.
• Saída: out/carousels/<slug>/01.png … mais <slug>.pdf, que está pronto para upload como um post de documento do LinkedIn.

1. Planeje a história (7–10 slides)

1. Capa: uma promessa ou uma lacuna de curiosidade, por exemplo, "5 sinais de IA desta semana que a maioria das equipes está perdendo" ou "Boas notícias de todo o mundo sobre as quais ninguém está falando". Escreva em 8–14 palavras.
2. Uma ideia por slide: um fato, uma conclusão ou um passo. A manchete deve fazer sentido sem legenda.
3. Misture os tipos de slide. Não coloque três fotos ou três slides de texto em sequência. Padrão típico: capa → foto → foto/gráfico → gráfico → texto → foto → texto → CTA.
4. CTA no final: "Siga Fringe Lines", "Salve isto para sua próxima reunião de planejamento".

Destaques: envolva 1–4 palavras por manchete em *…*, geralmente o assunto ou o número. Use no máximo dois grupos de destaque por slide.

2. Visuais: sem apresentadores, nunca

Os carrosséis nunca mostram os apresentadores ou convidados. Isso significa sem quadros de câmera, sem fotos de rosto e sem "foto da pessoa falando", mesmo que desfocada. Cada slide é construído a partir de texto, gráficos que criamos e imagens não-pessoais.

As imagens vão em carousels/<slug>/images/. Fontes, em ordem de preferência:

• Gráficos que construímos:
  • slides graphic (estatística / pessoas / linhas / citação / manchete / lista de Graphics.tsx);
  • uma cover tipográfica, que não precisa de imagem;
  • uma cover com um cartão graphic;
  • um infográfico PNG finalizado colocado como slide image (veja a skill de infográfico).
• Compartilhamentos de tela do episódio: gráficos, slides e telas de produtos, nunca a câmera.
  • Capture com ffmpeg -ss <seg> -i "<raw>/Tela da Quinn-3.mp4" -frames:v 1 -vf "crop=iw:ih*0.895:0:ih*0.105" images/grafico.png; o corte remove a borda do navegador.
  • Corte para a parte relevante, mostre com fit: "contain" e credite o publicador original do gráfico.
  • Para um post comercial, considere redesenhar gráficos de terceiros como nossos próprios gráficos lines ou stat a partir dos números subjacentes.
• Imagens não-pessoais do usuário: capturas de tela de produtos, logotipos, fotos de lugares ou objetos que eles fornecerem.
• Imagens geradas por IA ou de banco de imagens: apenas quando o usuário solicitar.
  • Sem pessoas reais (incluindo os apresentadores) e sem "fotos" falsas de eventos reais.
  • Credite imagens de banco de imagens e use apenas as licenciadas.

Citações são aceitáveis como texto (gráfico quote, atribuído por nome). Apenas não as combine com a imagem do falante.

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

{
  "brand": "Fringe Lines",
  "accent": "#FF5A1F",
  "slides": [
    {"type": "cover", "kicker": "Fringe Lines · 30 Out",
     "headline": "*5 sinais de IA* desta semana que a maioria das equipes está perdendo"},
    {"type": "cover", "kicker": "Fringe Lines", "headline": "Receita subiu. *Headcount estável.*",
     "graphic": {"type": "lines", "series": [{"label": "Receita", "shape": "up"}, {"label": "Headcount", "shape": "flat"}]}},
    {"type": "photo", "image": "images/cavalos.jpg", "focus": [0.4, 0.4], "credit": "Foto: …",
     "headline": "*Cavalos de Przewalski* retornaram à natureza após décadas de *conservação*"},
    {"type": "photo", "image": "images/grafico.png", "fit": "contain", "credit": "Gráfico: …",
     "headline": "A *receita da Microsoft continuou subindo* enquanto o headcount ficou estável"},
    {"type": "graphic", "headline": "S-1 da Anthropic, *em um número*",
     "graphic": {"type": "stat", "kicker": "Retenção de receita líquida", "value": 900, "suffix": "%", "label": "…"}},
    {"type": "text", "number": "04", "title": "Faça uma Revisão Pós-Ação",
     "subtitle": "O Exército dos EUA encerra todo exercício com quatro perguntas:",
     "body": "O que deveria ter acontecido, o que realmente aconteceu, por que e o que mudar na próxima vez."},
    {"type": "cta", "headline": "Siga *Fringe Lines*", "sub": "Novos episódios toda semana"}
  ]
}

tipo	campos	notas
cover	headline, kicker?, graphic?, image?, focus?	O kicker fica entre duas regras; "SWIPE →" no canto inferior direito. Sem image: uma capa escura com brilho de acento que é apenas texto (manchete maior) ou tem um cartão graphic acima da manchete. image é apenas para fotos não-pessoais
photo	image, focus?, fit?, headline, credit?	Sem pessoas. focus = [x, y] 0–1, a parte da imagem a manter. Use fit: "contain" para gráficos e capturas de tela (imagem inteira sobre uma cópia desfocada de si mesma)
text	title, subtitle?, body?, number?	Tipo grande. O corpo do texto deve ter 20–45 palavras; texto mais longo encolhe ligeiramente, então divida-o em vários slides
graphic	graphic, headline?, credit?	Qualquer tipo de Graphics.tsx, mostrado totalmente animado; manchete serifada. Para números reais use bars: {"type":"bars","kicker","signed":true,"suffix":"%","rows":[{"label","value","from?","note?","hi?"}]} (negativos crescem para a esquerda em azul; linhas hi em acento). Prefira redesenhar gráficos de terceiros como bars em vez de capturas de tela
cta	headline, sub?	Fundo tinta, logotipo da marca
image	image	Uma imagem 4:5 finalizada (por exemplo, um PNG de infográfico) mostrada como está

• Cor de acento: accent padrão é laranja Fringe Lines. "#E2A85A" dá o visual dourado da referência.
• Números dos slides: slides de foto e texto mostram n/total no canto superior direito automaticamente.

Honestidade:

• Fatos e números devem vir do episódio ou de uma fonte que você possa nomear. Coloque a fonte em credit.
• Escreva "conforme citado no programa" quando os apresentadores não nomearam a fonte.
• Não invente estatísticas. Se um número precisar de verificação, informe o usuário.

4. Renderize

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

Isso leva cerca de 30–60 s para 8–10 slides e escreve PNGs mais um PDF em out/carousels/<slug>/.

Posts do YouTube: adicione --youtube para renderizar quadrados 1080×1080 em out/carousels/<slug>-youtube/. O YouTube mostra imagens de post em formato quadrado, então slides 4:5 são cortados. O mesmo carousel.json funciona; o template v1 ajusta seus layouts para o quadrado. Ainda não suportado para "template": "v2".

5. QA

Faça uma folha de contato e observe-a:

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

Verifique:

• Nenhum slide mostra um apresentador, convidado ou qualquer pessoa real.
• Nenhuma manchete ultrapassa 5 linhas ou colide com o crédito.
• Rostos e assuntos não são cortados. Ajuste focus se estiverem.
• Gráficos são legíveis. Use fit: "contain" e corte a captura de tela mais apertado se necessário.
• Destaques aparecem como cor, nunca como * literal.
• Slides de texto não têm palavra órfã na última linha. Reformule ou divida se tiverem.

Relate ao usuário:

• a lista de slides;
• de onde cada imagem veio (compartilhamento de tela, fornecida ou construída por nós);
• qualquer número que precise de verificação.