Criador de vídeo de lançamento

Constrói um vídeo de lançamento com motion graphics de 30 a 60 segundos para um produto ou recurso da <SUA_MARCA>, de ponta a ponta:

Remotion 4 composição React renderizada em MP4 (1920×1080 + 1080×1080)
ElevenLabs narração por IA (voz Bill por padrão), efeitos sonoros por evento e uma faixa de música de fundo
Sincronia baseada em batidas: cada fase visual lê seu quadro inicial das durações de áudio medidas em script.timings.json. Edite o texto → regere o áudio → todos os visuais se ajustam automaticamente. Sem ajustes manuais de quadros.
Se sua marca tiver um subsistema de movimento (componentes de vidro/cursor/pílulas de ferramentas), herde dele. Os padrões de referência descritos abaixo são um sistema válido: um subsistema de movimento glassmórfico (shells de chat, cursor, pílulas de ferramentas) sobreposto a um sistema tabular branco limpo (tabelas de resultados, painéis, rastreamentos).

Se seu repositório tiver um projeto Remotion de referência, aponte esta skill para ele. Caso contrário, os padrões descritos abaixo são autossuficientes. Caminho de implementação de referência no repositório de origem: <SEU_CAMINHO_DE_VIDEO_DE_REFERENCIA>.

Quando usar

Ativar em:

"Criar um vídeo de lançamento para X"
"Fazer um vídeo de lançamento / vídeo de produto / revelação de recurso"
"Renderizar um vídeo para o [recurso]"
Usuário digita explicitamente /launch-video

Pular para:

Gráficos estáticos para redes sociais → /graphics-designer
Apresentações de slides / webinars → seu pipeline de decks
Clipes de anúncio curtos < 8s → geralmente podem ser um still Remotion ou uma composição de uma cena; o pipeline completo desta skill é exagerado
Gravações brutas (cabeças falantes, gravações de webinar, vídeos de fundadores, entrevistas com clientes, demonstrações de captura de tela) → use /video-use em vez disso. Essa skill corta com base em limites de palavras de uma transcrição do Scribe, remove palavras de preenchimento, faz correção de cor e queima legendas. Esta skill é para motion graphics sintéticos construídos do zero no Remotion. Os dois se compõem: uma edição do /video-use pode gerar slots de sobreposição Remotion para inserções de animação com marca, mas o corte vem do /video-use.

Arquitetura em um diagrama

motion/<video-name>/
├── package.json              # remotion 4 + react 19 + tsx + dotenv + mp3-duration
├── remotion.config.ts        # publicDir → ../../brand/motion (fonte única de assets)
├── tsconfig.json
├── SCRIPT.md                 # roteiro de narração legível (por batida)
├── .env                      # ELEVENLABS_API_KEY (gitignored!)
├── .env.example
├── generate-audio.ts         # executor de narração ElevenLabs, com cache por hash
├── generate-sfx.ts           # executor de geração de som ElevenLabs, com cache por hash
├── generate-music.ts         # executor de música ElevenLabs + corte de silêncio inicial
├── script.timings.json       # durações da narração (gerado)
├── sfx.timings.json          # durações dos SFX (gerado)
├── music.timings.json        # duração da música (gerado)
└── src/
    ├── Root.tsx              # registerRoot
    ├── Video.tsx             # registro de composições + wrapper LaunchVideoComposition
    ├── theme.ts              # fps + duração + cores (espelha <SEU_CAMINHO_DE_TOKENS_DA_MARCA>)
    ├── script.ts             # batidas de narração (id, fase, texto)
    ├── timings.ts            # carregador para script.timings.json + beatStartFrame()
    ├── sfx.ts                # definições de clipes SFX (ancorados em quadros)
    ├── music.ts              # prompt de música + volume
    ├── Narration.tsx         # faixa Sequence apenas de narração
    ├── SoundDesign.tsx       # narração + SFX + música combinados
    └── scenes/
        ├── HeroBackground.tsx      # /video/hero-bg.mp4 em loop
        ├── OpeningScene.tsx        # cena de orquestração (ancora todas as fases)
        ├── GlassCursor.tsx         # cursor "você" no estilo multiplayer
        ├── CompanyTable.tsx        # tabela de dados com revelação de colunas
        ├── AgentDashboard.tsx      # visualização de semana do Google Calendar
        ├── AgentRunDetail.tsx      # visualização de rastreamento de chamadas de ferramenta
        ├── MemoryPanel.tsx         # painel de estatísticas + sparkline
        ├── Confetti.tsx            # explosão de partículas
        └── ClosingCard.tsx         # callback de chat de fechamento (o padrão "Convidando")

Assets vivem em brand/motion/:

