Communitygithub.com

Graphismes Kadr

Conçoit les graphismes à l'écran d'un film d'invitation vertical : accroches, sous-titres, lower thirds, rappels, stickers, chiffres et cartes de fin, dans un seul système de caractères et de couleurs.

Qu'est-ce que Graphismes Kadr ?

Système graphique pour la vidéo verticale courte, dans le style Kadr. Il couvre accroches, sous-titres, lower thirds, rappels, stickers, statistiques, listes, citations, transitions et cartes de fin, avec couleurs, typo, polices, assets et composants React pilotés par la timeline. On habille le film d'invitation avant de rendre une image.

Compatible avec~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/yehdan8-debug/kadr-design/tree/main

Demander à votre IA préférée

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

Documentation

Lisez le fichier readme.md dans cette compétence et explorez les autres fichiers disponibles.

Si vous créez des artefacts visuels (reels, superpositions graphiques, animations, maquettes), copiez les assets et créez des fichiers HTML statiques que l'utilisateur pourra visualiser. Si vous travaillez sur du code de production, copiez les assets et suivez les règles ici.

Si l'utilisateur invoque cette compétence sans aucune autre indication, demandez-lui quelle vidéo il réalise (sujet, durée, plateforme, séquences dont il dispose), puis concevez les graphiques correspondants.

Créateur : Emkarok (@emkarok) — Instagram Reels, TikTok, YouTube Shorts. Zones de sécurité par défaut platform="all".

Sortie : A = reel MP4 complet (séquences compositées ici) ; B = graphiques uniquement sur fond magenta #FF00FF pour CapCut/Premiere/Final Cut (Export tweak on timeline pages).

Règles rapides :

  • Canvas 1080 × 1920. Positionnez les graphiques en pixels sur le canvas ; gardez le texte en dehors des zones de sécurité (haut 160, bas 440, droite 160).
  • Chaque graphique prend progress (0-1 entrée) et exit (0-1). Pilotez-les depuis une horloge de timeline unique (voir ui_kits/reel/).
  • Marque = dégradé ciel --accent-gradient (#61D4FE → #FFFFFF) avec texte foncé ink dessus ; type blanc avec --shadow-text-footage sur les séquences ; plaques ink sur les plans chargés.
  • Plus Jakarta Sans 800 pour les accroches/sous-titres ; Martian Mono pour les kickers/handles.
  • Le texte entre avec le décodage ASCII (AsciiText progress) ; la seule transition est GlyphTransition.
  • Une seule idée graphique à l'écran à la fois. Pas d'emoji dans les graphiques.
  • Disposition explicative : SplitPresenter (+ CardWall en haut) sur la grille de studio claire ; le pop-out de tête nécessite une copie du clip sans arrière-plan.
  • Aspect technique : ScanSweep → TrackBox (visage/objet) + HudReadout données d'angle ; placez les trackers dans la couche de transformation des séquences.
  • HUD de vision : DepthScan, ObjectTags, Viewfinder, ContourMap (+ CompassStrip), TerminalLog, ThermalView. Ceux du canvas ont besoin d'une image fixe du plan de même origine (src + fit) ; passez zoom pour suivre un zoom avant. Les coordonnées des boîtes/étiquettes sont mesurées par plan — remesurez pour de nouvelles séquences.
  • Explication : FileDrop (le curseur fait glisser des clips dans un dossier) — ~1,5 s par fichier.
  • Les séquences doivent laisser de la place pour les graphiques : voir FOOTAGE dans readme.md et les préréglages ShotGuide (talking-head, wide, product, broll, endcard). Séquences mi-foncées à foncées sous le texte, SDR, exposition verrouillée, pas de ciel bleu ou de blanc derrière le texte.

Skills associés