carousel

Carrousel d'images

Le style provient des carrousels de référence :

• Pas d'animateurs : les carrousels n'utilisent jamais de séquences ni de photos des animateurs. Ils utilisent uniquement du texte, des graphiques que nous construisons, et des images non personnelles comme des graphiques et des captures d'écran.
• Diapositives photo : une image en plein écran assombrie en bas, avec un titre lourd en capitales condensées. Les mots-clés sont dans la couleur d'accentuation.
• Couverture : une fine règle avec un accroche de marque.
• Diapositives purement textuelles : dégradé sombre, titre de couleur d'accentuation, sous-titre blanc gras, corps de texte normal. La police est délibérément plus grande que la référence (titre 92, sous-titre 60, corps 52 px à 1080 de large).

Éléments :

• Modèle : pipeline/remotion/src/Carousel.tsx, la composition Remotion Carousel, rendue en images fixes.
• Construction : pipeline/build_carousel.py.
• Chaque carrousel vit dans son propre dossier carousels/<slug>/ avec un fichier carousel.json et un sous-dossier images/.
• Sortie : out/carousels/<slug>/01.png … plus <slug>.pdf, prêt à être téléchargé comme publication document LinkedIn.

1. Planifier l'histoire (7 à 10 diapositives)

1. Couverture : une promesse ou une curiosité, par exemple "5 signaux IA de cette semaine que la plupart des équipes ratent" ou "Bonnes nouvelles du monde dont personne ne parle". Rédigez-la en 8 à 14 mots.
2. Une idée par diapositive : un fait, un enseignement ou une étape. Le titre doit avoir du sens sans légende.
3. Mélangez les types de diapositives. Ne mettez pas trois photos ou trois diapositives de texte à la suite. Structure typique : couverture → photo → photo/graphique → graphique → texte → photo → texte → CTA.
4. CTA en dernier : "Suivez Fringe Lines", "Enregistrez ceci pour votre prochaine réunion de planification".

Accentuations : encadrez 1 à 4 mots par titre avec *…*, généralement le sujet ou le nombre. Utilisez au maximum deux groupes d'accentuation par diapositive.

2. Visuels : jamais d'animateurs

Les carrousels ne montrent jamais les animateurs ou les invités. Cela signifie pas de cadres caméra, pas de portraits, et pas de "photo de la personne qui parle", même floue. Chaque diapositive est construite à partir de texte, graphiques que nous créons, et images non personnelles.

Les images vont dans carousels/<slug>/images/. Sources, par ordre de préférence :

• Graphiques que nous construisons :
  • diapositives graphic (statistiques / personnes / lignes / citation / titre / liste depuis Graphics.tsx);
  • une couverture typographique, qui n'a besoin d'aucune image;
  • une couverture avec une carte graphic;
  • une infographie finie en PNG déposée comme diapositive image (voir la compétence infographie).
• Partages d'écran d'épisode : graphiques, diapositives et captures d'écran de produit, jamais la caméra.
  • Capturez avec ffmpeg -ss <sec> -i "<raw>/Écran de Quinn-3.mp4" -frames:v 1 -vf "crop=iw:ih*0.895:0:ih*0.105" images/graphique.png ; le recadrage supprime les bordures du navigateur.
  • Recadrez la partie pertinente, affichez-la avec fit: "contain", et créditez l'éditeur original du graphique.
  • Pour un post commercial, envisagez de redessiner les graphiques tiers comme nos propres graphiques lines ou stat à partir des chiffres sous-jacents.
• Les propres images non personnelles de l'utilisateur : captures d'écran de produit, logos, photos de lieux ou d'objets qu'il fournit.
• Images générées par IA ou libres de droits : uniquement si l'utilisateur le demande.
  • Pas de vraies personnes (y compris les animateurs) et pas de fausses "photos" d'événements réels.
  • Créditez les photos libres de droits et n'utilisez que des images sous licence.

Les citations sont acceptables en texte (graphique quote, attribuée par nom). Ne les associez simplement pas à l'image de l'orateur.

3. Écrire carousels/<slug>/carousel.json