video/hero-bg.mp4 + pôster (loop de fundo herói da sua marca · ex.: um vídeo ambiente em brand/motion/video/hero-bg.mp4)
logos/{models,tools,companies,sequencers}/ — marcas de terceiros
audio/{launch-narration,sfx,music}/ — mp3s gerados (commitados para renders reproduzíveis)
components/HeroChatMockup.tsx — shell de chat independente de framework

Fluxo de trabalho para um novo vídeo de lançamento

1. Briefing

Obter do usuário:

Público-alvo: para quem é (equipes de GTM? Engenheiros? Investidores?)
Duração: segundos alvo (padrão 30-45s; 60s+ parece longo para hype)
Mensagens-chave: 4-8 coisas para comunicar, em ordem narrativa
Formatos de saída: paisagem (web/LinkedIn), quadrado (IG/feed) ou ambos

2. Esboçar batidas

Cada batida = uma frase de narração que cai durante uma fase visual. Normalmente 6-8 batidas. Soma das durações de áudio das batidas = duração total. Durações das batidas alvo: 3-7s cada.

Para cada batida, capture: id, phase (descrição visual de uma linha), text (fala, 10-20 palavras).

3. Escrever SCRIPT.md

Salve o roteiro como um irmão de package.json para revisão humana. Formato:

## Batida N — Nome da fase
**Quadros** ~início–fim (segundos) · **alvo ~Npalavras**

> "Fala aqui."

**Sincronia visual:** o que acontece na tela.

4. Construir `src/script.ts`

Espelha SCRIPT.md como dados. O gerador de narração e a composição importam SCRIPT. Sem imports do Remotion aqui para que os geradores possam rodar em Node puro:

export interface Beat { id: string; phase: string; text: string; }
export const SCRIPT: Beat[] = [...];
export const AUDIO_SUBDIR = "audio/launch-narration";
export function audioPath(id: string) { return `${AUDIO_SUBDIR}/${id}.mp3`; }

5. Gerar narração

cd motion/<video-name>
cp .env.example .env  # cole ELEVENLABS_API_KEY
npm install
npm run generate-audio

Isso cria brand/motion/audio/launch-narration/{beat-id}.mp3 e escreve durações em script.timings.json. Usa hash por texto da batida para que batidas inalteradas sejam puladas em execuções subsequentes (iteração barata).

6. Construir a cena visual

Em OpeningScene.tsx:

Calcule os inícios das batidas no carregamento do módulo:

const HERO_BEAT     = beatStart("hero", 0);        // → 0
const DATABASE_BEAT = beatStart("database", 0);    // → 171 (após hero terminar)
// ... etc

Expresse cada quadro de animação como BEAT_X + offset:

const BADGE_IN     = HERO_BEAT + 6;
const TYPE_START   = HERO_BEAT + 38;
const TOOLS_START  = HERO_BEAT + 115;  // sincronizado com a letra "GTM stack"
const CURSOR_PRESS = HERO_BEAT + 165;

Faça crossfade entre cenas de fase usando portas de opacidade por batida.

7. Gerar SFX (opcional, mas de alto impacto)

Defina momentos de clique/transição em src/sfx.ts. Ancóre cada clipe a um fromFrame específico usando o mesmo helper beatStartFrame(). Exemplos de clipes que valem a pena:

textura de digitação sob animação de prompt
clique nítido em pressionamentos de cursor
pop comemorativo em momentos de "inscrever" / conclusão
aumento sutil na revelação do cartão de fechamento

npm run generate-sfx

8. Gerar música

Defina um prompt + duração em src/music.ts. generate-music.ts corta o silêncio inicial automaticamente (a música da ElevenLabs geralmente abre com um compasso silencioso que soa como "sem música" contra a narração).

npm run generate-music

9. Iterar com renders

npm run render:landscape

Renderizar leva ~30-90s. Sempre recodifique a saída para yuv420p com range TV para compatibilidade com QuickTime — o vídeo de fundo é yuvj420p (range JPEG) e a propagação quebra a reprodução em alguns players:

ffmpeg -y -i out/launch-landscape.mp4 \
  -c:v libx264 -profile:v high -level:v 4.0 \
  -pix_fmt yuv420p -color_range tv -crf 18 -c:a copy \
  out/launch-landscape-fixed.mp4
mv out/launch-landscape-fixed.mp4 out/launch-landscape.mp4

Use ffmpeg -ss N -i ... -frames:v 1 /tmp/check.jpg para verificar carimbos de data/hora específicos sem assistir ao render inteiro.

Regras de design

Voz (visual + falada)

Nunca use travessões. Apenas pontos, vírgulas, dois pontos, parênteses, ponto médio.
Palavras proibidas em qualquer lugar: alavancar, sinergia, robusto, classe mundial, perfeito, intuitivo, poderoso, inovador.
Numerais vencem adjetivos ("8 ferramentas" não "muitas ferramentas").
Conciso, concreto. Sem rodeios.
Fechamento: liderado pela marca, não "Parabéns." O padrão de fechamento mais forte encontrado aqui: chamada "Convidando" → entrada de chat com um novo prompt digitado → assinatura de URL. O callback do chat para a batida de abertura vence comemoração toda vez.

