/brag (Brag Ultra)
Você construiu. Agora vamos nos gabar disso — com ultra fidelidade no estilo Apple.
Despacho de invocação (deve acontecer primeiro)
Antes de inspecionar o projeto, analise a invocação completa de /brag. Se a
invocação contiver --voice, defina voice.enabled = true. Se --format ou --kit
for fornecido, configure o pipeline de renderização de acordo.
/brag transforma o projeto atual (web app, mobile app, desktop GUI, ferramenta CLI/TUI ou biblioteca) em um vídeo de lançamento e kit social de altíssimo polimento.
O que o Brag Ultra faz
- Inspeciona o Projeto e Captura UI/CLI Real: Escaneia o código do projeto, arquitetura e instâncias em execução. Captura emuladores mobile reais (
adb), páginas web (Puppeteer), janelas de desktop ou sessões de terminal (asciinema/ frame de terminal CSS). - Planejamento Responsivo em Múltiplos Formatos: Planeja layouts adaptativos para 16:9 Paisagem (X, YouTube), 9:16 Vertical (TikTok, Reels, Shorts) e 1:1 Quadrado (LinkedIn, Instagram).
- Roteirização e Storyboard no Estilo Apple: Cria uma narrativa de alto impacto com molas criticamente amortecidas, shaders cinéticos, traçado SVG e dados autênticos do projeto.
- Masterização de Áudio Inteligente e Ducking: Abaixa automaticamente a música de fundo em -12dB durante narração por voz (Kokoro TTS) com curvas de ataque suave de 0,3s e liberação de 0,5s e mixa efeitos sonoros com nivelamento de impacto.
- Entrega do Kit de Lançamento Completo: Renderiza MP4s em múltiplos formatos, extrai posters JPG assados no frame 0, gera GIFs de pré-visualização animados otimizados em duas passadas e gera textos sociais estruturados e
launch-metadata.json.
Analisando a invocação
O usuário pode invocar com linguagem natural ou flags:
/brag
/brag --tone polished --format vertical
/brag --format all --kit --voice
/brag --tone chaotic --format square
/brag essa ferramenta CLI. Faça parecer uma keynote de desenvolvedor da Apple.
Flags e Opções Suportadas
| Opção | Valores | Padrão | Descrição |
|---|---|---|---|
--tone | predefinição ou descrição livre | apple-keynote / inferido | Estilo estético e de ritmo |
--format | landscape (16:9), vertical (9:16), square (1:1), all | landscape | Proporção de tela do vídeo e alvo de reflow CSS |
--duration | segundos (ex.: 15s, 20s) | auto (15–25s) | Duração total |
--voice | flag | narração desligada | Narração Kokoro opcional com ducking automático de -12dB |
--kit | flag | renderização padrão | Gera kit de lançamento completo (MP4s, GIF, poster JPG, JSON de metadados) |
--terminal | flag | detectado automaticamente | Ativa reprodução e moldura de terminal CLI/TUI |
--no-music | flag | música ligada | Desativa a base musical de fundo |
--no-sfx | flag | efeitos sonoros ligados | Desativa os efeitos sonoros |
--title | string | inferido | Título personalizado do produto |
Quando --format all ou --kit for especificado, gere todas as 3 proporções (16:9, 9:16, 1:1) junto com o GIF animado e o pacote de metadados.
Pilares Centrais do Brag Ultra
1. Reflow Responsivo em Múltiplos Formatos
Sem barras pretas estranhas ou letterboxing ingênuo. A composição se reorganiza de forma inteligente:
- 16:9 Paisagem (
1920x1080): Layouts divididos lado a lado, molduras de dispositivos duplas, visualizações de terminal widescreen. - 9:16 Vertical (
1080x1920): Pilha vertical centralizada, molduras de dispositivos mobile em altura total, clamps de fonte grandes, zonas seguras estritas (padding superior/inferior para sobreposições de plataforma). - 1:1 Quadrado (
1080x1080): Corte focado e apertado, cartão herói centralizado, tipografia de alto contraste.
2. Masterização de Áudio Inteligente e Ducking de Narração
- A música de fundo abaixa automaticamente em -12dB sempre que uma narração ou diálogo é reproduzido.
- Curva de ducking: Ataque suave de 0,3s antes da fala, liberação de 0,5s após a fala.
- Limitador mestre e normalização de volume: Efeitos sonoros penetram em 0,60–0,85 sem clipping digital.
3. Captura de Tela de Terminal / CLI / TUI
- Suporte dedicado para ferramentas de terminal (
pluvia,hyperindex,omnihud,token-trimmer, etc.). - Reproduz comandos em tempo real com cadência de digitação humana realista (jitter de 40–90ms), cores ANSI de sintaxe e áudio de teclas sincronizado (
keyboard/keypress-*.wav). - Moldura de terminal SVG/Canvas em alta resolução com cromado de janela Apple (três bolinhas) e borda titânio.
4. Shader Cinético e Polimento de Movimento
- Textura de Grão de Filme: Ruído SVG
feTurbulence/ canvas sutil (opacidade 3–5%) eliminando bandas de cor e adicionando calor cinematográfico. - Aberrações Cromáticas: Micro-divisão RGB em cortes de alta velocidade e impactos.
- Física de Mola: Curvas criticamente amortecidas GSAP (
ease: "expo.out",ease: "power4.out", oumass: 1, stiffness: 120, damping: 14). - Traçado SVG Animado: Desenho de caminho animado (
stroke-dashoffset) para logotipos, nós arquitetônicos e contornos de UI.
5. Geração de Kit de Lançamento Completo
Produz um diretório de lançamento pronto para uso:
brag.mp4/brag-16x9.mp4,brag-9x16.mp4,brag-1x1.mp4brag.gif(Pré-visualização animada otimizada em duas passadas, 30fps, para READMEs do GitHub e embeds do Discord, abaixo de 10MB)brag.jpg(Poster de alta resolução, assado diretamente no frame 0 do MP4)share-copy.txt(Legenda concisa para postagem única)share-copy-variants.md(Legendagens personalizadas para X/Twitter, LinkedIn, Reddit, Product Hunt)launch-metadata.json(Tags OpenGraph, Twitter card, palavras-chave, timestamps)
Diretório de Saída
A saída padrão vai para brag-output/ (ou brag-output-YYYY-MM-DD-HHmmss/ com timestamp, se já existir):
brag-output/
brag.mp4 # Vídeo renderizado principal
brag-16x9.mp4 # Renderização 16:9 Paisagem (se multi-formato)
brag-9x16.mp4 # Renderização 9:16 Vertical (se multi-formato)
brag-1x1.mp4 # Renderização 1:1 Quadrado (se multi-formato)
brag.jpg # Poster de alta resolução (assado no frame 0)
brag.gif # Pré-visualização GIF animada de alta resolução
brag-plan.md # Storyboard e plano criativo
composition-brief.md # Brief do Hyperframes
share-copy.txt # Legenda da postagem principal
share-copy-variants.md # Cópias de postagem multiplataforma
launch-metadata.json # Metadados OpenGraph e sociais
composition/ # Projeto fonte do Hyperframes
Etapas do Fluxo de Trabalho
- Etapa 1: Inspecionar e Capturar UI/Terminal em Tempo Real: Leia references/step-1-inspect.md & references/capture-workflow.md
- Etapa 2: Planejar e Criar Storyboard: Leia references/step-2-plan.md & references/apple-design-guide.md
- Etapa 3: Compor com Hyperframes: Leia references/step-3-compose.md & references/audio.md
- Etapa 4: Validar, Renderizar e Entregar o Kit de Lançamento: Leia references/step-4-deliver.md
Predefinições de Tom
Definições completas em references/tones.md:
| Tom | Energia | Frase de Efeito |
|---|---|---|
apple-keynote | Confiança silenciosa, física tátil, contenção sublime | Estética de revelação de produto flagship da Apple |
default | Divertido, limpo, postável | Vitrine criativa e de consumo de boas vibrações |
polished | Sério, elegante, alto artesanato | Ferramenta de desenvolvedor premium ou produto empresarial |
yc-parody | Energia de startup com tom sério | Entrega séria de conceitos audaciosos ou peculiares |
chaotic | Rápido, alto, desenfreado | Vídeo hype de alta velocidade |
deadpan | Calmo, seco, discreto | Tempo minimalista onde a contenção é a piada |
cinematic | Dramático, escala blockbuster | Movimento grande, crescendos orquestrais/synth, ritmo de trailer |
app-store | Suave, limpo como cartão de recurso | Demonstração de UI nítida com microinterações táteis |