Skill

---
name: video-promo-sistema
description: Cria vídeo promocional vertical 9:16 (Reels, TikTok, Stories, Shorts) de um sistema, app ou SaaS, em código com Remotion, no estilo showcase de produto (tipo Gcore/Apple). As telas do sistema são recriadas em React a partir de gravações de tela, com câmera 3D inclinada, glow na cor da marca, legendas animadas, cards saltando da tela, cursor clicando, contadores, mascote/logo pulando no final com CTA, e música + efeitos sonoros próprios sincronizados. Use sempre que o usuário quiser um vídeo de apresentação, demonstração, divulgação ou propaganda de um sistema/software/app, mandar gravações de tela pedindo um vídeo "profissional", "de agência", "animado" ou "pra Instagram", citar um vídeo de referência de produto para imitar, ou pedir para refazer/ajustar um vídeo feito com esta skill. Não é para carrossel, post estático ou banner (use /post).
---

# Vídeo promocional de sistema (9:16)

Transforma gravações de tela de um sistema num vídeo vertical de ~30–40 s que **vende o benefício**
(não ensina a clicar): cada cena mostra uma ação real do sistema com a câmera focando no que importa,
uma legenda curta dizendo o ganho para o cliente e o número-chave saltando da tela.

Tudo sai de um projeto-modelo em `assets/template` (Remotion + React) e de scripts Python em `scripts/`.
Caminho da skill: `~/.claude/skills/video-promo-sistema` (no Windows: `C:\Users\<usuário>\.claude\skills\video-promo-sistema`).
Chame de `$SKILL` abaixo.

Fale com o usuário no idioma dele e sem jargão: ele quer o vídeo, não detalhes de React.

## Fase 1 — Entender o material

1. **Vídeos.** Para cada arquivo recebido:
   ```bash
   python "$SKILL/scripts/frames.py" info "VIDEO.mp4"
   python "$SKILL/scripts/frames.py" extrair "VIDEO.mp4" "<scratchpad>/quadros-sistema" --a-cada 5
   ```
   Leia as folhas de contato (`folha1.jpg`...) e depois abra quadros soltos nos momentos importantes
   (`recorte --t 12.5 --zoom 2` para ler textos pequenos). Anote: telas, rótulos exatos, valores digitados,
   avisos (toasts), modo escuro, mascote, e o que muda na tela depois de cada ação.
   Se houver vídeo de referência, extraia também e anote o estilo (cortes, ritmo, câmera), não o conteúdo.

2. **Código do sistema (vale muito a pena procurar).** Pergunte ou procure a pasta do projeto no disco
   (ex.: `ls ~/"meus projetos"`, nome parecido com o do sistema). Leia só para copiar:
   variáveis CSS de cor (claro e escuro), fontes (`<link>` do Google Fonts), SVG do logo/mascote,
   textos dos botões e labels. Isso deixa o vídeo idêntico ao sistema em vez de "parecido".
   Nunca altere o projeto do cliente.

3. **Números coerentes.** Se o vídeo mostra conta (custo, preço, margem, estoque, total), confira que
   batem entre si e com a gravação (ex.: 110 por saco de 250 kg = R$ 0,44/kg; 10 kg × 7,90 = 79,00).
   O espectador não perdoa conta errada num vídeo que vende "controle".

## Fase 2 — Repassar o entendimento e esperar o aval

O usuário quer ver o plano antes de você construir (use plan mode se estiver disponível). Mostre de forma curta:
- roteiro com tempos (abertura, 3–5 cenas de ~5–10 s, final com CTA), o que acontece em cada cena
  e a legenda de cada uma (título de 2 linhas curtas + subtítulo de 1 linha);
- valores que serão digitados e números em destaque;
- decisões: telas recriadas em código (a gravação fica borrada ampliada em 1080x1920 e não deixa animar
  números), duração, música/efeitos sintetizados;
- o que falta: texto/contato do botão final, pasta onde salvar (sugira `~/meus projetos/<nome>-video`).

Não comece a Fase 3 sem o "pode fazer".

## Fase 3 — Montar o projeto

```bash
cp -r "$SKILL/assets/template" "<pasta-do-projeto>"
cd "<pasta-do-projeto>" && mv gitignore.txt .gitignore && npm install
```
No Windows, use um caminho curto (ex.: `C:\Users\<u>\meus projetos\x-video`): caminhos muito longos
estouram o limite de 260 caracteres e o npm/python falham com "nome muito grande".

