av/remotion-bits

Remotion Bits

Utiliza este skill para construir primero a partir de ejemplos vivos de Remotion Bits, y recurre a primitivas solo cuando los ejemplos no sean suficientes.

Flujo de Trabajo Predeterminado

1. Empieza con find_remotion_bits usando el objetivo visual del usuario, el estilo de movimiento o la descripción de la escena.
2. Obtén las mejores una o dos coincidencias con fetch_remotion_bit.
3. Adapta el ejemplo más cercano antes de componer desde primitivas.
4. Si hay múltiples ejemplos que coinciden, prefiere el más simple que satisfaga la solicitud.
5. Si la solicitud tiene múltiples pasos, está impulsada por cámara o se parece a una presentación, decántate por ejemplos de Scene3D.
6. Al adaptar bits de la documentación, conserva el dimensionado responsivo, el uso de colores del tema y la estructura de ejemplo autocontenida.

Trata los bits de la documentación como la biblioteca principal de patrones funcionales. Recurre a primitivas solo después de verificar si un bit existente ya te proporciona la forma de composición, el modelo de temporización y la estructura de diseño que necesitas.

Cadena de Recurrencia

1. MCP primero. Usa find_remotion_bits para descubrimiento y fetch_remotion_bit para el código fuente completo.
2. CLI segundo. Usa npx remotion-bits find "hero intro" --tag scene-3d --json y npx remotion-bits fetch bit-fade-in --json.
3. Inspección directa de la documentación al final. Inspecciona docs/src/bits/catalog.ts y docs/src/bits/examples/**, luego adapta manualmente el ejemplo más cercano.

Si la superficie MCP está disponible, úsala antes que la CLI. Si la CLI está disponible, úsala antes de leer archivos directamente.

Configuración de CLI y MCP

Usa el paquete publicado directamente cuando no necesites un flujo de trabajo local con repositorio:

# Sin instalación
npx remotion-bits find 3d cards
npx remotion-bits fetch bit-fade-in --json

# Instalación global
npm i -g remotion-bits
remotion-bits find 3d cards
remotion-bits fetch bit-fade-in --json

Inicia el servidor MCP desde el paquete publicado de la misma manera:

# Sin instalación
npx remotion-bits mcp

# Instalación global
remotion-bits mcp

Cuando un agente o cliente MCP necesite un comando stdio, apúntalo a uno de estos:

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

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

Dentro de este repositorio, los comandos equivalentes locales al repositorio siguen siendo:

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

Cómo Buscar Bien

• Busca por el resultado visual: cámara volando a través de tarjetas, contador con confeti, terminal de máquina de escribir, fondo degradado, revelado de cuadrícula escalonada.
• Agrega etiquetas cuando la forma sea obvia: scene-3d, text, particles, gradient, code, counter.
• Obtén una coincidencia fuerte y una de respaldo cuando la solicitud sea ambigua.
• Prefiere el ejemplo con la menor cantidad de partes móviles que aún satisfaga la solicitud.

Reglas de Adaptación

• Mantén la dimensión de useViewportRect. Prefiere rect.vmin, rect.vmax, rect.width y rect.height sobre píxeles codificados.
• Conserva los colores del tema de docs/src/styles/custom.css. No cambies a colores arbitrarios a menos que el usuario haya solicitado una nueva paleta.
• Mantén las funciones Component de los bits de la documentación completamente autocontenidas. No dejes ayudantes, constantes o arreglos de datos en el ámbito del módulo si el ejemplo se usará en la ruta del playground de la documentación.
• Los bits de la documentación están preenvueltos para su visualización. Si conviertes uno en una composición independiente de Remotion, añade tu propio diseño externo y fondo.
• Para movimiento de entrada y salida por etapas, prefiere la secuenciación de StaggeredMotion en lugar de cálculos manuales de fase de fotograma.
• Para flujos de presentación, conserva primero la estructura de pasos del ejemplo y luego cambia el contenido, los objetivos de la cámara y la temporización.

Referencia Rápida de Primitivas

• AnimatedText: punto de entrada para fundidos, deslizamientos, división por palabra, división por carácter y ciclado de texto. Úsalo cuando el movimiento sea principalmente revelado de texto. Evita reconstruir manualmente la escalonación de texto.
• AnimatedCounter: interpolación numérica con soporte de prefijo y sufijo. Úsalo para KPI, precios y revelado de estadísticas. Evita animar cadenas formateadas tú mismo.
• TypeWriter: escritura y borrado de texto con comportamiento de cursor. Úsalo para terminal, CLI y efectos de titulares secuenciales. Evítalo para diseños de código densos donde CodeBlock es la primitiva real.
• CodeBlock: revelado de código con resaltado de sintaxis, escalonación de líneas, enfoque y regiones resaltadas. Úsalo para escenas de editor y demostraciones de código. Evita renderizar líneas de código a mano a menos que el diseño sea intencionalmente personalizado.
• MatrixRain: lluvia de texto estilo matrix lista para usar. Úsalo cuando la solicitud sea explícitamente de tema matrix o hacker-rain. Evita usarlo como un fondo de partículas genérico.
• GradientTransition: fondos y transiciones de degradado CSS animados. Úsalo cuando el movimiento sea principalmente color de fondo y evolución de degradado. Evita reemplazarlo con interpolación de color manual a menos que el efecto no sea una transición de degradado.
• StaggeredMotion: primitiva de secuenciación compartida para hijos repetidos. Úsalo para listas, cuadrículas, pilas de tarjetas y entradas de múltiples elementos. Evita matemáticas de fotograma por hijo cuando la animación sea solo transformaciones y opacidad escalonadas.
• Particles y primitivas del sistema de partículas: usa Particles, Spawner y Behavior para movimiento ambiental, fuentes, nieve, luciérnagas y efectos de campo. Evítalos para secuenciación de texto o transiciones de diseño.
• Scene3D: cámara, pasos y composición espacial 3D. Úsalo cuando la solicitud se sienta como una presentación, sobrevuelo, recorrido de varios pasos o exhibición impulsada por cámara. Evita reconstruir esto con secuencias simples si el movimiento de cámara es central.
• useViewportRect: base de dimensionado y diseño. Úsalo en casi todos los bits responsivos. Evita tamaños de píxel codificados a menos que estés coincidiendo con un objetivo de renderizado fijo a propósito.

Reglas de Decisión Comunes

• Necesitas el mismo movimiento en hijos repetidos: usa StaggeredMotion.
• Necesitas comportamiento de revelado específico de texto: empieza con AnimatedText.
• Necesitas conteo: usa AnimatedCounter.
• Necesitas escritura: usa TypeWriter.
• Necesitas código en pantalla: usa CodeBlock.
• Necesitas emisores ambientales o partículas: usa primitivas del sistema de partículas.
• Necesitas movimiento de cámara de escena a escena: usa Scene3D.

Patrones de Prioridad de Ejemplos

• Solicitud de texto: busca un bit de texto, obténlo, luego intercambia el texto, la temporización y el modo de división.
• Solicitud de contador: busca un ejemplo de contador, luego adapta valores, etiquetas y acentos de partículas.
• Solicitud de código: busca un ejemplo de bloque de código o máquina de escribir, luego adapta la muestra de código y las regiones resaltadas.
• Solicitud de fondo: busca un ejemplo de degradado o partículas, luego adapta la paleta, la densidad y la duración.
• Solicitud de presentación: busca un ejemplo de Scene3D primero, luego adapta las posiciones de los pasos, los títulos y el contenido de las tarjetas antes de introducir nuevas primitivas.

Ejemplos Operacionales Mínimos

# MCP
find_remotion_bits {"query":"cámara volando a través de exhibición de producto","tags":["scene-3d"],"limit":2}
fetch_remotion_bit {"id":"bit-carousel-3d"}

# CLI
npx remotion-bits find "cámara volando a través de exhibición de producto" --tag scene-3d --limit 2 --json
npx remotion-bits fetch bit-carousel-3d --json

Referencias

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