Communitygithub.com

Gráficos Kadr

Desenha os gráficos no ecrã de um filme de convite vertical: ganchos, legendas, lower thirds, chamadas, stickers, números e cartões finais, num só sistema de tipo e cor.

O que é Gráficos Kadr?

Sistema de desenho para gráficos de vídeo vertical curto no estilo Kadr. Cobre ganchos, legendas, lower thirds, chamadas, stickers, números, listas, citações, transições e cartões finais, com cor, tipo, fontes, assets e componentes React guiados pela timeline. Veste o filme do convite antes de renderizar um frame.

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

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Leia o arquivo readme.md dentro desta skill e explore os outros arquivos disponíveis. Se estiver criando artefatos visuais (reels, sobreposições gráficas, peças em movimento, maquetes), copie os assets e crie arquivos HTML estáticos para o usuário visualizar. Se estiver trabalhando em código de produção, copie os assets e siga as regras aqui. Se o usuário invocar esta skill sem nenhuma outra orientação, pergunte qual vídeo está fazendo (tópico, duração, plataforma, imagens que tem) e, em seguida, projete os gráficos para ele.

Criador: Emkarok (@emkarok) — Instagram Reels, TikTok, YouTube Shorts. Zonas seguras padrão platform="all". Saída: A = reel completo em MP4 (composição das imagens); B = apenas gráficos em chave magenta #FF00FF para CapCut/Premiere/Final Cut (ajuste de exportação nas páginas de timeline).

Regras rápidas:

  • Tela 1080 × 1920. Posicione os gráficos em pixels na tela; mantenha o texto fora das zonas seguras (topo 160, fundo 440, direita 160).
  • Cada gráfico recebe progress (0–1 entrada) e exit (0–1). Guie-os a partir de um único relógio da timeline (veja ui_kits/reel/).
  • Marca = gradiente de céu --accent-gradient (#61D4FE → #FFFFFF) com texto escuro sobre ele; tipografia branca com --shadow-text-footage sobre as imagens; placas de tinta em tomadas movimentadas.
  • Plus Jakarta Sans 800 para ganchos/legendas; Martian Mono para kickers/handles.
  • O texto entra com a decodificação ASCII (AsciiText progress); a única transição é GlyphTransition.
  • Apenas uma ideia gráfica por vez na tela. Sem emojis nos gráficos.
  • Layout explicativo: SplitPresenter (+ CardWall no topo) no grid do estúdio claro; o pop-out da cabeça precisa de uma cópia do clipe com fundo removido.
  • Visual tecnológico: ScanSweep → TrackBox (rosto/objeto) + HudReadout dados de canto; coloque os trackers dentro da camada de transformação da imagem.
  • HUD de visão: DepthScan, ObjectTags, Viewfinder, ContourMap (+ CompassStrip), TerminalLog, ThermalView. Os da tela precisam de uma imagem estática do mesmo frame (src + fit); passe zoom para acompanhar um zoom-in. As coordenadas da caixa/rótulo são medidas por tomada — meça novamente para novas imagens.
  • Explicativo: FileDrop (cursor arrasta clipes para uma pasta) — ~1,5s por arquivo.
  • As imagens devem deixar espaço para os gráficos: veja FOOTAGE em readme.md e os presets ShotGuide (cabeça falante, plano aberto, produto, b-roll, cartão final). Imagens escuras a médias sob o texto, SDR, exposição travada, sem azul céu ou branco atrás do texto.

Habilidades Relacionadas