av/remotion-bits

Remotion Bits

Use este skill para construir a partir de exemplos ao vivo do Remotion Bits primeiro, recorrendo a primitivas somente 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. Busque a melhor correspondência ou duas com fetch_remotion_bit.
3. Adapte o exemplo mais próximo antes de compor a partir de primitivas.
4. Se vários exemplos corresponderem, prefira o mais simples que atenda à solicitação.
5. Se a solicitação for de múltiplas etapas, orientada por câmera ou semelhante a uma apresentação, dê preferência a 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 principal de padrões funcionais. Recorra a primitivas somente depois de verificar se um bit existente já fornece a forma de composição, o modelo de temporização e a estrutura de layout que você precisa.

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 dos arquivos por último. Inspecione docs/src/bits/catalog.ts e docs/src/bits/examples/**, depois adapte o exemplo mais próximo manualmente.

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

Configuração da 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 equivalentes locais continuam sendo:

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.
• Busque 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 com 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 para 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 plano de fundo.
• Para movimento de entrada e saída em etapas, prefira o sequenciamento StaggeredMotion em vez de cálculos manuais de fase de quadro.
• Para fluxos de apresentação, preserve a estrutura de etapas do exemplo primeiro e depois altere o conteúdo, alvos da câmera e 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 a distribuição de texto manualmente.
• AnimatedCounter: interpolação numérica com suporte a prefixo e sufixo. Use para KPIs, preços e revelações de estatísticas. Evite formatar strings manualmente.
• TypeWriter: digitação e exclusão de texto com comportamento de cursor. Use para efeitos de terminal, CLI e títulos sequenciais. Evite para layouts de código densos onde CodeBlock é a primitiva real.
• CodeBlock: revelação de código com realce de sintaxe, distribuição de linhas, foco e regiões de destaque. 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 estilo Matrix pronta. Use quando a solicitação for explicitamente temática Matrix ou hacker. Evite usar como fundo de partículas genérico.
• 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 manual de cores, 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, sobrevoo, tour de múltiplas 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 combinando um alvo de renderização fixo de propósito.

Regras de Decisão Comuns

• Precisa do mesmo movimento em filhos repetidos: use StaggeredMotion.
• Precisa de comportamento de revelação específico para 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 ou partículas ambiente: use primitivas do sistema de partículas.
• Precisa de movimento de câmera entre cenas: use Scene3D.

Padrões de Exemplo Primeiro

• Solicitação de texto: encontre um bit de texto, busque-o, depois troque o conteúdo, 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 máquina de escrever, depois adapte a amostra de código e regiões de destaque.
• 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