vvedantb/eva

Vídeo de produto eva

Crie um vídeo de produto de alta qualidade do aplicativo eva (qualidade Linear/Notion) usando o projeto Remotion existente em video/. A filmagem é obtida do aplicativo real, capturada com agent-browser.

Skill errada? Esta é a edição polida de várias cenas (Remotion, música, legendas). Para um único recurso, prefira as skills irmãs mais leves: eva-feature-screenshot (uma captura de tela + tweet) ou eva-feature-demo (uma gravação bruta do agent-browser + tweet). O texto do tweet para qualquer um dos três vem de eva-tweet.

O projeto canônico já existe — reutilize-o, não comece do zero.

• Projeto: video/ · composição principal: EvaHero (video/src/EvaHero.tsx)
• Saída de renderização: video/out/eva-demo.mp4
• Componentes reutilizáveis em video/src/components/: Backdrop, AppWindow, EvaMark, HeroCaption (+ Accent), Cursor, Spotlight, StatCounter, SnapIn, tokens.
• Scripts auxiliares em video/scripts/: stills.mjs, gen-music.mjs, check-audio.mjs.

Para criar um NOVO vídeo: recapture as telas para a nova história, edite a lista de cenas / legendas / durações em EvaHero.tsx, regenere a música para corresponder aos tempos de corte, renderize e faça QA.

Padrões inegociáveis (aprendidos da maneira mais difícil — altere apenas com um motivo)

Cada um destes foi um erro primeiro. Mantenha-os, a menos que o usuário os substitua.

1. 1280×720, 30fps. Não 1080p. A interface do eva é um aplicativo de desktop denso; em 1080p fica "muito ampliado / muito grande" em um telefone. 720p é o ponto ideal otimizado para dispositivos móveis no Twitter/X.

2. Capture no layout nativo do quadro, mostre em tela cheia. Defina a janela de visualização do navegador para 1280×720 ao capturar e, em seguida, exiba a captura de tela em tela cheia na proporção 1:1 (preenchendo todo o quadro). A maior alavanca de qualidade:

   • Capturar em 2560×1440 e reduzir para 720p reduz o tamanho do texto da interface pela metade → parece "aproximado" e ilegível em dispositivos móveis.
   • Cortar/ampliar a câmera dentro de uma região mostra fragmentos estranhos da interface.
   • Um layout de 1280px de largura mostrado em 1:1 = tamanhos de elementos nativos = legível + "ampliado" + nítido.

   Zoom zero significa zero. PanScene from/to permanecem em { scale: 1.0, fx: 0.5, fy: 0.5 } para cada cena de captura de tela. Mesmo um "close sutil" de 1.02–1.06 corta o chrome que o espectador precisa — os rótulos da barra lateral, o botão principal no canto superior direito, o rodapé de estatísticas. Além disso, envolva <SnapIn from={0.97}> em torno das capturas de tela: o padrão 1.06 estoura para dentro e corta os quadros de abertura de cada corte. O movimento vem dos cortes secos e das legendas rápidas, não dos movimentos de câmera.

3. Filmagem real, estados finalizados. Dirija o aplicativo real com agent-browser. Grave o trabalho já concluído (tarefas mescladas, diffs, PRs) — NÃO aguarde execuções ativas do agente (sandboxes estão parados; execuções ativas são lentas e instáveis). Prepare entradas limpas (por exemplo, um título de tarefa organizado no modal Nova Tarefa). Consulte references/capture-workflow.md.

   Nunca envie — apenas digite. Preencha a entrada, abra o seletor, capture. Nenhum Enter em um compositor, nenhuma seta de envio, Criar, Salvar, Executar ou Iniciar, e nunca inicie uma sessão real ou execução de agente, nem mesmo para filmagem de demonstração. O envio altera o espaço de trabalho real do usuário e consome computação real; o estado preparado é tudo o que a cena precisa. Enter é permitido apenas onde ele confirma no próprio campo e nada mais (aceitando uma menção @ de um seletor aberto) — caso contrário, clique na linha do seletor.

4. Cortes secos e rápidos, sincronizados com a batida. ~20s no total. Corte na batida (use <Series>, não crossfades longos) e apare as legendas rapidamente. Faça as cenas aparecerem com SnapIn — apenas em cartões de título/encerramento, from={0.97} em capturas de tela (consulte o padrão 2). Entediante = muito longo + muitos crossfades lentos.

5. Música sincronizada com cada corte. A preferência permanente do usuário é lo-fi, a variante "clássica", sem palmas — gere-a com gen-lofi-variants.mjs, que marca cada corte com um crescendo de acorde quente. Ele aceita --duration, --cuts, --only, --prefix, então um novo vídeo não precisa de edições no script:

   node scripts/gen-lofi-variants.mjs --duration=20.5 --cuts=2.5,5.5,8.5,11.5,14.5,17.5 \
     --only=classic --prefix=platform      # → public/audio/platform-music-lofi-classic.wav
   

   --cuts deve corresponder aos limites da cena na composição. gen-music.mjs é a base de palmas mais antiga — use-a apenas se o usuário pedir uma. Consulte references/remotion-build.md → Música.

6. Combine com o tema do eva. Preto quase sólido #050606, acento índigo #818cf8, gradiente da marca roxo #8B3FB8 → azul #3B7DD8, fontes Inter + JetBrains Mono. Tudo em video/src/components/tokens.ts. Nunca invente cores da marca.

