av/remotion-bits

Remotion Bits

Nutze diesen Skill, indem du zuerst aus den lebendigen Remotion Bits Beispielen baust und erst dann auf Primitive zurückgreifst, wenn die Beispiele nicht ausreichen.

Standard-Workflow

1. Beginne mit find_remotion_bits anhand des visuellen Ziels, des Bewegungsstils oder der Szenenbeschreibung des Benutzers.
2. Rufe die besten ein oder zwei Treffer mit fetch_remotion_bit ab.
3. Passe das nächstgelegene Beispiel an, bevor du aus Primitiven zusammensetzt.
4. Wenn mehrere Beispiele übereinstimmen, bevorzuge das einfachste, das die Anforderung erfüllt.
5. Wenn die Anforderung mehrschrittig, kameragetrieben oder präsentationsartig ist, tendiere zu Scene3D-Beispielen.
6. Beim Anpassen von Docs-Bits behalte responsives Sizing, die Verwendung von Designfarben und die in sich geschlossene Beispielstruktur bei.

Behandle die Docs-Bits als primäre Bibliothek funktionierender Muster. Greife erst dann auf Primitive zurück, nachdem du geprüft hast, ob ein vorhandenes Bit dir bereits die Kompositionsform, das Zeitmodell und die Layoutstruktur bietet, die du benötigst.

Fallback-Kette

