av/remotion-bits

Remotion Bits

Utilisez cette compétence pour partir des exemples vivants de Remotion Bits, puis ne recourez aux primitives que lorsque les exemples ne suffisent pas.

Flux de travail par défaut

1. Commencez par find_remotion_bits en utilisant l'objectif visuel de l'utilisateur, le style de mouvement ou la description de la scène.
2. Récupérez la meilleure correspondance (ou les deux meilleures) avec fetch_remotion_bit.
3. Adaptez l'exemple le plus proche avant de composer à partir des primitives.
4. Si plusieurs exemples correspondent, préférez le plus simple qui satisfait la demande.
5. Si la demande est multi-étape, centrée sur la caméra ou ressemble à une présentation, privilégiez les exemples Scene3D.
6. Lors de l'adaptation des extraits de la documentation, conservez le dimensionnement réactif, l'utilisation des couleurs du thème et la structure d'exemple autonome.

Considérez les extraits de la documentation comme la bibliothèque principale de schémas fonctionnels. Ne recourez aux primitives qu'après avoir vérifié qu'un extrait existant ne vous donne pas déjà la forme de composition, le modèle temporel et la structure de mise en page dont vous avez besoin.

Chaîne de repli

1. MCP en premier. Utilisez find_remotion_bits pour la découverte et fetch_remotion_bit pour le code source complet.
2. CLI en second. Utilisez npx remotion-bits find "hero intro" --tag scene-3d --json et npx remotion-bits fetch bit-fade-in --json.
3. Inspection directe de la documentation en dernier. Inspectez docs/src/bits/catalog.ts et docs/src/bits/examples/**, puis adaptez manuellement l'exemple le plus proche.

Si la surface MCP est disponible, utilisez-la avant la CLI. Si la CLI est disponible, utilisez-la avant de lire les fichiers directement.

Configuration CLI et MCP

Utilisez le package publié directement lorsque vous ne souhaitez pas un workflow local au dépôt :

# Sans installation
npx remotion-bits find 3d cards
npx remotion-bits fetch bit-fade-in --json

# Installation globale
npm i -g remotion-bits
remotion-bits find 3d cards
remotion-bits fetch bit-fade-in --json

Démarrez le serveur MCP à partir du package publié de la même manière :

# Sans installation
npx remotion-bits mcp

# Installation globale
remotion-bits mcp

Lorsqu'un agent ou un client MCP a besoin d'une commande stdio, pointez-la vers l'une de celles-ci :

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

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

Dans ce dépôt, les commandes locales équivalentes restent :

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

Comment bien rechercher

• Recherchez par le résultat visuel : flying camera through cards, counter with confetti, typewriter terminal, gradient background, staggered grid reveal.
• Ajoutez des balises lorsque la forme est évidente : scene-3d, text, particles, gradient, code, counter.
• Récupérez une correspondance forte et une de secours lorsque la demande est ambiguë.
• Préférez l'exemple avec le moins d'éléments mobiles qui satisfait toujours la demande.

Règles d'adaptation

• Conservez le dimensionnement de useViewportRect. Préférez rect.vmin, rect.vmax, rect.width et rect.height plutôt que des pixels en dur.
• Conservez les couleurs du thème provenant de docs/src/styles/custom.css. Ne remplacez pas par des couleurs arbitraires sauf si l'utilisateur a demandé une nouvelle palette.
• Gardez les fonctions Component des extraits de documentation complètement autonomes. Ne laissez pas d'assistants, de constantes ou de tableaux de données à la portée du module si l'exemple sera utilisé dans le chemin du terrain de jeu de la documentation.
• Les extraits de la documentation sont pré-emballés pour l'affichage. Si vous les transformez en une composition Remotion autonome, ajoutez votre propre mise en page externe et arrière-plan.
• Pour les mouvements d'entrée et de sortie par étapes, préférez le séquencement StaggeredMotion aux calculs de phase d'image faits à la main.
• Pour les flux de présentation, conservez d'abord la structure d'étapes de l'exemple, puis modifiez le contenu, les cibles de la caméra et le timing.

Référence rapide des primitives

• AnimatedText : point d'entrée pour les fondus, diapositives, fractionnement par mot, fractionnement par caractère et cyclage de texte. Utilisez-le lorsque le mouvement est principalement une révélation de texte. Évitez de reconstruire manuellement le décalage de texte.
• AnimatedCounter : interpolation numérique avec prise en charge des préfixes et suffixes. Utilisez-le pour les indicateurs de performance, les prix et les révélations de statistiques. Évitez d'animer vous-même des chaînes formatées.
• TypeWriter : saisie et suppression de texte avec comportement du curseur. Utilisez-le pour les effets de terminal, CLI et de titres séquentiels. Évitez-le pour les dispositions de code denses où CodeBlock est la véritable primitive.
• CodeBlock : révélation de code avec coloration syntaxique, décalage de lignes, mise au point et régions en surbrillance. Utilisez-le pour les scènes d'éditeur et de démonstration de code. Évitez de rendre les lignes de code à la main sauf si la disposition est intentionnellement personnalisée.
• MatrixRain : pluie de texte prête à l'emploi de style Matrix. Utilisez-la lorsque la demande est explicitement sur le thème Matrix ou hacker-rain. Évitez de l'utiliser comme arrière-plan générique de particules.
• GradientTransition : arrière-plans et transitions animés de dégradés CSS. Utilisez-le lorsque le mouvement concerne principalement la couleur d'arrière-plan et l'évolution du dégradé. Évitez de le remplacer par une interpolation de couleur manuelle sauf si l'effet n'est pas une transition de dégradé.
• StaggeredMotion : primitive de séquencement partagé pour les enfants répétés. Utilisez-le pour les listes, grilles, piles de cartes et entrées multi-éléments. Évitez les calculs d'image par enfant lorsque l'animation se résume à des transformations et opacités décalées.
• Particles et primitives de système de particules : utilisez Particles, Spawner et Behavior pour les mouvements d'ambiance, les fontaines, la neige, les lucioles et les effets de champ. Évitez-les pour le séquencement de texte ou les transitions de mise en page.
• Scene3D : caméra, étapes et composition spatiale 3D. Utilisez-le lorsque la demande ressemble à une présentation, un survol, un parcours multi-étapes ou une vitrine pilotée par caméra. Évitez de le reconstruire avec des séquences simples si le mouvement de la caméra est central.
• useViewportRect : fondation de dimensionnement et de mise en page. Utilisez-le dans presque tous les composants réactifs. Évitez les tailles de pixels en dur sauf si vous ciblez intentionnellement une cible de rendu fixe.

Règles de décision courantes

• Besoin du même mouvement sur des enfants répétés : utilisez StaggeredMotion.
• Besoin d'un comportement de révélation spécifique au texte : commencez par AnimatedText.
• Besoin de comptage : utilisez AnimatedCounter.
• Besoin de saisie : utilisez TypeWriter.
• Besoin de code à l'écran : utilisez CodeBlock.
• Besoin d'émetteurs d'ambiance ou de particules : utilisez les primitives du système de particules.
• Besoin de mouvement de caméra scène par scène : utilisez Scene3D.

Schémas axés sur les exemples

• Demande de texte : trouvez un extrait de texte, récupérez-le, puis échangez le contenu, le timing et le mode de fractionnement.
• Demande de compteur : trouvez un exemple de compteur, puis adaptez les valeurs, les étiquettes et les accents de particules.
• Demande de code : trouvez un exemple de bloc de code ou de machine à écrire, puis adaptez l'échantillon de code et les régions en surbrillance.
• Demande d'arrière-plan : trouvez un exemple de dégradé ou de particules, puis adaptez la palette, la densité et la durée.
• Demande de présentation : trouvez d'abord un exemple Scene3D, puis adaptez les positions des étapes, les titres et le contenu des cartes avant d'introduire de nouvelles primitives.

Exemples opérationnels minimaux

# 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

Références

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