av/remotion-bits

Remotion Bits

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

Flujo de Trabajo Predeterminado

1. Comienza con find_remotion_bits usando el objetivo visual del usuario, el estilo de movimiento o la descripción de la escena.
2. Obtén la mejor coincidencia (o dos) con fetch_remotion_bit.
3. Adapta el ejemplo más cercano antes de componer desde primitivas.
4. Si hay varios ejemplos que coinciden, prefiere el más simple que cumpla con la solicitud.
5. Si la solicitud tiene múltiples pasos, está impulsada por cámara o se parece a una presentación, sesga hacia ejemplos de Scene3D.
6. Al adaptar bits de la documentación, preserva el dimensionamiento responsivo, el uso de colores del tema y la estructura de ejemplo autónoma.

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 la composición, el modelo de temporización y la estructura de diseño que necesitas.

Cadena de Recurso

1. MCP primero. Usa find_remotion_bits para descubrimiento y fetch_remotion_bit para la fuente completa.
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 el ejemplo más cercano manualmente.

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 quieras un flujo de trabajo local del 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 del 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 entre tarjetas, contador con confeti, terminal de máquina de escribir, fondo degradado, revelación cuadriculada 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 así cumpla con la solicitud.

Reglas de Adaptación

• Mantén el dimensionamiento de useViewportRect. Prefiere rect.vmin, rect.vmax, rect.width y rect.height en lugar de píxeles codificados.
• Mantén los colores del tema de docs/src/styles/custom.css. No introduzcas colores arbitrarios a menos que el usuario haya solicitado una nueva paleta.
• Mantén las funciones Component de los bits de documentación completamente autónomas. No dejes ayudantes, constantes o arreglos de datos en el ámbito del módulo si el ejemplo se usará en la ruta del área de juegos de la documentación.
• Los bits de documentación están pre-envueltos para visualización. Si conviertes uno en una composición Remotion independiente, agrega tu propio diseño exterior y fondo.
• Para movimiento de entrada y salida escalonado, prefiere la secuenciación de StaggeredMotion sobre el cálculo manual de fase de fotogramas.
• Para flujos de presentación, preserva 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 ciclo de texto. Úsalo cuando el movimiento sea principalmente revelación de texto. Evita reconstruir la escalonación de texto manualmente.
• AnimatedCounter: interpolación numérica con soporte de prefijo y sufijo. Úsalo para KPI, precios y revelaciones de estadísticas. Evita animar cadenas formateadas tú mismo.
• TypeWriter: escritura y borrado de texto con comportamiento de cursor. Úsalo para efectos de terminal, CLI y titulares secuenciales. Evítalo para diseños de código densos donde CodeBlock es la primitiva real.
• CodeBlock: revelación de código con resaltado de sintaxis, escalonamiento de líneas, enfoque y regiones resaltadas. Úsalo para escenas de editor y demostraciones de código. Evita renderizar líneas de código manualmente 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 temática de Matrix o hacker-rain. Evita usarlo como un fondo de partículas genérico.
• GradientTransition: fondos de gradiente CSS animados y transiciones. Úsalo cuando el movimiento sea principalmente color de fondo y evolución de gradiente. Evita reemplazarlo con interpolación de color manual a menos que el efecto no sea una transición de gradiente.
• StaggeredMotion: primitiva de secuenciación compartida para hijos repetidos. Úsalo para listas, cuadrículas, pilas de tarjetas y entradas de múltiples elementos. Evita el cálculo de fotogramas 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, vuelo en cámara, recorrido de múltiples 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 dimensionamiento y diseño. Úsalo en casi todos los bits responsivos. Evita tamaños de píxel codificados a menos que estés coincidiendo intencionalmente con un objetivo de renderizado fijo.

Reglas de Decisión Comunes

• ¿Necesitas el mismo movimiento en hijos repetidos? Usa StaggeredMotion.
• ¿Necesitas comportamiento de revelación específico de texto? Comienza 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 Ejemplo-Primero

• Solicitud de texto: encuentra un bit de texto, obténlo, luego intercambia copia, temporización y modo de división.
• Solicitud de contador: encuentra un ejemplo de contador, luego adapta valores, etiquetas y acentos de partículas.
• Solicitud de código: encuentra 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: encuentra un ejemplo de gradiente o partículas, luego adapta paleta, densidad y duración.
• Solicitud de presentación: encuentra un ejemplo de Scene3D primero, luego adapta posiciones de pasos, títulos y contenido de tarjetas antes de introducir nuevas primitivas.

Ejemplos Operativos Mínimos

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

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

Referencias

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