av/remotion-bits

Remotion Bits

Verwenden Sie diese Fähigkeit, um zuerst aus Live-Remotion-Bits-Beispielen zu bauen und erst dann auf Primitive zurückzugreifen, wenn die Beispiele nicht ausreichen.

Standard-Workflow

1. Beginnen Sie mit find_remotion_bits unter Verwendung des visuellen Ziels, des Bewegungsstils oder der Szenenbeschreibung des Benutzers.
2. Rufen Sie die besten ein oder zwei Treffer mit fetch_remotion_bit ab.
3. Passen Sie das nächstgelegene Beispiel an, bevor Sie aus Primitiven komponieren.
4. Wenn mehrere Beispiele übereinstimmen, bevorzugen Sie das einfachste, das die Anfrage erfüllt.
5. Wenn die Anfrage mehrschrittig, kameragesteuert oder präsentationsartig ist, tendieren Sie zu Scene3D-Beispielen.
6. Bewahren Sie bei der Anpassung von Docs-Bits die responsive Größenanpassung, die Verwendung von Themenfarben und die in sich geschlossene Beispielstruktur.

Behandeln Sie die Docs-Bits als die primäre Bibliothek funktionierender Muster. Greifen Sie erst dann auf Primitive zurück, nachdem Sie geprüft haben, ob ein vorhandenes Bit Ihnen bereits die Kompositionsform, das Zeitmodell und die Layoutstruktur bietet, die Sie benötigen.

Fallback-Kette

