maddexritter-rgb/vibe-editing-promo

/promo — Gerador de vídeos de marca (Remotion + Claude Code)

Cria dois tipos de vídeo premium de marca. Desenvolvido com Remotion (vídeo baseado em React) + Claude Code + a habilidade remotion-best-practices.

🎬 ESCOLHA O MODO PRIMEIRO (pergunte ao usuário se não for óbvio)

• MODO A — EXPLICADOR / DEMO ANIMADO. Totalmente animado, sem filmagem longa real como espinha dorsal. Demos de apresentações, lançamentos de funcionalidades, o vídeo do volante de conteúdo, promoções de SaaS, explicadores de marca. → construído a partir de templates/glass/ (liquid-glass premium) ou templates/saas/. Veja a seção glass abaixo. Exemplo trabalhado: ~/Downloads/engine/2026-06-12_WorkflowDemo (a composição FlywheelFilm).
• MODO B — FILME DE ARQUIVO / HISTÓRIA DE ORIGEM. O usuário fornece um corte de montagem longo (sua própria edição — filmagem real, capítulos separados por quadros pretos) e deseja transformá-lo em um filme de marca: cartões de capítulo entre seções, música combinada com cena por capítulo, transições de flash e um clímax de curva de crescimento. → cartões de era + assemble.py. Veja a seção MODO B abaixo. Exemplo trabalhado: ~/Downloads/engine/2026-06-14_BrandHistory (um filme de origem "4,5 anos em ~5 minutos").

Ambos os modos compartilham o mesmo kit de vidro tokenizado por marca (sting, GlassBG, cartões de era, curva de crescimento, constants.ts de marca), então eles parecem da mesma família. Reidentifique a marca em constants.ts + logotipos em public/ — nunca codifique um nome de marca em um componente.

Quando usar isso (vs. outras habilidades de vídeo)

• ✅ Use isso: vídeos promocionais independentes, demonstrações SaaS, teasers de curso, vídeos de lançamento de funcionalidades, explicadores animados a partir de uma URL
• ❌ Não use isso: clipes de cabeça falante, reenquadramento com rastreamento facial, cirurgia de palavras de preenchimento, legendagem de vídeo existente (use shortform / caption-clips)

Modelos de animação SaaS prontos

Três componentes Remotion prontos para produção para o "estilo de animação SaaS" (o estilo de vídeo de US$ 1-2k que domina o Instagram/TikTok de tecnologia em 2026). Coloque-os em qualquer projeto Remotion:

• templates/saas/SaasTextPopup.tsx — introdução de marca de 4s com texto pop-in + revelação do logotipo
• templates/saas/SaasGlassReveal.tsx — cartões de funcionalidade de UI de vidro de 6s com desfoque de fundo
• templates/saas/SaasDashboardTour.tsx — tour de painel 3D de 8s com cursor animado

Referência técnica completa em editing-styles/saas-animation-style.md. Orquestrador encadeado em saas-animation-video — acione com "crie um vídeo de animação SaaS".

Veja templates/saas/README.md para fiação + personalização de marca.

---

🟣 VÍDEOS PREMIUM DE DEMONSTRAÇÃO / EXPLICADOR LIQUID-GLASS — templates/glass/

O sistema por trás do vídeo de apresentação de alto nível e nativo da marca "uau" (o tipo que é inserido em uma apresentação de slides como uma demonstração ao vivo). Use isso — não os modelos saas — quando o briefing for um explicador/demonstração polido, orientado por apresentação ou conceito com filmagem real, UI de produto real e texto em negrito na tela em vez de narração. Exemplo trabalhado: ~/Downloads/engine/2026-06-12_WorkflowDemo (a composição FlywheelFilm — uma demonstração de volante de conteúdo). 1920×1080 @ 30fps, tarjas inferiores em negrito, sem VO.

