Communitygithub.com

cartaz-historico-motion

Estilo CARTAZ HISTÓRICO — mini-doc narré avec environ 80% de la timeline couverte par une animation éditoriale dans Remotion, synchronisée mot à mot avec la parole. Collage de papier kraft, orange brûlé et noir, peintures et gravures d'époque recréées avec fidélité, noms en grotesque entrant lettre par lettre, années en blocs de couleur, cartes, frises chronologiques, citations en machine à écrire et cartes de chapitre, livré en couches ProRes avec alpha dans Premiere et lié à After Effects via Dynamic Link. À utiliser quand on demande « estilo CARTAZ », « cartaz histórico », « le style du doc du libéralisme », « animer les paroles du mini-doc », « mini-doc animé », « documentaire avec collage », « couvrir 80% avec animation », « carte de chapitre », « avertissement style documentaire », ou qu'on souhaite animer un documentaire historique déjà dérushé dans Premiere, même sans mentionner la compétence. Également pour les demandes en anglais – documentaire historique animé, motion design éditorial collé, incrustations Remotion synchronisées avec la voix pour Premiere.

Qu'est-ce que cartaz-historico-motion ?

Cette compétence permet de créer des mini-documentaires historiques animés dans un style éditorial distinctif, le « CARTAZ HISTÓRICO », où environ 80% de la timeline est couverte par une animation synchronisée mot à mot avec la narration. Elle est conçue pour être utilisée avec Premiere Pro et After Effects, en s'appuyant sur Remotion pour générer les animations. Le style utilise une palette de couleurs spécifique (papier kraft, orange brûlé, noir), des typographies (Archivo Black, Archivo, Roboto Mono, Merriweather), et des techniques d'animation (entrées de lettres, blocs d'année, citations en machine à écrire) avec des images historiques recréées avec fidélité à partir de sources réelles. La compétence inclut un flux de travail complet depuis l'inspection du montage dans Premiere, la transcription et le dérushage, la génération d'images, l'animation dans Remotion, jusqu'à la livraison en couches ProRes avec alpha. Elle est documentée en détail dans un référentiel SKILL.md avec des règles strictes sur la couverture, les images, le texte à l'écran, les personnes, et la structure, toutes issues d'un projet réel de 35 minutes.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ojosuevfx/cartaz-historico-motion/tree/HEAD

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

CARTAZ HISTÓRICO — mini-doc animé en collage éditorial

Né d'un vrai mini-doc de 35 minutes, avec 87% de la timeline animée. Chaque règle ci-dessous provient d'une correction effectuée lors de ce travail. Avant de commencer, regarde assets/ : cenas-pessoas.jpg, cenas-fatos.jpg, aviso-e-continua.jpg, demo.mp4. La démo porte sur la Révolution française juste pour montrer les types de scène, avec les œuvres originales au lieu de recréations.

  • Quand utiliser chaque scène et le composant de chacune : references/catalogo-cenas.md
  • Comment obtenir et recréer les images : references/imagens.md
  • Rendu, Premiere, After Effects et les pièges de chacun : references/entrega.md
  • Moteur Remotion : references/motor/ (src/kit.tsx et src/colagem.tsx primitives ; src/palco.tsx caméra ; src/cenas/ scènes prêtes ; src/Molde.tsx point de départ ; src/Demo.tsx et src/Exemplos.tsx exemples ; tools/ segments, rendu et planche contact)
  • Outils image : references/ferramentas/ (recorta.py, preenche.py, alfa_cheio.py, regioes.mjs)

Au démarrage, dis (sans demander confirmation) : "Je vais appliquer le style CARTAZ HISTÓRICO : animation synchronisée avec la parole sur environ 80% de la timeline, images de sources réelles recréées avec fidélité, papier kraft, orange et noir, livré en couches dans Premiere."

Autonomie créative

Invente de nouvelles scènes à partir de ce que la parole dit. Le catalogue enseigne une grammaire, ce n'est pas une liste fermée : « ayez la même initiative » fut l'instruction originale. Demande seulement ce qui change le sens (nom, date, extrait de la parole) ou ce que seule la personne peut décider (le nom de la signature, le texte de l'avertissement, une image avec droits).

Ce qui reste fixe

  • Palette (F dans le kit) : papier #EFEBD8, encre #16110E, orange #E0662A, orange clair #F2A46B, orange foncé #B9501D, blanc #FBF8EE. Bordeaux #7E2328 seulement pour condamnation et document solennel. Si un autre accent est demandé, change-le dans les constantes et n'en garde qu'un seul : le style est né en bleu et est devenu orange avec une phrase (« au lieu de ce bleu, allons vers un orange »).
  • Typographie : Archivo Black en majuscules pour les noms et titres, Archivo pour le soutien, Roboto Mono pour les étiquettes et polices. Merriweather seulement dans l'avertissement initial et dans une page de texte.
  • Comment le texte entre : nom et titre avec lettres dispersées hors ordre (NomeLetras) ; petit soutien qui tape (Digita, Mono) ; année en bloc de couleur avec chiffres qui montent (AnoBloco) ; citation en machine à écrire.
  • Rien d'immobile : chaque image a un push-in ou un plan lent ; l'explication vit dans Stage, avec une caméra qui marche et respire.
  • Coupe sèche : la scène entre et sort sur la coupe (CORTE_SECO = true), sans fouet, fondu ou flou de transition. Dans la scène, les lettres, blocs et filets continuent d'animer. Seul l'avertissement initial utilise un fondu.
  • Synchronie : chaque texte entre sur le mot parlé, avec le temps de Whisper. Les temps dans le code sont ceux de la timeline, en secondes, pour permettre de lire le dérushage dans le code lui-même.
  • Une idée par cadre. Sans cadre, sans icône, sans cartoonisation : seulement peinture, photo ou gravure, typographie et blocs de couleur.

Les règles (toutes issues de corrections)

Couverture

  1. Environ 80% de la timeline en animation. Le présentateur apparaît dans les respirations : argument personnel, question directe au spectateur, phrase à impact. Marque ces passages dans le dérushage et laisse sans <Whip>.
  2. Qui obtient l'animation : si la personne est citée et que la parole commence à parler d'elle, elle obtient une scène de présentation. Une citation au passage reste sans animation.
  3. B-roll vidéo réel seulement dans la contextualisation, sur une piste séparée au-dessus, pour que l'éditeur choisisse dans Premiere entre lui et l'animation.

Images

  1. Toujours une source réelle. Peinture, photo, document ou gravure du fait ou de la personne lui-même, en haute résolution.
  2. Recréée avec fidélité dans le générateur d'images, à partir de l'image réelle, en 16:9 et avec un côté libre pour le texte. Le générateur recompose et stylise l'œuvre ; il n'invente pas de scène. Compare côte à côte avec l'originale avant d'utiliser : une « recréation » est déjà revenue avec un drapeau que l'œuvre n'a pas, et une autre est passée de profil à trois quarts. Si ça ne passe pas, utilise l'œuvre réelle avec découpe, duotone ou crop.
  3. Pas d'image générique d'IA. Fiole de poison ou livre générés de rien ont été rejetés. Le fond peut être généré (papier, affiche orange, bandeau en duotone). La personne et le fait, non.
  4. Pas de flou pour libérer de l'espace (« je ne veux pas d'images avec ces flous ») et pas de photo brute collée comme un rectangle. S'il n'y a pas d'espace, recrée l'image avec le côté libre.
  5. Droits un par un. Préfère le domaine public et enregistre les crédits. Matériel avec copyright : préviens et n'utilise qu'après que la personne a pris la responsabilité, dans le chat.

Texte à l'écran

  1. Jamais sur un visage. Jamais un texte sur un autre. Lors du changement, un texte n'entre que lorsque le précédent est déjà sorti ; après le montage, vérifie aussi les images de transition.
  2. Pas de tampon sec. Un « NON » lâché et tourné « entre sec et sans sens ». Si les faits s'enchaînent dans le temps, utilise la frise chronologique.
  3. Noms, dates et citations vérifiés avant de les mettre à l'écran. Si la parole se trompe (un numéro de pape, par exemple), garde l'audio, montre le bon et préviens. Si les sources divergent, montre seulement ce qui est sûr (« septembre 1875 » au lieu du jour).
  4. Citation avec source à l'écran. La paraphrase est marquée comme paraphrase. La traduction personnelle porte une note disant d'où vient l'original.

Personnes

  1. Personne seule que la parole développe obtient sa propre scène : peinture en plein écran (RetratoPintado) ou sérigraphie qui recule avec le nom derrière (Serigrafia).
  2. Panneau de groupe seulement avec plus d'une personne, quand la parole réunit quelqu'un déjà cité avec quelqu'un de nouveau qui ne sera pas approfondi. Le panneau finit au niveau des épaules des figures. « Rien de générique. »
  3. Personne dans le coin et pas d'autocollant avec contour plus nom géant (« ringard », « vulgaire »). L'image occupe l'écran.

Structure

  1. Changement de sujet demande une carte de chapitre.
  2. Date et événement : peinture d'époque en plein écran, avec titre en grotesque blanc et années en blocs reliés par des pointillés.
  3. Fin avec accroche : si l'histoire continue, termine par la carte Continua.
  4. Avertissement initial seulement quand demandé, avec un texte vrai sur la vidéo.

Flux

  1. Inspecte Premiere sans y toucher : séquence, pistes, frame rate. Le montage est déjà dérushé.
  2. Transcris la timeline mot par mot avec Whisper, au temps de la séquence, pas du brut.
  3. Dérushe dans un CSV : id;inicio;fim;tipo;fala;na_tela. Chaque parole reçoit un type du catalogue ou « caméra ». Additionne la couverture et approche les 80%. Sépare par chapitres.
  4. Vérifie les faits de tout ce qui va à l'écran et note ce que la parole a erroné.
  5. Rassemble et recrée les images (references/imagens.md). Montre les principales avant d'animer dessus.
  6. Crée le projet : dans le dossier de la vidéo, copie le moteur et installe. Si la compétence est ailleurs, ajuste le chemin :
    cp -R ~/.claude/skills/cartaz-historico-motion/references/motor ./MOTION
    cd MOTION
    npm install --legacy-peer-deps
    
  7. Anime chapitre par chapitre. Duplique le Molde et renomme le composant et les constantes (Cap01, C1_T0, C1_T1). Écris les temps de la timeline et enregistre dans le Root. Pour voir les props en usage, ouvre Demo.tsx et Exemplos.tsx.
  8. Vérifie chaque chapitre avec la planche contact avant de montrer. Regarde texte coupé, texte sur visage, texte sur texte et étiquette qui déborde de l'écran.
    npx remotion render src/index.ts Cap01 out/Cap01_mudo.mp4 --crf=20 --concurrency=4 --gl=angle
    bash tools/folha.sh out/Cap01_mudo.mp4 out/Cap01_folha.png 6 5
    
  9. Envoie le brouillon avec la voix et attends le « suit ». Joindre l'audio du montage aide l'approbateur à juger le temps :
    ffmpeg -i out/Cap01_mudo.mp4 -ss DEBUT -t DUREE -i audio_montagem.wav -map 0:v -map 1:a -c:v copy -c:a aac -shortest out/Cap01_rascunho.mp4
    
  10. Rendu final et Premiere seulement après approbation (references/entrega.md) : seulement les passages animés, en ProRes 4444 XQ avec alpha, chacun à son temps, sur une piste au-dessus du présentateur.
  11. Livrez en disant ce qui a été vérifié, ce que la parole a erroné, ce qui a été laissé de côté et les crédits. Dis aussi ce qui n'a pas été regardé : vérifier les images n'est pas regarder la timeline entière.

Limites connues

  • Utilisé seulement en 1920×1080 à 30 ips. Format vertical non testé.
  • La finition finale (postérisation et halftone) a été faite dans After Effects avec Sapphire, un plugiciel payant. Il est optionnel et n'est pas dans le rendu de Remotion.
  • Rendu lourd : un doc de 35 minutes a pris environ 3 h et 156 Go avec GPU, en ProRes 4444 XQ à 1080p.
  • La génération d'images dépend d'un générateur externe opéré dans le navigateur, et le résultat varie. Vérifie la fidélité de chaque image.
  • Les composants ont des positions pensées pour 1920×1080 ; les textes trop longs demandent un ajustement de taille.

Skills associés