1. MCP zuerst. Verwenden Sie find_remotion_bits zum Auffinden und fetch_remotion_bit für den vollständigen Quellcode.
2. CLI als Zweites. Verwenden Sie npx remotion-bits find "hero intro" --tag scene-3d --json und npx remotion-bits fetch bit-fade-in --json.
3. Direkte Docs-Inspektion zuletzt. Inspizieren Sie docs/src/bits/catalog.ts und docs/src/bits/examples/** und passen Sie dann das nächstgelegene Beispiel manuell an.

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

CLI- und MCP-Setup

Verwenden Sie das veröffentlichte Paket direkt, wenn Sie keinen repo-lokalen Workflow wünschen:

# Ohne 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

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

# Ohne Installation
npx remotion-bits mcp

# Globale Installation
remotion-bits mcp

Wenn ein Agent oder MCP-Client einen stdio-Befehl benötigt, verweisen Sie 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

• Suchen Sie nach dem visuellen Ergebnis: fliegende Kamera durch Karten, Counter mit Konfetti, Schreibmaschinen-Terminal, Gradientenhintergrund, gestaffelte Raster-Enthüllung.
• Fügen Sie Tags hinzu, wenn die Form offensichtlich ist: scene-3d, text, particles, gradient, code, counter.
• Rufen Sie eine starke Übereinstimmung und eine Sicherung ab, wenn die Anfrage mehrdeutig ist.
• Bevorzugen Sie das Beispiel mit den wenigsten beweglichen Teilen, das die Anfrage dennoch erfüllt.

Anpassungsregeln

• Behalten Sie die Größenanpassung von useViewportRect bei. Bevorzugen Sie rect.vmin, rect.vmax, rect.width und rect.height gegenüber hartcodierten Pixeln.
• Behalten Sie die Themenfarben aus docs/src/styles/custom.css bei. Tauschen Sie keine willkürlichen Farben ein, es sei denn, der Benutzer hat nach einer neuen Palette gefragt.
• Halten Sie die Component-Funktionen von Docs-Bits vollständig in sich geschlossen. Lassen Sie keine Helfer, Konstanten oder Datenarrays auf Modulebene, wenn das Beispiel im Docs-Playground-Pfad verwendet wird.
• Docs-Bits sind für die Anzeige vorverpackt. Wenn Sie eines in eine eigenständige Remotion-Komposition umwandeln, fügen Sie Ihr eigenes äußeres Layout und Ihren eigenen Hintergrund hinzu.
• Für stufenweise Ein- und Ausbewegungen bevorzugen Sie die StaggeredMotion-Sequenzierung gegenüber manueller Frame-Phasen-Mathematik.
• Behalten Sie für Präsentationsabläufe zuerst die Schrittsruktur des Beispiels bei und ändern Sie dann Inhalt, Kameraziele und Timing.

Primitive Kurzreferenz

• AnimatedText: Einstiegspunkt für Einblendungen, Folien, Wort-für-Wort-Teilung, Zeichen-für-Zeichen-Teilung und Textwechsel. Verwenden Sie es, wenn die Bewegung hauptsächlich eine Textenthüllung ist. Vermeiden Sie es, Textstaggering manuell neu aufzubauen.
• AnimatedCounter: Numerische Interpolation mit Unterstützung für Präfix und Postfix. Verwenden Sie es für KPI-, Preis- und Statistik-Enthüllungen. Vermeiden Sie es, formatierte Zeichenfolgen selbst zu animieren.
• TypeWriter: Tippen und Löschen von Text mit Cursor-Verhalten. Verwenden Sie es für Terminal-, CLI- und sequentielle Überschrift-Effekte. Vermeiden Sie es für dichte Code-Layouts, wo CodeBlock das eigentliche Primitive ist.
• CodeBlock: Syntax-hervorgehobene Code-Enthüllung mit Zeilenstaggering, Fokus und Hervorhebungsregionen. Verwenden Sie es für Editor- und Code-Demo-Szenen. Vermeiden Sie es, Codezeilen von Hand zu rendern, es sei denn, das Layout ist absichtlich benutzerdefiniert.
• MatrixRain: Fertiger Matrix-Stil-Textregen. Verwenden Sie es, wenn die Anfrage ausdrücklich Matrix- oder Hacker-Regen-Thema ist. Vermeiden Sie es als generischen Partikelhintergrund.
• GradientTransition: Animierte CSS-Gradientenhintergründe und -übergänge. Verwenden Sie es, wenn die Bewegung hauptsächlich Hintergrundfarbe und Gradientenentwicklung ist. Vermeiden Sie es, es durch manuelle Farbinterpolation zu ersetzen, es sei denn, der Effekt ist kein Gradientenübergang.
• StaggeredMotion: Gemeinsames Sequenzierungs-Primitive für wiederholte Kinder. Verwenden Sie es für Listen, Raster, Kartenstapel und Multi-Element-Eingänge. Vermeiden Sie Frame-Mathematik pro Kind, wenn die Animation nur gestaffelte Transformationen und Deckkraft ist.
• Particles und Partikelsystem-Primitive: Verwenden Sie Particles, Spawner und Behavior für Umgebungsbewegungen, Springbrunnen, Schnee, Glühwürmchen und Feldeffekte. Vermeiden Sie sie für Textsequenzierung oder Layout-Übergänge.
• Scene3D: Kamera, Schritte und 3D-Raumkomposition. Verwenden Sie es, wenn sich die Anfrage wie eine Präsentation, ein Durchflug, ein mehrschrittiger Rundgang oder eine kameragesteuerte Vorführung anfühlt. Vermeiden Sie es, dies mit einfachen Sequenzen neu aufzubauen, wenn die Kamerabewegung zentral ist.
• useViewportRect: Größenanpassungs- und Layoutgrundlage. Verwenden Sie es in fast jedem responsiven Bit. Vermeiden Sie hartcodierte Pixelgrößen, es sei denn, Sie passen absichtlich ein festes Render-Ziel an.

Allgemeine Entscheidungsregeln

• Benötigen Sie dieselbe Bewegung bei wiederholten Kindern: Verwenden Sie StaggeredMotion.
• Benötigen Sie textspezifisches Enthüllungsverhalten: Beginnen Sie mit AnimatedText.
• Benötigen Sie Zählen: Verwenden Sie AnimatedCounter.
• Benötigen Sie Tippen: Verwenden Sie TypeWriter.
• Benötigen Sie Code auf dem Bildschirm: Verwenden Sie CodeBlock.
• Benötigen Sie Umgebungsemitter oder Partikel: Verwenden Sie Partikelsystem-Primitive.
• Benötigen Sie Szenen-zu-Szenen-Kamerabewegung: Verwenden Sie Scene3D.

Beispiel-Erste-Muster

• Textanfrage: Finden Sie ein Text-Bit, rufen Sie es ab, tauschen Sie dann Kopie, Timing und Teilungsmodus aus.
• Counter-Anfrage: Finden Sie ein Counter-Beispiel, passen Sie dann Werte, Beschriftungen und Partikelakzente an.
• Code-Anfrage: Finden Sie ein Code-Block- oder Typewriter-Beispiel, passen Sie dann das Code-Beispiel und die Hervorhebungsregionen an.
• Hintergrundanfrage: Finden Sie ein Farbverlaufs- oder Partikelbeispiel, passen Sie dann Palette, Dichte und Dauer an.
• Präsentationsanfrage: Finden Sie zuerst ein Scene3D-Beispiel, passen Sie dann Schrittpositionen, Titel und Karteninhalt an, bevor Sie neue Primitive einführen.

Minimale Betriebsbeispiele

# MCP
find_remotion_bits {"query":"Kamera-Durchflug Produktshowcase","tags":["scene-3d"],"limit":2}
fetch_remotion_bit {"id":"bit-carousel-3d"}

# CLI
npx remotion-bits find "Kamera-Durchflug Produktshowcase" --tag scene-3d --limit 2 --json
npx remotion-bits fetch bit-carousel-3d --json

Referenzen

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