INDEPENDENTE DE MARCA. O kit é tokenizado por marca. Defina a marca em src/constants.ts (COLORS + fonte) e coloque os PNGs do logotipo da marca em public/. O exemplo usa Speaker / company.com (Sambucus #131628, Electric Indigo #6f00ff, Lavender #a08bec, Poppins) — troque esses tokens por marca; nunca codifique um nome de marca em um componente.

O que está no kit (templates/glass/src/)

• constants.ts — tokens de marca (COLORS, FPS, WIDTH, HEIGHT, predefinições de mola). O ÚNICO lugar para reidentificar a marca.
• components/GlassBG.tsx — fundo gradiente de orbe flutuante persistente (a base de fluxo contínuo; fica atrás de cada batida).
• components/GlassPanel.tsx — o painel de "vidro líquido" fosco (desfoque de filtro de fundo + brilho + profundidade). Variante dark para legibilidade do texto. backdrop-filter FUNCIONA no Chrome headless do Remotion.
• components/GlassBeats.tsx — as primitivas de batida: GlassTitle (cartão de gancho), GlassFrame/SceneDemo (UI em uma janela de vidro + narração), GlassOutro (cartão de conclusão + logotipo), PayoffCard.
• components/BrandSting.tsx — ~1,5s de sting do logotipo (riscas → flash → desabrochar da marca → wordmark).
• components/CreateShots.tsx — NarratorChip (a tarja inferior em negrito = a camada "texto em negrito, sem VO") + tomadas do media player.
• components/Flywheel.tsx — batidas características: ContentFlywheel (o ANEL de loop de composição), FlywheelEscalation (clímax de linha de pilha), AutoPostScheduler (terminal ao vivo + gravação de tela real, lado a lado), RawSessionPlayer, HeroClipPlayer (clipe em um quadro de telefone), Tier1Prompt/Tier1Pipeline (comando + etapas).
• components/ChannelScroll.tsx — uma rolagem de feed de canal real (miniaturas + durações). RealClipShowcase.tsx — uma grade de clipes verticais reais sendo reproduzidos. GlassBrowser.tsx — UI de aplicativo em um quadro de navegador. ScaleWall/Odometer/Stopwatch — volume + drama numérico. FXOverlay — grão/vinheta.
• audio/index.tsx — AudioBed (música, baixo) + Sfx (whoosh/braam/riser/tick…) com um mapa de ganho MESTRE.
• compositions/FlywheelFilm.tsx — o exemplo trabalhado: sting → gancho → prova bruta → comando → pipeline → (meio: canal + terminal/publicação automática/gravação) → (shorts: herói + grade) → anel de volante → escalada → final.

O playbook de produção (a ordem que funciona)

1. LEIA o material de origem PRIMEIRO (a apresentação / briefing). Extraia o conceito E a linguagem própria da marca — retire linhas literais para as batidas para que o vídeo pareça nativo da apresentação deles. (Não invente cópia genérica.)
2. Defina os tokens de marca em constants.ts; coloque logotipos em public/ (veja a pegadinha nº 5 sobre PNGs de logotipo).
3. Storyboard as batidas com TransitionSeries (sting → gancho → batidas de demonstração → loop de conclusão → escalada → final). Mantenha apertado (~38–45s) — batidas rápidas, tarjas inferiores em negrito. ("Muito lento" é a observação nº 1.)
4. Conecte ativos reais (veja padrões abaixo) — filmagem/UI reais > maquetes, sempre.
5. Renderize: npx remotion render <CompId> out/<nome>.mp4 --codec=h264 --crf=16 (adicione "use as melhores práticas do Remotion" ao solicitar edições).
6. QC EXTRAINDO QUADROS — nunca confie cegamente (pegadinha nº 1).
7. Entregue no 20_DELIVER/ do projeto (com nome da marca). Somente local, a menos que instruído de outra forma.

Padrões de ativos reais

• Filmagem → <OffthreadVideo muted startFrom={..} playbackRate={..} /> dentro de um player de vidro/telefone/navegador. Crie proxies (720×1280 / 1080) para que o estúdio + a renderização permaneçam rápidos.
• Gravações de tela → corte APENAS a UI do aplicativo (mate a guia do navegador/barra de endereços/banner): ffmpeg -ss A -t B -i rec.mov -vf "crop=W:H:0:Y,scale=1600:-2" -an out.mp4. Acelere (playbackRate 2–3,5×) para que ela progrida visivelmente pelas etapas, sem demorar.
• Terminal + gravação lado a lado (a batida matadora): um terminal estilizado cujo log espelha o stdout do ROTEIRO real (leia a habilidade/script real para obter linhas autênticas) ao lado da gravação de tela real — os dois lendo os mesmos nomes vende como um sistema. Veja AutoPostScheduler.
• Dados/miniaturas reais → puxe ao vivo: yt-dlp "https://youtube.com/@CHANNEL/videos" --flat-playlist --print "%(id)s|%(duration_string)s|%(title)s", depois miniaturas de https://i.ytimg.com/vi/<id>/maxresdefault.jpg (fallback mqdefault.jpg). Para dados de clipe do Speaker, o MCP your analytics.

🛑 AS PEGADINHAS — cada uma é uma correção real da construção disso; leia antes de renderizar

1. QC por quadros, nunca cegamente. Após cada renderização, ffmpeg -ss <t> -i out.mp4 -frames:v 1 f.jpg em CADA batida e realmente olhe. Renderize a primeira metade cedo com --frames=0-540 enquanto os ativos terminam.
2. Salada de texto de transição. Duas batidas de texto que se cruzam se sobrepõem em lixo ilegível. CORREÇÃO: desvaneça o conteúdo de CADA batida de texto ao longo de seus últimos ~14 quadros (um exit = interpolate(f,[dur-16,dur],[1,0]) multiplicado na opacidade) para que desapareça antes que o próximo se cruze. (Ou corte bruscamente as batidas de texto.)
3. Vazamento do sting/logotipo. Um sting (ou qualquer batida) que termina em um logotipo brilhante VAZA ATRAVÉS do próximo cartão de vidro translúcido durante o crossfade. CORREÇÃO: desvaneça o logotipo do sting em SEU PRÓPRIO final para que ele passe a vez em um quadro escuro limpo.
4. Escurecimento de texto sob véu (sutil!). Um <AbsoluteFill> de véu é um irmão posicionado, então ele pinta ACIMA do texto estático e o escurece — branco brilhante sobrevive, texto secundário/lavanda é esmagado e fica fraco. CORREÇÃO: coloque o véu em zIndex:0 e envolva o texto em um contêiner position:relative; zIndex:1. (Então um véu de alta opacidade mata o pulso "brilho-depois-desbrilho" do orbe flutuante sem escurecer o texto.)
5. Logotipos invisíveis. Um PNG de logotipo quadrado com preenchimento transparente renderiza a marca real minúscula/invisível. CORREÇÃO: corte o PNG para seu conteúdo primeiro, depois dimensione pela LARGURA (<Img style={{ width: 600, height: 'auto' }} />).
6. Corte de áudio. Efeitos sonoros não mapeados tocam em 1,0 → clipe de escala completa. CORREÇÃO: um ganho MESTRE (~0,5) + um mapa de VOL completo por SFX + música ~0,2 sob a voz; loudnorm I=-14:TP=-1.5 no entregável final. Verifique se o volumedetect máximo é ≤ ~−3 dB.
7. Divisão de palavras do zsh. for x in $VAR NÃO divide no zsh (uma iteração com a string inteira). Use uma lista literal ou ${=VAR}. (Me pegou ao baixar miniaturas em lote.)
8. Mantenha o último quadro vivo (não preto) — os finais terminam no cartão do logotipo; verifique se a luminância do último quadro é > ~10.
9. Fontes via @remotion/google-fonts (Poppins, JetBrainsMono). Números/palavras-chave brilham com um textShadow constante (não confie no fundo para brilho — veja nº 4).

🧊 3D + PARALAXE 2.5D + ☁️ ESCALA DE NUVEM (power-ups do MODO A)

Exemplo trabalhado: ~/Downloads/_PROJECTS/2026-06-15_3DSaasDemo (uma demonstração SaaS de amostra — herói com paralaxe, cartões de painel de vidro flutuantes, gráfico de barras 3D + uma variante WebGL verdadeira).

3D — dois caminhos

• CSS 3D (padrão, sem dependências, renderiza em qualquer lugar). Envolva uma cena em perspective + transformStyle:'preserve-3d'; coloque camadas em diferentes translateZ e anime o Z do mundo com useCurrentFrame() = um dolly de câmera onde camadas próximas se movem mais do que as distantes (paralaxe 2.5D real). Cartões de vidro flutuantes, gráficos de barras extrudados (faces frontal/lateral/superior), pisos de grade recuados vêm de transformações CSS. Recorra a isso primeiro — é à prova de balas no Chrome headless.
• WebGL verdadeiro — @remotion/three + React Three Fiber. Malhas reais, iluminação, sombras, materiais. Use apenas quando CSS-3D não puder (geometria/iluminação/DOF reais). Instale @remotion/three + @react-three/fiber@^9 + three (R3F v9 é necessário para React 19; v8 é React 18). Anime com useCurrentFrame() do Remotion, NÃO com useFrame do R3F (Remotion renderiza quadro a quadro). Envolva em `<ThreeCanvas width