Communitygithub.com

Promo film looks : 苹果风格 et 华章版

Deux modèles de styles visuels prêts à l'emploi pour films promotionnels Remotion (宣传片 / 形象片 / VCR), destinés aux écoles, collèges et institutions. 苹果风格 est un verre dépoli de style Apple en bleu, blanc et un peu de jaune, avec des titres en 优设标题黑. 华章版 (Aurum Nocturne) est un laque de minuit avec feuilles d'or. Comprend un moteur de template fonctionnel (kit de scènes, looks par plan, transitions, cadres photo, rail de cartes quasi plein écran, accentuation des chiffres clés, ouverture en masque de texte), scripts de rendu, QA, master et remplacement de segments, ainsi que des principes de conception.

Qu'est-ce que Promo film looks : 苹果风格 et 华章版 ?

Ce skill fournit deux modèles de styles visuels complets pour réaliser des films promotionnels institutionnels avec Remotion. Les deux looks, 苹果风格 (verre dépoli Apple) et 华章版 (noir et or de luxe), sont implémentés dans une même base de code : le style est contrôlé par une propriété d'entrée (`--props=glass.json` ou `--props=aurum.json`), ce qui permet de produire deux éditions à partir de la même timeline et des mêmes scènes. Le skill inclut un kit de composants réutilisables (scènes, arrière-plans, cartes, cadres photo, transitions, animations de texte, etc.), des scripts de QA et de rendu, et un pipeline complet allant du doublage voix-off au master final. Il est particulièrement adapté aux écoles, universités, instituts et entreprises souhaitant une vidéo promotionnelle soignée, avec la possibilité de remplacer des segments après livraison sans refaire l'intégralité du rendu. Le skill insiste sur la séparation nette entre le contenu visuel et le code (les couleurs, polices et photos passent par des tokens), et applique des principes de conception rigoureux pour garantir un résultat professionnel et lisible.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jeremyhan520/promo-film-looks/tree/HEAD/promo-film-looks

Demander à votre IA préférée

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

Documentation

Modèles de films promotionnels : 苹果风格 et 华章版

Deux modèles de styles complets pour films promotionnels institutionnels. Commencez avec un moteur fonctionnel au lieu d'un projet Remotion vide.

  • 苹果风格 (glass) : verre dépoli de style Apple. Arrière-plans blanc / ciel / bleu par plan, accents jaunes, titres en 优设标题黑, photos sans cadre arrondies, et graphiques de données en direct derrière le verre. Lisez references/glass.md.
  • 华章版 (aurum, Aurum Nocturne) : arrière-plan laque de minuit, caractères champagne et titres en feuille d'or. Ajoute des cadres photo dorés, des fuites de lumière et quelques flares d'objectif. Lisez references/aurum.md.

Une seule base de code génère les deux looks. Le look est une propriété d'entrée (--props=glass.json ou --props=aurum.json), donc la même timeline et les mêmes scènes peuvent être diffusées en deux éditions.

Choisir le look

Par défaut, c'est 苹果风格 : lumineux, épuré et international, et il convient le mieux aux films d'admission et de recrutement. 华章版 est plus sombre et plus cérémoniel. Proposez-le pour les anniversaires, les galas, les récompenses et les films de marque premium, ou lorsque l'utilisateur demande du 华丽 / 黑金 / luxe. Montrez quelques images fixes avant de générer un film entier dans ce style.

Si la palette de la marque n'est pas bleue, conservez le moteur en verre et recolorez les jetons (glassVars dans looks.tsx, GLASS dans theme.ts). Ne créez pas un nouveau look de toutes pièces.

Démarrer un nouveau film

python <dossier-du-skill>/scripts/scaffold.py <nouveau-dossier-projet>

Ensuite, dans le projet :

npm install
npx tsc --noEmit -p .
PROPS=glass.json bash qa.sh demo 30 150 268 320 460 520