7. Seja honesto + proteja a confidencialidade. Use o REPO do próprio usuário (vvedantb/eva), nunca repositórios de clientes (Evalucom/CarePulse). Não mostre a página inicial "Codebases" (lista repositórios de clientes) e verifique as listas de documentos/tarefas em busca de itens nomeados de clientes antes de capturar — prepare um documento de demonstração limpo se a lista estiver suja. Nunca levante preocupações de dados pessoais sobre nomes ou e-mails na tela — Configurações → Experimental tem uma alternância de desfoque de PID que desfoca todo elemento [data-pii], então isso é tratado no produto. Sinalize painéis de erro que vazam nomes de variáveis de ambiente ou IDs de projeto. As legendas descrevem com veracidade — nunca implique um recurso que a tela não mostra. Se a única captura disponível for um sandbox parado ou um estado vazio, reformule a legenda para corresponder à tela em vez de embelezá-la.

Fluxo de trabalho

Trabalhe nesta ordem; leia o arquivo de referência de cada etapa antes de realizá-la.

1. Planeje a história. Fluxo herói padrão (8 cenas, ~20s): título → descrever uma tarefa → Eva escreve código → revisar e enviar PR → quadro → projetos → prova (estatísticas de contagem) → encerramento. Escolha as cenas e legendas de uma linha primeiro.

2. Capture a filmagem → leia references/capture-workflow.md. Inicie o aplicativo (pnpm dev), faça login como usuário agente, defina a janela de visualização para 1280×720, capture a tela em video/public/captures/.

3. Componha / edite → leia references/remotion-build.md. Edite EvaHero.tsx: lista de cenas, durações (múltiplos da batida), legendas, o caminho do cursor para a cena de entrada. Reutilize componentes existentes.

4. Pontue → leia references/remotion-build.md → Música. Execute gen-lofi-variants.mjs com --cuts correspondendo aos limites da cena (padrão 5 acima), aponte o <Audio> da composição para o arquivo gerado, confirme MUSIC = true.

5. Renderize + QA. Você não pode visualizar o mp4 diretamente (sem ffmpeg no sistema e você não pode assistir vídeo) — então faça QA com quadros estáticos, um por cena, tirados no meio da cena:

   cd video
   node scripts/stills.mjs "40,110,200,290,380,470,560" EvaPlatform   # 2º arg = id da composição
   

   O id da composição padrão é EvaHero — passe-o explicitamente ou você fará QA do vídeo errado. Leia os PNGs em video/out/ e verifique cada borda do quadro: o botão principal no canto superior direito está completo, os rótulos da barra lateral estão completos, a legenda se sobrepõe ao texto da UI ativa? Em seguida, renderize e verifique:

   npx remotion render EvaPlatform out/eva-platform.mp4 --codec=h264 --image-format=png
   node scripts/check-audio.mjs out/eva-platform.mp4   # duração, 1280×720, faixa de áudio presente
   

   --image-format=png mantém o texto da UI nítido. Itere nos quadros estáticos até que esteja correto, depois renderize.

Referência rápida

Necessidade	Comando (execute de video/)
Visualização ao vivo / scrub	npm run dev (Remotion Studio)
Capturar uma tela	bash scripts/shot.sh /vvedantb/eva/web/sessions sessions-list 4000
Renderizar uma composição	npx remotion render <Id> out/<nome>.mp4 --codec=h264 --image-format=png
QA de quadros específicos	node scripts/stills.mjs "40,110,200" <CompositionId>
Regenerar música	node scripts/gen-lofi-variants.mjs --cuts=… --only=classic --prefix=<nome>
Verificar arquivo de saída	node scripts/check-audio.mjs out/<nome>.mp4

Composições existentes

EvaHero (fluxo herói) · SessionsDemo (sessões na nuvem) · EvaPlatform (todas as cinco superfícies em um lugar: sessões → documentos → arena de teste → tarefas kanban → revisões de PR) · QuickTasksDemo (legado). Registre qualquer nova em video/src/Root.tsx em 1280×720 / 30fps.

Armadilhas que custaram tempo antes

• A URL de login é /?agent=true (booleano), não /?agent — a rota valida agent como um booleano zod e /?agent lança "Esperado booleano, recebido string". Se o callback travar em "Entrando…" com Você já está logado, navegue diretamente para a página de destino.
• Sobreposições de desenvolvimento aparecem na captura de tela. react-scan renderiza uma barra de ferramentas de FPS em uma shadow root em #react-scan-root, e agentation em [data-agentation-root]. Uma folha de estilo sozinha não mata o react-scan — seu host carrega estilos inline, então também defina display:none !important inline no host. scripts/shot.sh faz ambos; use-o em vez de criar manualmente uma cadeia de captura.
• Encadeie chamadas agent-browser em um comando Bash com timeout e coloque qualquer coisa longa em segundo plano. Uma cadeia ingênua de abrir → esperar → capturar estoura o tempo limite da ferramenta. Referências de snapshot -i ficam obsoletas no momento em que a barra de ferramentas de desenvolvimento se expande — faça um novo snapshot após ocultar sobreposições, antes de clicar.
• Fixar todos os pacotes @remotion/* na mesma versão exata ou o bundler gerará erros.
• A música não pode ser avaliada pelo Claude. A base faz exatamente o que foi solicitado (um crescendo em cada corte), mas informe ao usuário para ouvir e trocar por uma faixa licenciada se quiser — defina MUSIC=false para silenciar.
• Sandboxes em capturas de sessão antigas estão parados, então toda tela de sessão mostra "Inicie o sandbox para…". Não legende como ativo. Nada em captures/sessions/ mostra um sandbox em execução.
• As legendas carregam a mensagem — a maioria das reproduções do Twitter está no mudo, então toda cena precisa de uma legenda.

Guias detalhados: references/capture-workflow.md (filmagem) e references/remotion-build.md (composição, tema, música, renderização, QA).