riaz37/remotion-ui

RemotionUI-Agent

Verwende diese Fähigkeit, wenn du Nutzern hilfst, vollständige Remotion-Kompositionen mit RemotionUI zu erstellen – nicht nur einzelne Effekte.

Harte Regeln

• Nutze die Remotion-Dokumentation für die Framework-Grundlagen.
• Verwende RemotionUI für vorgefertigte Quellkomponenten, die in das Repository des Nutzers kopiert werden.
• Führe npx remotion-ui@latest add <Komponente> aus, bevor du eine Komponente importierst.
• Importiere aus lokalen Pfaden: @/compositions/..., @/remotion/scenes/..., @/remotion/primitives/...
• Importiere niemals UI-Komponenten aus dem npm-Paket remotion-ui – es enthält nur eine CLI, keine Komponentenbibliothek. Komponenten sind kopierte Quelldateien, wie bei shadcn/ui.

Remotion-Animationsregeln (obligatorisch)

RemotionUI-Komponenten sind normale Remotion-Quelldateien. Alle bewegungsbezogenen Animationen zur Renderzeit müssen mit Remotions frame-basierten Primitiven umgesetzt werden, nicht mit Browser-Timing-APIs, da die Ausgabe Bild für Bild serverseitig gerendert wird und nicht live im Browser abgespielt wird:

• Animieren mit useCurrentFrame(), um den aktuellen Frame auszulesen, interpolate(), um Frame-Bereiche auf Wertebereiche abzubilden, und spring() für physikalische, ausklingende Bewegungen.
• Timing von Sequenzen mit <Sequence from={...} durationInFrames={...}> – niemals setTimeout, setInterval oder requestAnimationFrame.
• Niemals CSS-Transitionen, CSS animation / @keyframes oder Tailwind-Animation-Dienstprogrammklassen (animate-*, transition-*) für Dinge verwenden, die im gerenderten Video erscheinen müssen. Diese laufen im Live-Browser nach Echtzeit und existieren während des serverseitigen Remotion-Renderings nicht frame-genau – sie würden im Ergebnis falsch aussehen oder vollständig fehlen.
• Es ist in Ordnung, Tailwind für statische Layout-/Abstands-/Farbklassen zu verwenden – die Regel gilt nur für Bewegung/Timing.
• Leite alle Opazitäts-/Positions-/Skalierungs-/Rotationswerte von interpolate(frame, [inputRange], [outputRange], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) oder spring({ frame, fps, config }) ab und wende sie dann über inline style an (z. B. style={{ opacity, transform: \translateY(${y}px)` }}`).
• Beziehe fps von useVideoConfig(), nicht von einer fest codierten Konstante.

Arbeitsablauf

1. Verstehe das Ziel des Videos (Social-Media-Clip, Podcast, Datengeschichte, Produktvorstellung).
2. Wähle eine Hauptkomposition aus https://remotionui.com/ai/components.json
3. Führe npx remotion-ui doctor aus, wenn die Einrichtung defekt erscheint.
4. Installiere: npx remotion-ui add <Name>
5. Importiere aus lokalen Quellpfaden und setze die Komposition in Root.tsx zusammen.
6. Passe die kopierte Quelle für Marke, Timing und Layout an – unter Beachtung der obigen Animationsregeln.

Agenten-Indizes

• Komponenten: https://remotionui.com/ai/components.json
• Detail pro Komponente: https://remotionui.com/ai/components/.json
• Vollständige Anleitung: https://remotionui.com/ai/remotionui-agent.md
• Registry: https://remotionui.com/r/index.json

CLI (agentenfreundlich)

npx remotion-ui init --existing          # bootstrappt remotion-ui.json
npx remotion-ui doctor --json            # diagnostiziert die Einrichtung
npx remotion-ui search -q caption --json
npx remotion-ui view social-clip --json
npx remotion-ui list --json
npx remotion-ui add social-clip caption-highlight

Bestehende Remotion-Projekte

cd dein-remotion-projekt
npx remotion-ui init --existing
npx remotion-ui add social-clip
npm run dev

Kompositionsorientierte Voreinstellungen

Ziel	Hauptkomposition
9:16 Social-Media-Clip	social-clip
Creator-Reel	creator-reel
Podcast-Clip	podcast-clip
Daten-Erklärvideo	data-story
Produkteinführung	intro