Cor (exemplo de tokens · ajuste à sua marca)

Claro, neutro. Apenas um acento, usado uma vez por cena onde ganha significado (ponto ativo, destaque, estado de sucesso).

Token	Hex	Uso
`--bg`	`#fafafa`	fundo da página
`--surface`	`#ffffff`	cartões, painéis
`--ink`	`#0a0a0a`	texto primário + numerais
`--muted`	`#71717a`	texto secundário
`--line`	`#e4e4e7`	bordas
`--accent`	`#10b981`	o único acento

Tipografia

Pilha: 'Helvetica Neue', Helvetica, Arial, sans-serif
Mono (kickers, código, rótulos): ui-monospace, 'SFMono-Regular', Menlo
Tipografia herói: peso 450 com tracking apertado (-0.05em)
Estilo mono kicker: 11-14px, maiúsculas, letter-spacing 0.16-0.18em, cor #71717a ou #a1a1aa
Partes em negrito/médio no texto do corpo cinza mudo espelham o padrão da marca: <span style={{ color: "#0a0a0a", fontWeight: 500 }}>negrito</span> vs texto #71717a ao redor.

Dois modos visuais

Escolha um por cena; não misture:

Glassmórfico / no produto — shell de chat, cursor, pílulas de ferramentas, sobre o vídeo de fundo herói. Vidro branco com backdrop-filter: blur(28px), rgba(255,255,255,0.45).
Branco limpo / tabular — tabelas, painéis, rastreamentos, painel de memória. bg #ffffff, 1px solid #e4e4e7, sombra sutil.

A transição de fade de fundo entre modos é um dos momentos mais cinematográficos; reserve ~20-30 quadros para ela e use Easing.bezier(0.4, 0, 0.2, 1) (padrão material) para suavidade.

Regras de animação

Damping 22-28 em molas. Abaixo de 20 você obtém um salto que parece amador. Use 14-18 apenas quando quiser intencionalmente um "pop".
Staggers mais apertados > mais lentos. O primeiro instinto é sempre desacelerar; a segunda passagem geralmente envolve cortar os staggers pela metade. Stagger padrão entre itens em cascata: 3-6 quadros.
Sincronize visuais com letras onde importa. Se a narração diz "GTM stack", as pílulas de ferramentas devem entrar naquela palavra — não 3s antes. Use with_timestamps da ElevenLabs para sincronia no nível da palavra, ou estime pela duração da batida / contagem de palavras se aproximado for suficiente.
Reserve alturas de linhas. Quando tabelas/cartões animam texto, minHeight na linha impede que o layout salte conforme o conteúdo preenche. Parece estranho se as linhas crescerem durante a cascata.
Renderize condicionalmente em vez de opacidade 0 se criasse um retângulo vazio alto. Cartões que ainda não começaram a revelar não devem ocupar espaço.
Crossfade entre modos de cena, não corte seco. Cada cena principal recebe uma porta de opacidade animada via interpolate + curvas de easing.

Pegadinhas da ElevenLabs

Voz + modelo padrão: generate-audio.ts padroniza para Bill (pqHfZKP75CvOlQylNhV4) no eleven_multilingual_v2. Bill é a voz de caso de uso advertisement na biblioteca da ElevenLabs: sábia, madura, nítida. Soa como um locutor de anúncio real, não "cara de IA nas redes sociais". multilingual_v2 é o modelo mais estável + realista para narração de produção. Não use eleven_turbo_v2_5 para vídeos de lançamento — é o modelo rápido/barato e a diferença é audível contra um vídeo de fundo herói. Turbo é bom para prévias / verificações de tempo de SFX, não para o render final.
Configurações de voz incorporadas no script: stability 0.40, similarity_boost 0.75, style 0.30, use_speaker_boost true. De acordo com as melhores práticas da ElevenLabs: estabilidade abaixo de 0.30 é instável, acima de 0.60 é monótona; similaridade 0.75 é o ponto ideal da documentação; estilo 0.20–0.40 adiciona expressividade sem desvio. Não empurre o estilo acima de 0.4 a menos que queira oscilações de entonação perceptíveis.
A chave de cache de voz inclui voz + modelo + configurações. Trocar qualquer um deles (ou editar o texto da batida) invalida o MP3 em cache e re-renderiza a batida. Basta editar .env (VOICE_ID=... MODEL_ID=...) ou generate-audio.ts e executar novamente npm run generate-audio.
Outras vozes com qualidade de narração se Bill não servir:
- Eric cjVigY5qzO86Huf0OWal — suave, confiável, sensação SaaS moderna
- Chuck Miller HIGUfNOdjuWQwwapnTRW — clone profissional, rouco profundo, cinematográfico
- George JBFqnCBsd6RMkjVDRZzb — contador de histórias britânico, narrative_story
- Logan jD4PjnscE4XmlzgsuqY0 — clone profissional, jovem contador de histórias
- Brian nPczCjzI2devNBz1zQrb — o padrão legado; rotulado social_media, soa mais "IA" que Bill
- Amostre A/B estes no seu projeto Remotion de referência antes de confirmar
Listar vozes requer permissão voices_read. Algumas chaves não a possuem; se você não puder GET /v1/voices, recorra a IDs conhecidos.
A API de música rejeita nomes de marcas em prompts. "Apple keynote", "trailer de lançamento Linear" etc. disparam uma violação dos Termos de Serviço. Descreva a vibe sem nomear marcas ("instrumental cinematográfico para um trailer de lançamento de tecnologia moderna", "batida eletrônica pulsante com melodia de sintetizador arpejada").
A música começa com silêncio inicial (~1-2s) por padrão. O filtro silenceremove do ffmpeg do gerador o remove para que a reprodução comece no quadro 0. Mantenha esse filtro no lugar.
A duração mínima de efeitos sonoros é 0,5s. Qualquer coisa abaixo disso, a API retorna erro. Arredonde para cima.
Volume da música: 0.10 soa como silêncio sob narração; 0.15-0.18 é o ponto ideal — claramente presente, mas não briga com a voz.

