aakashmehra/superbrag

/superbrag

URL de site → vídeo promocional pronto: um vídeo curto e polido sobre um site, com narração, animação sincronizada com palavras e linguagem visual extraída do próprio site. Cores, fontes, cartões, fundo e avatar vêm do site que está sendo promovido. Cada imagem e afirmação vêm do site. As "telas" são maquetes de interface renderizadas com Remotion, não pixels gerados por IA.

<skill-dir> = a pasta que contém este arquivo. <ws> = a pasta do projeto atual do usuário. Configuração única (pule se <skill-dir>/.venv e <skill-dir>/template/node_modules existirem): precisa de Node.js 22+, FFmpeg, Python 3 e espeak-ng, depois execute bash <skill-dir>/scripts/setup.sh. Ele instala Remotion e Playwright, um ambiente Python com Kokoro (voz local gratuita) e faster-whisper (tempos de palavras), e escreve os caminhos em <skill-dir>/.env.

Invocação

/superbrag https://exemplo.com
/superbrag https://exemplo.com --foco "restaurantes"        # qual cliente/serviço contar a história
/superbrag https://exemplo.com --voz minimax|elevenlabs|kokoro --voz-id <id>

Padrão: a voz é Kokoro af_heart (gratuita, local). Se MINIMAX_API_KEY ou ELEVENLABS_API_KEY estiver definida em <skill-dir>/.env, esse provedor será usado. A saída vai para <ws>/superbrag-output/<slug-do-dominio>/, com sufixo -2, -3 se a pasta já existir.

Etapa 1: Capturar o site

export PATH="/opt/homebrew/bin:$PATH"   # macOS Homebrew; inofensivo em outros lugares
node <skill-dir>/scripts/capture.mjs <url> <run>

