6space7/autozoom-demo-scenes

Vídeos de demonstração AutoZoom

Você está dentro do projeto do usuário. Leia o código real da funcionalidade, reconstrua sua tela como um componente React em um projeto Remotion e filme-a da forma como o AutoZoom filma uma gravação de tela: a câmera faz auto-zoom em cada ação. Telas construídas com código são melhores que capturas de tela: o texto é digitado no input real, linhas deslizam, botões mudam de estado e tudo permanece nítido em qualquer zoom.

Arquivos desta skill:

• scripts/setup.mjs cria o projeto Remotion e o instala (Remotion + React).
• assets/remotion-template/ é o que é copiado: a câmera de auto-zoom, janela, cursor, holofotes, overlays e uma tela e história de exemplo. Apenas src/story.tsx e src/screens/* mudam por demonstração.
• references/story-api.md documenta cada campo da história, os hooks de tela e como medir posições. Leia antes de escrever uma história.
• references/style.md é o visual AutoZoom: moldura, movimento e overlays.

Fluxo de trabalho

1. Definir a história

Combine uma coisa que o espectador deve aprender, em uma frase ("Pesquise qualquer métrica e compartilhe em um clique"). Mantenha em 6–15 segundos e 2–4 movimentos. Uma ideia por vídeo: se houver duas funcionalidades, faça dois vídeos. Pergunte apenas se a funcionalidade a ser mostrada não estiver clara; caso contrário, escolha o fluxo mais impressionante.

2. Ler o projeto

Encontre o que a demonstração mostra:

• a rota, página ou componente e seus filhos;
• tokens de design: configuração do Tailwind, variáveis CSS, arquivos de tema;
• fontes, biblioteca de ícones, logotipo;
• dados de amostra realistas: fixtures, seeds, histórias Storybook, mocks, testes.

Nunca invente uma aparência diferente. A demonstração deve se parecer com o produto deles.

3. Configurar Remotion

node <skill-dir>/scripts/setup.mjs demo     # cria ./demo e instala

Reexecutar é seguro. Adicione demo/ ao workspace do projeto ou deixe-o independente.

4. Construir a tela (demo/src/screens/<Name>.tsx)

Desenhe-a no viewport da história (padrão 1440 × 900, como uma janela de navegador). Escolha a rota que se encaixa no projeto:

• A. Importar os componentes reais (projetos React). Melhor fidelidade. Funciona quando os componentes são apresentacionais. Atribua props e dados estáticos e envolva-os nos provedores necessários (tema, roteador, query client, i18n) com valores fictícios. Nunca deixe que eles façam requisições de rede ou leiam autenticação. Faça os aliases resolverem e carregarem seus estilos; veja references/story-api.md > "Usando os próprios componentes do projeto".
• B. Reconstruir (qualquer stack: Svelte, Vue, Angular, nativo ou React com dependências de runtime pesadas). Porte a página para React com a mesma estrutura, nomes de classe ou valores, cores, raios, espaçamento, fonte, ícones e texto, lidos diretamente da fonte. Inclua apenas o que está visível na tela.

De qualquer forma:

• Use dados realistas do projeto (nomes, números, status), nunca lorem ipsum.
• Dê aos elementos que a história visa posições conhecidas. Organize-os de forma que você possa definir suas caixas, ou meça com a grade de depuração (passo 6).
• Faça a tela se animar com os hooks em src/lib/hooks.ts (useTyped, useAfter, useProgress, usePop, useCount). Passe números de frame como props da história, para que a linha do tempo viva em um só lugar. src/screens/MockDashboard.tsx é o exemplo prático.

5. Escrever a história (demo/src/story.tsx)

Comece com a linha do tempo como um comentário, em frames (fps 60):

0–60     visão geral; cursor vai para a busca, clica (58)
60–130   câmera dá zoom na busca
140–260  consulta é digitada sozinha; legenda 1
268      ↵; resultados atualizam
280–345  câmera recua para o resultado
...      câmera + cursor viajam → clique → resultado → notificação; legenda 2
520–600  câmera suavemente recua

Depois preencha camera, cursor, clicks, keys, captions, toasts e spotlights, tudo em px da tela. Deixe rec desligado: overlays nos cantos ficam sobre o aplicativo quando com zoom. A referência dos campos está em references/story-api.md.

6. Verificar stills, depois renderizar

cd demo
npx remotion still Demo out/f.png --frame=150    # olhe frames-chave (leia o PNG)
npm run studio                                   # pré-visualização ao vivo para o usuário
npm run render                                   # → out/demo.mp4

Defina debug: true na história para desenhar uma grade rotulada de 100px sobre a tela, para que as posições possam ser lidas a partir de um still. Desligue antes de renderizar. Verifique um still em cada movimento: o assunto está totalmente em quadro quando com zoom, a ponta do cursor está sobre o alvo, o texto é legível e os overlays não cobrem a ação.

7. Entregar

Dê ao usuário o caminho do MP4 e mostre um ou dois frames. Opcionalmente, incorpore a composição ao vivo no site deles com @remotion/player (veja references/story-api.md).

Regras de movimento (a sensação AutoZoom)

• Câmera de auto-zoom: a janela inteira (1×) ou um close-up claro (1.6–2.2×), nunca no meio: um zoom de 1.1–1.5× apenas corta a janela e parece quebrado. Dê zoom no que importa, segure, viaje diretamente para a próxima coisa e termine de volta em 1×. Os movimentos levam 60–100 frames; as pausas duram pelo menos 50 frames. Use ease: 'smooth' (o padrão) para viagem e 'snap' apenas para chegadas rápidas. Sem desfoque de movimento.
• Cursor: chega primeiro, depois clica (pressionamento + ondulação, automático em cada frame em clicks), então o resultado aparece 2–6 frames depois. Ao digitar, mova-o ligeiramente para o lado para que não cubra o texto.
• Ordem de um movimento: câmera começa a se mover → cursor chega → clique → mudança de estado → notificação ou tecla → legenda carrega o significado.
• Legendas: o que um apresentador diria, 3–6 palavras por linha, no máximo duas linhas por vídeo.
• Overlays (legendas, teclas, notificações, REC) ficam fora da câmera: eles não dão zoom e nunca cobrem a ação.
• Moderação: uma cor de destaque, sem confetes, sem giros, sem texto saltitante. O produto é a estrela.

Lista de verificação de qualidade

• Parece com o produto deles: mesma fonte, cores, texto e dados.
• Comentário da linha do tempo no topo de story.tsx; números de frame vêm de um só lugar.
• Cada movimento verificado com um still; nada importante cortado durante o zoom ou coberto por overlays.
• Cursor pousa exatamente nos alvos; cliques vêm antes dos resultados.
• Texto legível em 1080p; legendas curtas.
• debug está desligado e a renderização termina sem erros.