bueno-demo

Vídeos de demonstração com bueno-demo

bueno-demo grava uma caminhada scriptada por uma página web e a renderiza em um clipe no estilo Screen Studio. Existem duas etapas: captura dirige uma janela real do Chromium e a grava, e renderização adiciona câmera, cursor e títulos.

Configuração, uma vez por máquina

npm i -D bueno-demo            # ou execute tudo com npx bueno-demo
npx playwright install chromium
brew install ffmpeg            # necessário; adicione imagemagick para posters WebP

O ciclo

1. Escreva um script, um arquivo JSON (veja abaixo). Mantenha uma ideia por clipe, 10 a 15 segundos.
2. Capture: npx bueno-demo capture demos/<nome>.json out/<nome>
3. Corte opcional de um carregamento lento: npx bueno-demo cut out/<nome> <de-s> <ate-s>
4. Renderize: npx bueno-demo render out/<nome> out/<nome>/<nome> --gif
5. Observe antes de usar. Crie uma folha de contato e verifique cada quadro: ffmpeg -i out/<nome>/<nome>.mp4 -vf "fps=1,scale=640:-1,tile=3x4" -frames:v 1 sheet.png Se um bug ou dado privado aparecer na câmera, corrija o script ou corte-o e re-renderize.

Scripts

{
  "url": "http://localhost:3000/configuracoes",
  "viewport": [1440, 900],
  "storage": "auth.json",
  "keep": "document.querySelectorAll('[data-user-email]').forEach(e => e.textContent = '[email protected]')",
  "steps": [
    { "scroll": "[data-testid=faturamento]" },
    { "click": "[data-testid=alternar-plano]", "after": 1200 },
    { "type": "[data-testid=nome-equipe]", "text": "Northwind", "clear": true },
    { "hover": "[data-testid=salvar]", "zoom": true },
    { "click": "[data-testid=salvar]", "zoom": false },
    { "wait": 800 }
  ]
}

Passos, cada um opcionalmente com after (ms para pausar depois):

• click: deslize até o elemento e clique. zoom: false pula o zoom da câmera; use-o em um clique que navega.
• type: clique, então digite text (delay ms por tecla, padrão 55; clear: true substitui o valor).
• fill: clique, então defina text de uma vez, para entradas que a digitação não consegue controlar (seletores de data).
• hover: deslize até lá. zoom: true aponta a câmera também.
• upload: deslize até uma zona de soltar e anexe file (relativo ao script) a input.
• press: uma tecla, como "Escape".
• scroll: role suavemente o elemento até a vista.
• wait: pausa, em ms. eval: execute JS na página, na câmera.

Opções:

• Fazer login: storage aponta para um arquivo de estado de armazenamento do Playwright (salve um com npx playwright codegen --save-storage=auth.json <url>). Ou "cookiesFrom": "agent-browser" pega emprestado uma sessão de agente-navegador logada. Cookies nunca são impressos.
• Privacidade: keep é JS executado antes da gravação e a cada 250ms durante ela, para substituir nomes reais e emails por substitutos, de modo que uma re-renderização nunca os traga de volta. hide adiciona seletores CSS para ocultar (sobreposições de desenvolvimento do Next.js e Vercel já estão ocultas; "hide": false as mostra).
• Fora da câmera: setup é JS executado uma vez antes da gravação (fechar um banner, por exemplo).
• Sensação: travelMs (tempo de viagem do cursor, padrão 700), settle (espera após carregamento, padrão 1500), tail (segurar no final, padrão 1200), cursorStart ([x, y]), reducedMotion: true.
• Carregamento: waitUntil (padrão networkidle). Uma página que transmite vídeo ou faz polling nunca fica ociosa, então a captura expira; defina "load" e deixe settle cobrir o resto.
• Outro servidor: --base http://localhost:3001 na captura grava o mesmo caminho em outro lugar.

Seletores: prefira data-testid ou estrutura (#title, input[name=amount]) em vez de texto visível, para que mudanças de texto não quebrem o script.

Flags de renderização

• --zoom 1.6 quão longe um clique amplia (1.3 quando duas coisas importam ao mesmo tempo).
• --speed 0.9 reproduz 10% mais devagar; --speed 2.5 para uma montagem rápida.
• --end 9.8 corta naquele segundo; --hold 1.2 congela o último quadro.
• --matte '#fdfaf1' emoldura a página como uma janela arredondada nessa cor (padrão é borda a borda).
• --title 'Movendo um evento' --kicker 'Eventos' adiciona um título de abertura; --end-cap adiciona um cartão de fechamento.
• --brand brand.json define a aparência do título e do cartão: ink, paper, accent, displayFont / monoFont ({ "family", "file", "weight" }), logo, footer, kicker. Caminhos são relativos ao arquivo de marca.
• --fit renderiza na forma própria da página (retrato para um viewport de celular).
• --gif também escreve um GIF de 960px, 15fps.

Regras

• Nunca grave dados reais de clientes. Use contas de teste e um hook keep para qualquer coisa pessoal; verifique a folha de contato antes de compartilhar.
• Curto e com propósito único. Um recurdo por clipe; corte esperas com cut.
• Hospede vídeo fora do repositório. Comprometa o script (e um poster se sua documentação precisar de um); coloque MP4s e GIFs em seu armazenamento ou CDN.