Armadilhas a evitar

Adicionar <Audio> sem <Sequence>: tocará do começo ao fim da composição, ignorando a sincronia de quadros. Sempre envolvê-lo em uma <Sequence from={...}>.

Render para formatos alternativos

npm run render:square    # 1080×1080

Os scripts de render lêem publicDir de remotion.config.ts e saem para out/.

Integração CI opcional (GitHub Actions)

Um workflow de exemplo é fornecido em .github/workflows/launch-video.yml. Ele:

Verifica o repositório
Instala dependências (Node 20 + ffmpeg + chromimum)
Executa npm run render:landscape e npm run render:square
Corrige o espaço de cor YUV
Faz upload dos MP4s como artefatos de ação

A renderização CI requer que os assets de áudio estejam confirmados no repositório (eles são pequenos — ~50-200KB por batida) ou que um cache de pacote armazene os resultados do generate-audio.

Empacotar como ferramenta CLI reutilizável (opcional)

Se você usa esta skill com frequência, considere transformá-la em um modelo npm. O padrão atual (copiar diretório de outra branch) funciona, mas um modelo com npx create-launch-video economizaria 10 minutos por vídeo.

Exemplo de saída

Depois de executar npm run render:landscape && npm run fix-yuv, out/launch-landscape.mp4 contém um MP4 H.264 de 30-45s com:

Narração
Efeitos sonoros digitados + transições
Três fases de cena (abertura, demonstração, fechamento)
Crossfades suaves entre modos

timscheuerai/content-vault

O que é content-vault?

Perguntar na sua IA favorita

Documentação

Criador de vídeo de lançamento

Quando usar

Arquitetura em um diagrama

Fluxo de trabalho para um novo vídeo de lançamento

1. Briefing

2. Esboçar batidas

3. Escrever SCRIPT.md

4. Construir `src/script.ts`

5. Gerar narração

6. Construir a cena visual

7. Gerar SFX (opcional, mas de alto impacto)

8. Gerar música

9. Iterar com renders

Regras de design

Voz (visual + falada)

Cor (exemplo de tokens · ajuste à sua marca)

Tipografia

Dois modos visuais

Regras de animação

Pegadinhas da ElevenLabs

Armadilhas a evitar

Render para formatos alternativos

Integração CI opcional (GitHub Actions)

Empacotar como ferramenta CLI reutilizável (opcional)

Exemplo de saída

Habilidades Relacionadas

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

Perguntar na sua IA favorita

Documentação

Criador de vídeo de lançamento

Quando usar

Arquitetura em um diagrama

Fluxo de trabalho para um novo vídeo de lançamento

1. Briefing

2. Esboçar batidas

3. Escrever SCRIPT.md

4. Construir src/script.ts

5. Gerar narração

6. Construir a cena visual

7. Gerar SFX (opcional, mas de alto impacto)

8. Gerar música

9. Iterar com renders

Regras de design

Voz (visual + falada)

Cor (exemplo de tokens · ajuste à sua marca)

Tipografia

Dois modos visuais

Regras de animação

Pegadinhas da ElevenLabs

Armadilhas a evitar

Render para formatos alternativos

Integração CI opcional (GitHub Actions)

Empacotar como ferramenta CLI reutilizável (opcional)

Exemplo de saída

Habilidades Relacionadas

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

4. Construir `src/script.ts`