Isso grava <run>/site.json (título, meta, cabeçalhos, CTAs, texto completo, fontes, links do Google Fonts, cores, variáveis CSS e lista de imagens com texto alternativo e contexto circundante) e <run>/public/site/* (todas as imagens mais screenshot-hero.png e screenshot-full.png).

Em seguida, olhe as imagens (Leia-as). Detalhes impressos dentro das capturas de tela (avaliações, locais, horários de entrega) são algumas das melhores provas, então leia-os, não apenas o HTML. Se a página inicial não tiver foto de pessoa ou capturas de tela do produto, capture uma ou duas páginas vinculadas (sobre, projetos) para a mesma execução.

Portão: você pode nomear a pessoa ou empresa, onde estão, os 2 a 4 serviços, a melhor prova (avaliação, cliente, números), a oferta ou garantia, o texto do CTA, a URL e qual imagem é a foto da pessoa, o avatar ou logotipo, a captura de tela do produto e a imagem de prova.

Etapa 2: Escrever a história (<run>/story.json)

Escolha um tipo de cliente e um cenário concreto. Uma história clara vence três meias-histórias, então deixe os outros serviços de fora. Escolha o serviço com os visuais e provas mais fortes, a menos que --foco diga o contrário. Em seguida, preencha a fórmula de 9 batidas. Uma frase curta falada por batida, cerca de 75 a 85 palavras no total, o que resulta em aproximadamente 30 segundos.

#	tipo	Tarefa	Linha de exemplo (posflexgrowth.com)
1	search	Gancho: o cliente pesquisando agora	"Seu próximo paciente está pesquisando agora."
2	results	Problema: você está invisível (escuro)	"Mas outra clínica aparece primeiro."
3	cost (enter: slide)	Custo do problema (recibo escuro, barra encolhe)	"E cada chamada perdida vai para quem atender em seguida."
4	meet	A pessoa ou marca: foto + avatar, nome, cargo, selo de local, tagline	"Conheça Sajal Kumar, fundador da PosFlex na Nova Zelândia."
5	browser	Mostrar o produto real (captura de tela do site) com um painel fazendo o trabalho	"Cada chamada perdida recebe resposta por texto e é agendada. Nenhuma é perdida."
6	answer (enter: blur)	Prova: classificado #1 + uma resposta de IA recomenda	"Top três no Google Maps, e mencionado quando as pessoas perguntam à IA."
7	quote	A oferta ou garantia no papel, carimbada e assinada	"E nossa promessa de risco zero, por escrito, com meta de 12 semanas."
8	payoff	Tagline + palavra destacada; a pesquisa inicial se transforma no resultado	"Três tarefas: seja encontrado, seja recomendado, seja agendado."
9	end	Nome + botão CTA clicado + URL	"Obtenha seu plano de crescimento gratuito da PosFlex Growth."

Regras:

• O texto vem do site. Reutilize suas próprias frases (descrição meta, linhas de serviço, como funciona, FAQ). Invente apenas detalhes de cenário que o tornem concreto: a consulta de pesquisa, pratos e preços, um horário de reserva. Mantenha os detalhes inventados plausíveis para o local: moeda local, nomes locais.
• Repita a consulta. A mesma consulta de pesquisa aparece nas batidas 1, 2, 6 e 8. A história se fecha sobre si mesma, e é isso que a faz parecer projetada.
• Diga as palavras-chave. As revelações disparam quando sua palavra é falada, então place, a primeira palavra de name/role/tagline, cada entrada de chips, highlight.cue, price e highlight (desfecho) devem aparecer no say daquela cena.
• A linguagem visual vem do site. Nunca reutilize a aparência de outra marca: cada vídeo deve parecer com o site que foi alimentado. Leia site.json → design (cor da página, raio do cartão, borda e sombra, botões, fonte h1, tamanho, peso e espaçamento, cor de ênfase do título, marcadores) e Leia as capturas de tela public/site/section-*.png, depois defina:
  • primary = a cor principal da marca (botões e links); ink = a cor do texto do site; paper = design.pageBackground; dark = o tom mais escuro do site (sua tinta ou fundo do modo escuro) para as cenas de problema.
  • highlight = um pastel que o site realmente usa (uma cor de marcador ou uma variável CSS como --bg: #DFFAAA); accent = uma segunda cor da marca usada para selos e números.
  • style: radius = o raio do cartão mais comum em px; border = a cor da borda do cartão (omitir se os cartões não tiverem borda); shadow = flat (nenhuma), soft (levemente matizada) ou lifted (profunda); tracking = espaçamento entre letras h1 ÷ tamanho da fonte (ex.: -1,2px/60px = -0,02); headWeight = peso h1; emphasis = design.headlineEmphasisColors[0].
  • Fontes: head = fonte h1, ui = fonte do corpo, script = fonte de caligrafia do site, ou Caveat. Todas devem ser do Google Fonts.
  • Se o site escrever títulos em dois tons ("Preencha sua agenda"), marque as mesmas palavras com *estrelas* em title, headline e name (ex.: "PosFlex*.*" para um ponto do logotipo). Elas renderizam na cor de ênfase.
• background: light (a cor da página do site, plana) para sites claros, que cobrem a maioria. sky (nuvens de desenho animado flutuando sobre uma cor plana da marca) apenas se o próprio site tiver um motivo de céu ou nuvem. soft (cor plana da marca com texto branco) para marcas ousadas e saturadas. Sem gradientes em lugar nenhum: apenas cores planas.
• Avatar: build.py usa automaticamente o ícone Apple touch do site para o selo Conheça e o cartão final quando um é capturado. Defina avatar apenas quando o site não tiver nenhum, ou quando essa cena for sobre outra pessoa (ex.: um estudo de caso terminando no criador): então adicione "keepAvatar": true.
• Foto: para meet, use uma pessoa real: o fundador ou proprietário, da página sobre ou equipe se a página inicial não tiver (capture essa página em uma pasta temporária e copie a imagem). Corte qualquer nome ou legenda impresso na imagem (ffmpeg -vf crop=...).
• Não é uma pessoa? Em meet, use o logotipo ou fachada como photo e o mascote ou logotipo como avatar, com kicker: "Conheça" e o nome da marca.
• Adaptação para outros negócios: um site de serviços pode ser search "encanador de emergência perto de mim" → results concorrentes/anúncios → cost "chamadas perdidas esta semana" → browser formulário de orçamento + clique para ligar → answer → quote "preço fixo" → payoff "Serviço agendado". SaaS: a pesquisa se torna a tarefa a ser feita, o custo são horas perdidas e o navegador mostra o aplicativo.
• Pronúncia: verifique nomes de marcas e pessoas. TTS uma linha por candidato de grafia, transcreva cada um com $WHISPER_PYTHON e mantenha a grafia que retorna como o nome real. Para PosFlex, "Pos Flex" foi ouvido como "Poe's Flex" e "Poss Flex" foi ouvido como "POSFLEX". Coloque o vencedor em voice.pronounce, ex.: {"PosFlex": "Poss Flex"}. O texto na tela permanece correto.

Esquema: copie <skill-dir>/examples/posflexgrowth.story.json (um site claro com tokens de style completos) ou snapshare.story.json (um aplicativo, tema céu, com cenas de telefone) e altere os valores. Estas propriedades existem por tipo de cena (todas opcionais, a menos que marcadas com *):

• search: query*, title, suggestions[]
• results: query*, results[{title, sub}], title, pill
• cost: title*, label, items[{name, price}], totalLabel, total*, keep*, cut*, cutCue (a palavra que inicia o encolhimento da barra, padrão "comissão")
• meet: photo*, avatar, kicker, name*, role, place, tagline
• browser: screenshot*, tab, panel{title*, items[{name, price}], chips[], extra{image, title, sub}, highlight{label, value, cue}, button}
• answer: query*, result{image*, rank, name*, meta, rating, ratingLabel}, below, aiLabel, answer, source{icon, label}
• quote: title*, forLabel, checks[], priceLabel, price, stamp, signature, signNote, signCue (padrão "writing")
• payoff: headline*, highlight, query*, toast{title*, sub, meta}*
• end: name*, button*, avatar, url
• phone (aplicativos e produtos móveis): phone* (um PNG de telefone emoldurado com fundo transparente, ex.: do site ou capturas de tela da App Store), title*, kicker, big (uma estatística grande como "*0*"), points[] (chips que aparecem quando sua primeira palavra é falada), icon (ícone do aplicativo), side (left | right), bg (brand | paper | dark). Para um anúncio de aplicativo, substitua as batidas 4 a 6 por 3 a 5 cenas de telefone, um recurso cada. Veja examples/snapshare.story.json.

Cada cena também pode ter say, enter (cut | slide | blur, padrão cut) e hold (segundos extras). Caminhos de imagem são relativos a <run>/public (site/...).

Portão: story.json tem 9 batidas nesta ordem. Toda palavra-chave aparece em seu say. Todo texto remonta a site.json ou às imagens, exceto pelos detalhes do cenário.

Etapa 3: Construir voz + linha do tempo

python3 <skill-dir>/scripts/build.py <run>

Isso executa TTS para cada linha (armazenado em cache por texto), corta o silêncio, posiciona cada linha 0,18 s após o corte da cena, obtém tempos de palavras com faster-whisper e grava <run>/props.json e <run>/public/voice.wav. Imprime a linha do tempo, que deve totalizar 28 a 34 s. Se estiver longa, encurte as linhas; não acelere a voz. Execute novamente após qualquer edição na história; edições apenas visuais não chamam TTS novamente.

Etapa 4: Visualizar, depois renderizar

bash <skill-dir>/scripts/render.sh <run> stills "40,120,200,300,450,560,680,780,880"   # escolha quadros dentro de cada cena da saída da construção
bash <skill-dir>/scripts/render.sh <run>                                                # renderização completa, cerca de 30 s

Leia stills/sheet.jpg antes da renderização completa. Verifique se o texto não transborda dos cartões, se nomes longos cabem (encurte o texto em vez de reduzir fontes), se as imagens mostram o assunto correto e se as cores são legíveis no fundo. Após a renderização completa, leia qa-sheet.jpg (um quadro por segundo).

Portão: <run>/superbrag.mp4 existe com cerca de -14 LUFS (impresso). A folha QA mostra todas as 9 batidas sem nada cortado.

Etapa 5: Entregar

Informe ao usuário o caminho para superbrag.mp4, sua duração, qual história de cliente você escolheu e por quê, e quais detalhes foram inventados (a consulta, preços). Ofereça uma troca de voz (MiniMax ou ElevenLabs) se a leitura do Kokoro soar monótona. Linha de crédito para publicação: "Música: Sascha Ende, ende.app (CC BY 4.0)".

Notas

• Remotion é gratuito para indivíduos e empresas de até 3 pessoas; empresas maiores precisam de uma licença (remotion.dev/license).
• Para alterar a aparência de cada vídeo, edite template/src/scenes.tsx (layouts) e template/src/ui.tsx (movimento, fundo, fontes). Visualize com cd template && npx remotion studio src/index.ts --props=<run>/props.json --public-dir=<run>/public.
• Apenas paisagem 1920x1080 por enquanto. Vertical precisa de seus próprios layouts em scenes.tsx.