{
  "brand": "Fringe Lines",
  "accent": "#FF5A1F",
  "slides": [
    {"type": "cover", "kicker": "Fringe Lines · 30 oct.",
     "headline": "*5 signaux IA* de cette semaine que la plupart des équipes ratent"},
    {"type": "cover", "kicker": "Fringe Lines", "headline": "Chiffre d'affaires en hausse. *Effectifs stables.*",
     "graphic": {"type": "lines", "series": [{"label": "CA", "shape": "up"}, {"label": "Effectifs", "shape": "flat"}]}},
    {"type": "photo", "image": "images/chevaux.jpg", "focus": [0.4, 0.4], "credit": "Photo : …",
     "headline": "Les *chevaux de Przewalski* sont retournés à l'état sauvage après des décennies de *conservation*"},
    {"type": "photo", "image": "images/graphique.png", "fit": "contain", "credit": "Graphique : …",
     "headline": "Le *chiffre d'affaires de Microsoft* a continué de grimper tandis que les effectifs restaient stables"},
    {"type": "graphic", "headline": "Le S-1 d'Anthropic, *en un chiffre*",
     "graphic": {"type": "stat", "kicker": "Rétention nette du revenu", "value": 900, "suffix": "%", "label": "…"}},
    {"type": "text", "number": "04", "title": "Mener un débriefing",
     "subtitle": "L'armée américaine termine chaque exercice avec quatre questions :",
     "body": "Que devait-il se passer, que s'est-il réellement passé, pourquoi, et quoi changer la prochaine fois."},
    {"type": "cta", "headline": "Suivez *Fringe Lines*", "sub": "Nouveaux épisodes chaque semaine"}
  ]
}

type	champs	remarques
cover	headline, kicker?, graphic?, image?, focus?	Le kicker se trouve entre deux règles ; "SWIPE →" en bas à droite. Sans image : une couverture sombre avec lueur d'accentuation, uniquement textuelle (titre plus grand) ou avec une carte graphic au-dessus du titre. image est réservée aux photos sans personne
photo	image, focus?, fit?, headline, credit?	Pas de personnes. focus = [x, y] 0–1, la partie de l'image à conserver. Utilisez fit: "contain" pour les graphiques et captures d'écran (image entière sur une copie floue d'elle-même)
text	title, subtitle?, body?, number?	Grands caractères. Le corps du texte doit contenir 20 à 45 mots ; un texte plus long rétrécit légèrement, donc répartissez-le sur plusieurs diapositives
graphic	graphic, headline?, credit?	Tout type de Graphics.tsx, affiché entièrement animé ; titre en police serif. Pour les vrais chiffres, utilisez bars : {"type":"bars","kicker","signed":true,"suffix":"%","rows":[{"label","value","from?","note?","hi?"}]} (les négatifs poussent à gauche en bleu ; les lignes hi dans la couleur d'accentuation). Préférez redessiner les graphiques tiers en bars plutôt que des captures d'écran
cta	headline, sub?	Fond d'encre, logo de marque
image	image	Une image finie au format 4:5 (par exemple un PNG d'infographie) affichée telle quelle

• Couleur d'accentuation : accent par défaut est l'orange Fringe Lines. "#E2A85A" donne l'aspect doré de la référence.
• Numéros de diapositives : les diapositives photo et texte affichent automatiquement n/total en haut à droite.

Honnêteté :

• Les faits et les chiffres doivent provenir de l'épisode ou d'une source que vous pouvez nommer. Indiquez la source dans credit.
• Écrivez "tel que cité dans l'émission" lorsque les animateurs n'ont pas nommé la source.
• N'inventez pas de statistiques. Si un chiffre doit être vérifié, informez-en l'utilisateur.

4. Rendu

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

Cela prend environ 30 à 60 s pour 8 à 10 diapositives et écrit les PNG ainsi qu'un PDF dans out/carousels/<slug>/.

Publications YouTube : ajoutez --youtube pour rendre des carrés 1080×1080 dans out/carousels/<slug>-youtube/. YouTube affiche les images de publication en carré, donc les diapositives 4:5 sont recadrées. Le même carousel.json fonctionne ; le modèle v1 resserre ses mises en page pour le carré. Non encore pris en charge pour "template": "v2".

5. Contrôle qualité

Créez une planche contact et examinez-la :

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

Vérifiez :

• Aucune diapositive ne montre d'animateur, d'invité ou de personne réelle.
• Aucun titre ne dépasse 5 lignes ou n'empiète sur le crédit.
• Les visages et sujets ne sont pas recadrés. Ajustez focus si nécessaire.
• Les graphiques sont lisibles. Utilisez fit: "contain" et recadrez la capture d'écran plus serré si besoin.
• Les accents apparaissent en couleur, jamais en * littéral.
• Les diapositives de texte n'ont pas de mot orphelin sur la dernière ligne. Reformulez ou divisez si c'est le cas.

Faites un rapport à l'utilisateur :

• la liste des diapositives ;
• la provenance de chaque image (partage d'écran, fournie, ou construite par nous) ;
• tout chiffre nécessitant une vérification.