Surlignages d'article
À utiliser avec remotion-best-practices, motion-graphics et cinematic-camera pour les moments d'actualité, de communiqué, de tendance et de preuve d'article où un terminal semblerait forcé.
Saisie obligatoire
Avant d'encoder, demandez toute décision manquante :
Quel format souhaitez-vous : 4:3 demi-écran Instagram ou 9:16 plein écran Instagram ? Et quel fond : lumière chaude, sombre propre, grille claire ou grille sombre ?
- Insert 4:3 : 1440×1080, conçu pour rester lisible à environ la moitié d'un cadre 9:16.
- Plein écran 9:16 : 1080×1920, respectant les zones de légende et d'interface.
- Utilisez le 16:9 uniquement lorsqu'il est explicitement demandé.
- Si l'utilisateur délègue le fond, utilisez lumière chaude.
Le papier de l'article peut rester clair sur une scène sombre propre ou grille sombre. Ne changez pas silencieusement toute la composition en sombre.
Interdiction visuelle absolue
Zéro néon, lueur, bloom, bords lumineux, ombres colorées, dégradés cyan-violet, orbes dégradés, lavis de couleurs radial, glassmorphisme, éclairage cyberpunk ou décoration IA d'ambiance. Les surlignages doivent ressembler à un traitement physique au marqueur/papier — pas à de la lumière émise.
Rejetez tout traitement interdit avant la livraison.
Référence approuvée
Inspectez assets/examples/article-highlight.mp4 et contactez/référencez les images avant d'encoder. Suivez sa hiérarchie éditoriale, son espacement généreux du papier, son traitement discret au marqueur, sa caméra lente et sa lisibilité. Utilisez la galerie du dépôt canonique lorsque les ressources locales ne sont pas disponibles : https://github.com/Liamrjohnston/remotion-motion-graphics-skill.
Quand l'utiliser
À utiliser pour :
- Les beats informatifs/actualités/communiqués/tendances.
- La preuve « quelque chose a changé ou a été lancé ».
- Des extraits réels d'articles avec des phrases significatives surlignées.
- Une preuve non terminale où un matériel éditorial clarifie le propos.
Utilisez terminal-inserts pour les histoires de CLI/configuration/exécution d'agent. Utilisez des images/véritables de produit ou d'interface lorsque le beat est une démonstration de produit.
Architecture de base
N'aplatissez pas l'article lorsque les traits de marqueur doivent se situer derrière le texte. Construisez un DOM/SVG Remotion en couches :
- Surface de scène sélectionnée.
- Papier/carte éditorial avec une marge de sécurité généreuse.
- Couche de marqueur Rough.js/SVG au-dessus du papier.
- Texte DOM/SVG au-dessus du marqueur.
Le marqueur doit se situer visiblement derrière les mots et au-dessus du papier.
Matériau et mise en page
- Papier : blanc chaud/blanc cassé avec bordure neutre et ombre neutre douce ; jamais de lueur colorée.
- Typographie : hiérarchie éditoriale/actualité — petit libellé de section, grand titre sérif/éditorial, sous-titre/date atténué, et au maximum 2–3 lignes de corps courtes.
- Surlignages : couleur de marqueur physique semi-transparente et discrète, comme un jaune atténué ; jamais fluorescent.
- Utilisez l'identité réelle de l'article/source et le texte fourni. N'inventez pas de publications, dates, affirmations ou citations.
- Coupure de ligne intentionnelle et gardez le texte à l'intérieur des marges de sécurité transformées.
- Ne centrez pas comme un diapositive titre ; cela doit ressembler à un extrait authentique d'article.
- Supprimez les pastilles/boutons/encombrement de source non essentiels s'ils sont illisibles à la taille de destination.
Animation
- Commencez par un flou discret et bref vers la mise au point uniquement lorsqu'il soutient la référence approuvée ; le flou est un flou optique, pas une lueur.
- Aucun marqueur visible pendant la phase de mise au point précoce.
- Utilisez une lente et subtile poussée de caméra et une rotation de perspective discrète.
- Commencez les traits de marqueur après que la mise au point s'est stabilisée.
- Dessinez chaque surlignage de gauche à droite en utilisant un masque/balayage.
- Séquençez les surlignages ; ne les révélez jamais tous en même temps.
- Terminez avec toutes les phrases clés lisibles et une pause stable.
- Pilotez l'animation avec
useCurrentFrame(),spring()etinterpolate(); pas d'animation CSS.
Règles du surligneur
- Utilisez rough.js ou une forme de marqueur SVG irrégulière.
- Le marqueur reste derrière le texte.
- Une légère imperfection est bonne ; un rectangle dégradé parfait ne l'est pas.
- Surlignez uniquement les phrases significatives vérifiées, pas des paragraphes entiers.
- L'opacité du marqueur doit préserver le contraste du texte.
- Pas de jaune fluorescent, d'émission lumineuse, de halo flou ou de bord lumineux.
Pas de narration redondante
Le texte de l'article/source peut apparaître lorsqu'il constitue la preuve réelle. N'ajoutez pas un titre séparé qui ne fait que répéter le commentaire parlé. Utilisez uniquement l'extrait authentique et les métadonnées structurelles minimales.
Grille de rejet en première passe
Ne livrez pas tant que chaque réponse n'est pas « non » :
- Le format ou le fond était-il non confirmé ?
- Y a-t-il du néon, de la lueur, un traitement lumineux du marqueur, une ombre colorée, un lavis dégradé ou du glassmorphisme ?
- L'identité ou l'affirmation de la source/article est-elle inventée ?
- La carte est-elle un diapositive titre centrée générique au lieu d'une surface éditoriale ?
- Un texte clé est-il illisible à l'emplacement Instagram choisi ?
- Le marqueur se trouve-t-il au-dessus/obscurcit-il le texte ou apparaît-il trop tôt ?
- La caméra recadre-t-elle le papier ou crée-t-elle un espace vide ?
- Le résultat manque-t-il de la retenue et de la finition de la référence approuvée ?
Révisez en privé jusqu'à ce que la grille soit passée.
QA et livraison
- Vérifiez les types ou exécutez la validation significative la plus petite.
- Rendez une image fixe sans surlignage, une image fixe à mi-trait, une image fixe de fin de surlignage et la pause finale.
- Confirmez que le marqueur est invisible tôt, derrière le texte et complet à la fin.
- Inspectez pour le rognage, le texte illisible, les détails de source inventés, le néon/lueur et un cadrage faible.
- Livrez un MP4 avec les dimensions, la durée, la commande de rendu exacte et une note de placement dans l'éditeur.