1. Zuerst MCP. Verwende find_remotion_bits zur Entdeckung und fetch_remotion_bit für den vollständigen Quellcode.
2. Zweitens CLI. Verwende npx remotion-bits find "hero intro" --tag scene-3d --json und npx remotion-bits fetch bit-fade-in --json.
3. Zuletzt direkte Docs-Inspektion. Überprüfe docs/src/bits/catalog.ts und docs/src/bits/examples/** und passe dann das nächstgelegene Beispiel manuell an.

Wenn die MCP-Oberfläche verfügbar ist, verwende sie vor der CLI. Wenn die CLI verfügbar ist, verwende sie vor dem direkten Lesen von Dateien.

CLI und MCP Einrichtung

Verwende das veröffentlichte Paket direkt, wenn du keinen repo-lokalen Workflow möchtest:

# Keine Installation
npx remotion-bits find 3d cards
npx remotion-bits fetch bit-fade-in --json

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

Starte den MCP-Server aus dem veröffentlichten Paket auf die gleiche Weise:

# Keine Installation
npx remotion-bits mcp

# Globale Installation
remotion-bits mcp

Wenn ein Agent oder MCP-Client einen stdio-Befehl benötigt, verweise ihn auf einen dieser:

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

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

Innerhalb dieses Repositories bleiben die entsprechenden repo-lokalen Befehle:

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

Wie man gut sucht

• Suche nach dem visuellen Ergebnis: flying camera through cards, counter with confetti, typewriter terminal, gradient background, staggered grid reveal.
• Füge Tags hinzu, wenn die Form offensichtlich ist: scene-3d, text, particles, gradient, code, counter.
• Rufe einen starken Treffer und einen Backup-Treffer ab, wenn die Anfrage mehrdeutig ist.
• Bevorzuge das Beispiel mit den wenigsten beweglichen Teilen, das die Anforderung dennoch erfüllt.

Anpassungsregeln

• Behalte useViewportRect für das Sizing bei. Bevorzuge rect.vmin, rect.vmax, rect.width und rect.height gegenüber hartcodierten Pixeln.
• Behalte die Designfarben aus docs/src/styles/custom.css bei. Tausche keine willkürlichen Farben ein, es sei denn, der Benutzer hat eine neue Palette angefordert.
• Halte die Component-Funktionen der Docs-Bits vollständig in sich geschlossen. Lasse Hilfsfunktionen, Konstanten oder Datenarrays nicht auf Modulebene, wenn das Beispiel im Docs-Playground-Pfad verwendet wird.
• Docs-Bits sind für die Anzeige vorverpackt. Wenn du eines in eine eigenständige Remotion-Komposition umwandelst, füge dein eigenes äußeres Layout und deinen eigenen Hintergrund hinzu.
• Für gestaffelte Ein- und Ausbewegungen bevorzuge StaggeredMotion gegenüber manuell berechneten Frame-Phasen.
• Für Präsentationsabläufe behalte zuerst die Schrittstruktur des Beispiels bei und ändere dann Inhalt, Kameraziele und Timing.

Kurzreferenz der Primitive

• AnimatedText: Einstiegspunkt für Einblendungen, Folien, Wortteilung, Zeichenteilung und Textwechsel. Verwende es, wenn die Bewegung hauptsächlich eine Texteinblendung ist. Vermeide es, Text-Staffelungen manuell nachzubauen.
• AnimatedCounter: Numerische Interpolation mit Präfix- und Postfix-Unterstützung. Verwende es für KPI-, Preis- und Statistik-Einblendungen. Vermeide es, formatierte Zeichenketten selbst zu animieren.
• TypeWriter: Schreib- und Löschtexte mit Cursor-Verhalten. Verwende es für Terminal-, CLI- und sequentielle Headline-Effekte. Vermeide es für dichte Code-Layouts, bei denen CodeBlock das eigentliche Primitive ist.
• CodeBlock: Syntax-hervorgehobene Code-Einblendung mit Zeilenstaffelung, Fokus und Hervorhebungsbereichen. Verwende es für Editor- und Code-Demo-Szenen. Vermeide es, Codezeilen von Hand zu rendern, es sei denn, das Layout ist absichtlich benutzerdefiniert.
• MatrixRain: Fertiger Matrix-ähnlicher Textregen. Verwende es, wenn die Anfrage explizit Matrix- oder Hacker-Regen-thematisiert ist. Vermeide es als generischen Partikelhintergrund.
• GradientTransition: Animierte CSS-Verlaufshintergründe und -übergänge. Verwende es, wenn die Bewegung hauptsächlich Hintergrundfarbe und Verlaufsevolution ist. Vermeide es, es durch manuelle Farbinterpolation zu ersetzen, es sei denn, der Effekt ist kein Verlaufsübergang.
• StaggeredMotion: Gemeinsames Sequenzierungs-Primitive für wiederholte Kind-Elemente. Verwende es für Listen, Grids, Kartenstapel und Mehrfach-Element-Eingänge. Vermeide Frame-Berechnungen pro Kind, wenn die Animation lediglich aus gestaffelten Transformationen und Deckkraft besteht.
• Particles und Partikelsystem-Primitive: Verwende Particles, Spawner und Behavior für Umgebungsbewegungen, Brunnen, Schnee, Glühwürmchen und Feldeffekte. Vermeide sie für Textsequenzierung oder Layout-Übergänge.
• Scene3D: Kamera, Schritte und 3D-räumliche Komposition. Verwende es, wenn die Anfrage sich wie eine Präsentation, ein Durchflug, ein mehrschrittiger Walkthrough oder eine kameragetriebene Vorführung anfühlt. Vermeide es, dies mit einfachen Sequenzen nachzubauen, wenn die Kamerabewegung zentral ist.
• useViewportRect: Sizing- und Layout-Grundlage. Verwende es in fast jedem responsiven Bit. Vermeide hartcodierte Pixelgrößen, es sei denn, du passt absichtlich ein festes Rendering-Ziel an.

Allgemeine Entscheidungsregeln

• Gleiche Bewegung auf wiederholten Kind-Elementen benötigt: verwende StaggeredMotion.
• Textspezifisches Einblendeverhalten benötigt: beginne mit AnimatedText.
• Zählen benötigt: verwende AnimatedCounter.
• Tippen benötigt: verwende TypeWriter.
• Code auf dem Bildschirm benötigt: verwende CodeBlock.
• Umgebungsemitter oder Partikel benötigt: verwende Partikelsystem-Primitive.
• Szenenübergreifende Kamerabewegung benötigt: verwende Scene3D.

Beispiel-zuerst-Muster

• Textanfrage: finde ein Text-Bit, rufe es ab, tausche dann Text, Timing und Aufteilungsmodus aus.
• Zähleranfrage: finde ein Zählerbeispiel, passe dann Werte, Beschriftungen und Partikelakzente an.
• Codeanfrage: finde ein Codeblock- oder Typewriter-Beispiel, passe dann das Codebeispiel und die Hervorhebungsbereiche an.
• Hintergrundanfrage: finde ein Verlaufs- oder Partikelbeispiel, passe dann Palette, Dichte und Dauer an.
• Präsentationsanfrage: finde zuerst ein Scene3D-Beispiel, passe dann Schrittpositionen, Titel und Karteninhalte an, bevor du neue Primitive einführst.

Minimale Betriebsbeispiele

# 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

Referenzen

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