Edite nesta ordem (os arquivos têm comentários explicando cada parte):
1. `src/theme.ts`: fontes, paleta clara/escura do sistema, `BRAND` (cor da luz do vídeo = cor da marca).
2. `src/ui/`: recrie as telas em `App.tsx` (substitua o exemplo), logo real em `Logo.tsx`,
   mascote se houver (modelo animável em `references/exemplos/Gatinho.tsx`). Tamanhos fixos em px.
3. `src/story.ts`: `T` (momentos), `L` (alvos de clique), câmera, cursor, legendas, deixas de som e
   `appState(f)` (o que a tela mostra em cada frame). Detalhes e receitas em `references/roteiro-e-camera.md`.
4. `src/Video.tsx`: nome, cards de profundidade, toasts, Intro/Outro (CTA, botão, herói do final).

Leia `references/estilo-visual.md` antes de escrever legendas e posicionar coisas: ele tem os tamanhos
mínimos para ler no celular e as armadilhas que já apareceram (legenda sobre janela branca etc.).

## Fase 4 — Medir e revisar com imagens (não pule)

Você não enxerga o vídeo rodando, então revise por quadros:

1. **Medir posições** com câmera reta + grade:
   ```bash
   npx remotion still Video out/revisao/grade.png --frame=N --props='{"debug":true,"flat":true,"mute":true}'
   ```
   Conversão (câmera reta): `janela_x = (x_png - 2.4) / 0.84`, `janela_y = (y_png - 521.5) / 0.84`,
   e `L` usa coordenada da tela do sistema = `janela_y - 44`. Corrija `L` e o cursor.
2. **Revisão cinematográfica**: renderize 9–12 stills espalhados (`--props='{"mute":true}'`) e junte numa
   grade **mantendo a proporção 9:16** (grade distorcida já levou a medir errado). Procure:
   legenda sobre algo claro, texto cortado nas bordas, card fora da tela, números no meio da contagem
   em quadros que ficam parados, cursor longe do botão no clique, título quebrando em 3 linhas.
3. Corrija e re-renderize só os quadros afetados.

## Fase 5 — Som

```bash
python "$SKILL/scripts/sfx_kit.py" --saida public/audio/sfx
python "$SKILL/scripts/music.py" --duracao <s> --groove <início> <fim> --impacto <s> --saida public/audio/trilha.wav
```
Tudo sintetizado (sem direito autoral). Ligue a música ao roteiro: groove começa quando entra a
primeira cena, termina quando entra o respiro/final, impacto no pouso do herói. As deixas (`CUES`
em `story.ts`) já acompanham cada clique, letra digitada, whoosh de câmera, pop de card e tique de
contador. Se o usuário mandar um MP3 próprio, use-o no lugar de `trilha.wav`. Detalhes: `references/audio.md`.

Você não consegue ouvir: confira por medição depois do render (Fase 6) e diga isso ao usuário.

## Fase 6 — Render e entrega

```bash
npx remotion render Video out/<nome>.mp4        # rode em segundo plano; ~3–6 min para 38 s
python "$SKILL/scripts/frames.py" info out/<nome>.mp4
python "$SKILL/scripts/frames.py" folha out/<nome>.mp4 out/revisao/final.png --n 16 --colunas 8
```
Confirme 1080x1920, 60 fps, duração certa e `áudio: sim`; olhe a folha final. Volume: rode o
`volumedetect` do ffmpeg (`frames.py` usa o ffmpeg do pacote imageio-ffmpeg) e garanta pico abaixo de -0,5 dB.

**Entrega (o usuário se perdeu nisso antes):**
- copie o MP4 para `~/Downloads/<nome>-video-final.mp4` e abra a pasta com ele selecionado
  (`explorer.exe /select,"<caminho>"` no Windows);
- diga o caminho exato e que os arquivos `.ts`/`.tsx` são o código, não o vídeo
  (o Windows tenta abrir `.ts` como vídeo e dá erro);
- mande o arquivo pela ferramenta de envio de arquivos se houver;
- liste em poucas linhas o que tem em cada trecho e as decisões que você tomou sozinho
  (ex.: texto do botão, valores fictícios) para ele revisar.

## Pedidos de ajuste depois

| Pedido | Onde |
|---|---|
| Textos das legendas, CTA, botão | `story.ts` (CAPTIONS), `Video.tsx` (Outro) |
| Mais rápido/lento, mudar ordem | `story.ts` → `T`, câmera e cursor juntos; depois gere a música de novo com os novos tempos |
| Música mais alta/baixa, tirar efeito | `Video.tsx` (`volume` da trilha) / remova a deixa em `CUES` |
| Cores | `theme.ts` |

Sempre re-renderize e atualize a cópia em Downloads com o mesmo nome.