av/remotion-bits

Remotion Bits

Utilisez ce skill pour construire à partir d'exemples concrets de Remotion Bits en premier, puis revenez aux primitives uniquement lorsque les exemples ne suffisent pas.

Workflow par défaut

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

Considérez les bits de la documentation comme la bibliothèque principale de motifs fonctionnels. N'utilisez les primitives qu'après avoir vérifié qu'aucun bit existant ne vous donne déjà la forme de composition, le modèle de timing 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 voulez pas d'un workflow lié 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 sur l'une de ces configurations :

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

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

À l'intérieur de ce dépôt, les commandes équivalentes locales 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 chercher

• Cherchez 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ë.
• Privilégiez l'exemple avec le moins de pièces mobiles qui satisfait quand même la demande.

Règles d'adaptation

• Conservez le dimensionnement useViewportRect. Préférez rect.vmin, rect.vmax, rect.width et rect.height aux pixels codés en dur.
• Conservez les couleurs du thème provenant de docs/src/styles/custom.css. Ne les remplacez pas par des couleurs arbitraires sauf si l'utilisateur a demandé une nouvelle palette.
• Conservez les fonctions Component des bits de la documentation entièrement autonomes. Ne laissez pas d'utilitaires, de constantes ou de tableaux de données à la portée du module si l'exemple sera utilisé dans le chemin du bac à sable de la documentation.
• Les bits de la documentation sont pré-emballés pour l'affichage. Si vous les transformez en composition Remotion autonome, ajoutez votre propre mise en page extérieure et votre 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'étape 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, les glissements, la division par mot, la division par caractère et le cyclage de texte. Utilisez-le lorsque le mouvement est principalement une révélation de texte. Évitez de reconstruire le décalage de texte manuellement.
• AnimatedCounter : interpolation numérique avec support de préfixe et suffixe. Utilisez-le pour les indicateurs KPI, les prix et les révélations de statistiques. Évitez d'animer vous-même des chaînes formatées.
• TypeWriter : texte qui s'écrit et s'efface avec comportement de curseur. Utilisez-le pour les effets de terminal, de CLI et de titres séquentiels. Évitez-le pour les mises en page de code denses où CodeBlock est la vraie 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 manuellement sauf si la mise en page est intentionnellement personnalisée.
• MatrixRain : pluie de caractères façon Matrix prête à l'emploi. Utilisez-la lorsque la demande est explicitement sur le thème Matrix ou hacker-rain. Évitez de l'utiliser comme arrière-plan de particules générique.
• GradientTransition : arrière-plans et transitions animés en dégradé CSS. Utilisez-le lorsque le mouvement est principalement une évolution de la couleur d'arrière-plan et 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-la pour les listes, les grilles, les piles de cartes et les entrées multi-éléments. Évitez le calcul d'image par enfant lorsque l'animation n'est que des transformations et une opacité en décalage.
• Particles et primitives de système de particules : utilisez Particles, Spawner et Behavior pour les mouvements ambiants, 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-la lorsque la demande ressemble à une présentation, un survol, un parcours multi-étapes ou une vitrine pilotée par caméra. Évitez de la reconstruire avec des séquences simples si le mouvement de caméra est central.
• useViewportRect : fondation de dimensionnement et de mise en page. Utilisez-la dans presque tous les bits responsifs. Évitez les tailles de pixels codées en dur sauf si vous correspondez 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 frappe : utilisez TypeWriter.
• Besoin de code à l'écran : utilisez CodeBlock.
• Besoin d'émetteurs ambiants ou de particules : utilisez les primitives du système de particules.
• Besoin d'un mouvement de caméra de scène à scène : utilisez Scene3D.

Motifs axés sur les exemples

• Demande de texte : trouvez un bit de texte, récupérez-le, puis remplacez le texte, le timing et le mode de division.
• 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 minimaux d'utilisation

# 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