av/remotion-bits

Remotion Bits

Use este skill para construir a partir de exemplos ao vivo de Remotion Bits primeiro, depois recorra às primitivas apenas quando os exemplos não forem suficientes.

Fluxo de Trabalho Padrão

1. Comece com find_remotion_bits usando o objetivo visual, estilo de movimento ou descrição de cena do usuário.
2. Obtenha a melhor correspondência (uma ou duas) com fetch_remotion_bit.
3. Adapte o exemplo mais próximo antes de compor a partir das primitivas.
4. Se vários exemplos coincidirem, prefira o mais simples que atenda à solicitação.
5. Se a solicitação for de várias etapas, orientada por câmera ou semelhante a uma apresentação, tenda para exemplos de Scene3D.
6. Ao adaptar bits da documentação, preserve o dimensionamento responsivo, o uso de cores do tema e a estrutura de exemplo autocontida.

Trate os bits da documentação como a biblioteca primária de padrões funcionais. Recorra às primitivas somente depois de verificar se um bit existente já fornece a forma da composição, o modelo de temporização e a estrutura de layout necessários.

Cadeia de Recuo

1. MCP primeiro. Use find_remotion_bits para descoberta e fetch_remotion_bit para o código-fonte completo.
2. CLI em segundo. Use npx remotion-bits find "hero intro" --tag scene-3d --json e npx remotion-bits fetch bit-fade-in --json.
3. Inspeção direta da documentação por último. Inspecione docs/src/bits/catalog.ts e docs/src/bits/examples/**, depois adapte manualmente o exemplo mais próximo.

Se a superfície MCP estiver disponível, use-a antes da CLI. Se a CLI estiver disponível, use-a antes de ler os arquivos diretamente.

Configuração CLI e MCP

Use o pacote publicado diretamente quando não quiser um fluxo de trabalho local com repositório:

# Sem instalação
npx remotion-bits find 3d cards
npx remotion-bits fetch bit-fade-in --json

# Instalação global
npm i -g remotion-bits
remotion-bits find 3d cards
remotion-bits fetch bit-fade-in --json

Inicie o servidor MCP a partir do pacote publicado da mesma forma:

# Sem instalação
npx remotion-bits mcp

# Instalação global
remotion-bits mcp

Quando um agente ou cliente MCP precisar de um comando stdio, aponte-o para um destes:

{
  "command": "npx",
  "args": ["-y", "remotion-bits", "mcp"]
}

{
  "command": "remotion-bits",
  "args": ["mcp"]
}

Dentro deste repositório, os comandos locais equivalentes permanecem:

npm run bits:find -- --query "hero intro" --tag scene-3d --json
npm run bits:fetch -- bit-fade-in --json
npm run mcp:bits

Como Pesquisar Bem

• Pesquise pelo resultado visual: flying camera through cards, counter with confetti, typewriter terminal, gradient background, staggered grid reveal.
• Adicione tags quando a forma for óbvia: scene-3d, text, particles, gradient, code, counter.
• Obtenha uma correspondência forte e uma reserva quando a solicitação for ambígua.
• Prefira o exemplo com o menor número de partes móveis que ainda atenda à solicitação.

Regras de Adaptação

• Mantenha o dimensionamento useViewportRect. Prefira rect.vmin, rect.vmax, rect.width e rect.height em vez de pixels fixos.
• Mantenha as cores do tema de docs/src/styles/custom.css. Não troque por cores arbitrárias, a menos que o usuário tenha solicitado uma nova paleta.
• Mantenha as funções Component dos bits da documentação totalmente autocontidas. Não deixe helpers, constantes ou arrays de dados no escopo do módulo se o exemplo for usado no caminho do playground da documentação.
• Os bits da documentação são pré-embalados para exibição. Se você transformar um em uma composição Remotion independente, adicione seu próprio layout externo e fundo.
• Para movimento de entrada e saída escalonado, prefira a sequência StaggeredMotion em vez de cálculos manuais de fase de quadro.
• Para fluxos de apresentação, preserve primeiro a estrutura de etapas do exemplo e depois altere o conteúdo, os alvos da câmera e a temporização.

Referência Rápida de Primitivas

• AnimatedText: ponto de entrada para fades, slides, divisão por palavra, divisão por caractere e ciclagem de texto. Use quando o movimento for principalmente revelação de texto. Evite reconstruir escalonamento de texto manualmente.
• AnimatedCounter: interpolação numérica com suporte a prefixo e sufixo. Use para KPI, preços e revelações de estatísticas. Evite animar strings formatadas manualmente.
• TypeWriter: digitação e exclusão de texto com comportamento de cursor. Use para terminal, CLI e efeitos de título sequenciais. Evite para layouts de código densos onde CodeBlock é a primitiva real.
• CodeBlock: revelação de código com destaque de sintaxe, escalonamento de linhas, foco e regiões destacadas. Use para cenas de editor e demonstração de código. Evite renderizar linhas de código manualmente, a menos que o layout seja intencionalmente personalizado.
• MatrixRain: chuva de texto pronta no estilo Matrix. Use quando a solicitação for explicitamente tema Matrix ou hacker-rain. Evite usar como fundo genérico de partículas.
• GradientTransition: fundos e transições de gradiente CSS animados. Use quando o movimento for principalmente cor de fundo e evolução de gradiente. Evite substituir por interpolação de cores manual, a menos que o efeito não seja uma transição de gradiente.
• StaggeredMotion: primitiva de sequenciamento compartilhada para filhos repetidos. Use para listas, grades, pilhas de cartões e entradas de múltiplos elementos. Evite cálculos de quadro por filho quando a animação for apenas transformações e opacidade escalonadas.
• Particles e primitivas do sistema de partículas: use Particles, Spawner e Behavior para movimento ambiente, fontes, neve, vaga-lumes e efeitos de campo. Evite para sequenciamento de texto ou transições de layout.
• Scene3D: câmera, etapas e composição espacial 3D. Use quando a solicitação parecer uma apresentação, voo panorâmico, passo a passo de várias etapas ou vitrine orientada por câmera. Evite reconstruir isso com sequências simples se o movimento da câmera for central.
• useViewportRect: fundação de dimensionamento e layout. Use em quase todos os bits responsivos. Evite tamanhos de pixel fixos, a menos que esteja correspondendo a um destino de renderização fixo intencionalmente.

Regras de Decisão Comuns

• Precisa do mesmo movimento em filhos repetidos: use StaggeredMotion.
• Precisa de comportamento específico de revelação de texto: comece com AnimatedText.
• Precisa de contagem: use AnimatedCounter.
• Precisa de digitação: use TypeWriter.
• Precisa de código na tela: use CodeBlock.
• Precisa de emissores ambiente ou partículas: use primitivas do sistema de partículas.
• Precisa de movimento de câmera entre cenas: use Scene3D.

Padrões com Exemplos Primeiro

• Solicitação de texto: encontre um bit de texto, obtenha-o, depois troque cópia, temporização e modo de divisão.
• Solicitação de contador: encontre um exemplo de contador, depois adapte valores, rótulos e acentos de partículas.
• Solicitação de código: encontre um exemplo de bloco de código ou typewriter, depois adapte a amostra de código e as regiões destacadas.
• Solicitação de fundo: encontre um exemplo de gradiente ou partículas, depois adapte paleta, densidade e duração.
• Solicitação de apresentação: encontre um exemplo de Scene3D primeiro, depois adapte posições das etapas, títulos e conteúdo do cartão antes de introduzir novas primitivas.

Exemplos Operacionais Mínimos

# MCP
find_remotion_bits {"query":"camera flythrough product showcase","tags":["scene-3d"],"limit":2}
fetch_remotion_bit {"id":"bit-carousel-3d"}

# CLI
npx remotion-bits find "camera flythrough product showcase" --tag scene-3d --limit 2 --json
npx remotion-bits fetch bit-carousel-3d --json

Referências

• references/components.md
• references/utilities.md
• references/patterns.md