La timeline de démo (src/scenes/Demo.tsx) contient un plan par composant signature. Générez ses images fixes dans les deux looks avant de modifier quoi que ce soit, pour confirmer que les polices et le navigateur fonctionnent sur cette machine.

Notes de configuration :

  • Polices : elles ne sont pas redistribuées avec le skill. assets/fonts/README.md liste chaque fichier, sa source et sa licence. Le script scaffold copie tout ce qui se trouve dans assets/fonts/ ; les polices manquantes entraînent un repli sans casser le rendu.
  • Navigateur : remotion.config.ts pointe vers Edge local s'il existe, car Chrome Headless Shell peut ne pas être téléchargé sur certains réseaux.
  • Shell : les scripts sont en bash, et PROPS=… bash qa.sh est une syntaxe bash. Sur Windows, exécutez-les dans Git Bash. Depuis PowerShell, appelez Git Bash explicitement, par exemple & "C:\Program Files\Git\bin\bash.exe" -c "PROPS=glass.json bash qa.sh demo 30 150", car un bash nu pourrait démarrer WSL à la place.

Ce que contient le modèle :

FichierRôleModifier par film ?
src/config.tsdurée, SHOTS (ton par plan, côté du titre, puces), CHAPTERS (motif, mot fantôme), FORMULAS, BRANDoui
src/scenes/*.tsxle film : un fichier par chapitre, construit à partir des composants du kitoui
src/kit.tsxScene, Ground, Night, Card, Print, DocPage, Caption, Rise, En, Rule, Heading, ChapterCard, useCount, StatHit, MaskTitle, CardRail, FeatureCardrarement
src/looks.tsxarrière-plans, transitions, cadres photo et lumière pour les deux looksrarement
src/glassfx.tsxcouches de détail du verre : motifs, disques, puces, mots fantômes, bokeh, comète de bordrarement
src/theme.tsjetons C, polices F, FOIL, easings EZ, r(), mix()rarement
src/Film.tsxtimeline principale, GLASS_CSS, connexion VO / SFXoui (câblage)

Les scènes doivent rester agnostiques au look. Couleurs uniquement via les jetons C.*, typographie via F.*, photos via Print, panneaux via Card ou C.card / C.fill. Ne codez jamais en dur une couleur hexadécimale dans une scène : la même scène doit pouvoir s'afficher en blanc sur bleu, en encre sur blanc et en or sur minuit.

Workflow

  1. Chronométrage à partir de la voix off.
    • Alignez la VO (par exemple, les horodatages des mots de Whisper) et notez les temps des chunks.
    • Chaque Scene se trouve aux secondes absolues de la VO. Les scènes voisines se chevauchent d'environ 0,35 s.
    • Les temps des éléments (t0, at) sont également en secondes absolues : le moment où le narrateur dit la chose. Le texte qui arrive sur le mot prononcé est ce qui donne au film une impression de montage plutôt que d'animation.
  2. Tableau des plans. Ajoutez une ligne SHOTS par scène dans config.ts.
    • Alternez les tons pour que les plans voisins diffèrent.
    • Placez le titre (head) du côté que le contenu laisse vide.
    • Marquez les plans plein écran ou avec mode de fusion flat.
  3. Construisez les scènes à partir des composants du kit. Les motifs qui fonctionnent déjà sont dans les références, par exemple :
    • un rail de cartes quasi plein écran pour des chiffres denses
    • un nombre vedette qui atterrit en un bloc
    • l'ouverture en masque de texte
  4. Images fixes de QA (qa.sh) au moment le plus chargé de chaque plan, dans tous les looks que vous allez livrer. Regardez-les vous-même. Consultez la checklist dans references/pipeline.md.
  5. Master avec master.sh : −16 LUFS, h264 crf 17, AAC 320k. Rapportez ensuite les chiffres de verify.sh.
  6. Corrections après livraison. Ne regénérez que le segment modifié avec segment.sh. Il extrait l'audio du master pour que le volume corresponde, et vérifie que les deux images de raccord sont identiques au master.

Principes de conception

Ce sont ces principes qui font tenir les deux looks. Chacun est suivi de la raison, car les raisons comptent plus que les règles.

  • Laissez de la place pour les sous-titres et la musique. Livrez voix off plus SFX, sans sous-titres incrustés et sans musique de fond sauf demande explicite. Les institutions ajoutent généralement des sous-titres et une musique unifiés par la suite, donc la bande inférieure (environ y > 950) reste libre de tout contenu important.
  • Gardez le haut du cadre propre. Les titres courants anglais décoratifs, les accroches de chapitre et les lignes HUD sont perçus comme du fouillis par un public chinois. En verre, l'accroche est déjà désactivée, et BRAND est vide par défaut. Les lignes d'accompagnement en anglais sous les titres sont acceptables.
  • Évitez l'aspect diaporama. Un simple fond dépoli nu ressemble à PowerPoint. Chaque plan en verre comporte des couches lentes derrière le contenu : le motif, les disques, le mot fantôme et le bokeh avant, plus la rotation lente en 3D du plan de contenu. Les plans voisins alternent les arrière-plans. Ne supprimez pas ces couches pour "nettoyer".
  • La décoration ne doit pas être lue comme du contenu. Les puces de formule sont de la pure notation sans chiffres, avec environ 60 % d'opacité et aucune ombre. Une puce comme "R² = 0,98" serait interprétée comme une affirmation sur l'institution.
  • La lisibilité prime sur l'élégance. Lorsqu'une carte contient une figure dense (diagrammes de recherche, résultats), donnez-lui presque tout le cadre (CardRail). Les petites cartes en ligne sont illisibles.
  • Les chiffres clés atterrissent en bloc. Un long décompte de 0 à 100 % ressemble à une barre de chargement. Utilisez StatHit pour les nombres vedettes et useCount uniquement pour les nombres ordinaires.
  • Personnes et documents :
    • Ne recadrez jamais une tête. Vérifiez chaque recadrage de portrait sur une image fixe et définissez focus sur Print pour le corriger.
    • Ne répétez jamais une photo dans un film.
    • Les certificats et les pages de revue sont suspendus parfaitement droits (DocPage n'a aucune inclinaison), dimensionnés selon le format réel de la page.
  • Les icônes doivent être littérales. Préférez un objet reconnaissable, comme une voiture vue de face pour le transport, à un glyphe abstrait.
  • Le contenu de l'institution est une donnée. Les personnes, photos, noms et chiffres sont utilisés exactement comme fournis, jamais inventés. Lorsqu'une photo source a besoin de retouches (arrière-plan, couleur), harmonisez-la avec ses voisines et montrez une image fixe avant de générer.

Rapports

Rapportez ce que vous avez vérifié, avec des chiffres : nombre d'images, décodage, durée, LUFS, pic et quelles images fixes vous avez regardées. Dites clairement ce que vous n'avez pas fait, par exemple "pas regardé en entier" ou "audio non écouté". Nommez les livrables <Institution>_promo_<version>_no_sub_no_BGM_1080p25.mp4. Placez les segments de remplacement dans un dossier <version>_segments_remplacement/, nommés avec le timecode de début (détails dans references/pipeline.md).

Références

  • references/glass.md : le cahier des charges complet de 苹果风格. Couvre les jetons, les looks par plan, les surfaces dépoli, les transitions, les couches de détail, les mouvements signature et les pièges.
  • references/aurum.md : le cahier des charges complet de 华章版. Couvre les couches de scène, la typographie en feuille d'or, les cadres, les fuites de lumière, les flares et les pièges de contraste.
  • references/pipeline.md : chronométrage de la VO, table des cues SFX, checklist QA, mastering, vérification, segments de remplacement, montage et nommage des livrables.

Skills associés