exiao/skills – Remotion-Videos-Kit

Remotion-Videos

Erstelle animierte Videos mit Remotion (React). Basierend auf den offiziellen remotion-dev-Best Practices und Bloom-spezifischen Kompositionen.

Schnellnavigation

Lies die relevante Regeldatei basierend auf der Aufgabe:

Kernanimationen

Aufgabe	Regeldatei
Interpolation, Easing, Federn	references/rules/timing.md
Grundlagen von Animationen	references/rules/animations.md
Textanimationen (Schreibmaschine, Wort-für-Wort usw.)	references/rules/text-animations.md
Szenenübergänge (Schieben, Einblenden, Wischen, Drehen)	references/rules/transitions.md
Sequenzierung (Verzögerung, Trimmen, Dauerbegrenzung)	references/rules/sequencing.md
Trimmen (Anfang/Ende abschneiden)	references/rules/trimming.md

Medien

Aufgabe	Regeldatei
Bilder (Img-Komponente)	references/rules/images.md
Videos (Einbetten, Trimmen, Lautstärke, Geschwindigkeit, Schleife)	references/rules/videos.md
Audio (Import, Trimmen, Lautstärke, Geschwindigkeit, Tonhöhe)	references/rules/audio.md
Audio-Visualisierung (Spektren, Wellenformen)	references/rules/audio-visualization.md
GIFs synchron zur Zeitleiste	references/rules/gifs.md
Schriftarten (Google Fonts, lokal)	references/rules/fonts.md
Assets (Import von Bildern/Videos/Audio)	references/rules/assets.md

Untertitel & Voiceover

Aufgabe	Regeldatei
Untertitel generieren (Audio transkribieren)	references/rules/transcribe-captions.md
SRT-Untertitel importieren	references/rules/import-srt-captions.md
Untertitel anzeigen (animierte Einblendungen)	references/rules/display-captions.md
Untertitel-Übersicht	references/rules/subtitles.md
KI-Sprachausgabe (ElevenLabs TTS)	references/rules/voiceover.md

Fortgeschritten

Aufgabe	Regeldatei
3D-Inhalte (Three.js / React Three Fiber)	references/rules/3d.md
Diagramme (Balken, Kreis, Linie, Aktie)	references/rules/charts.md
Karten (Mapbox)	references/rules/maps.md
Lottie-Animationen	references/rules/lottie.md
Light-Leak-Overlays	references/rules/light-leaks.md
Transparente Videowiedergabe	references/rules/transparent-videos.md

Einrichtung & Konfiguration

Aufgabe	Regeldatei
Kompositionen, Standbilder, Ordner, Standard-Props	references/rules/compositions.md
Dynamische Metadaten (calculateMetadata)	references/rules/calculate-metadata.md
Parametrisierung mit Zod-Schema	references/rules/parameters.md
TailwindCSS in Remotion	references/rules/tailwind.md
Text messen (Einpassen, Überlauf)	references/rules/measuring-text.md
DOM-Knoten messen	references/rules/measuring-dom-nodes.md

FFmpeg & Medien-Hilfsmittel

Aufgabe	Regeldatei
FFmpeg-Operationen (Trimmen, Stille-Erkennung)	references/rules/ffmpeg.md
Einzelbilder aus Video extrahieren	references/rules/extract-frames.md
Videodauer ermitteln	references/rules/get-video-duration.md
Videoabmessungen ermitteln	references/rules/get-video-dimensions.md
Audiodauer ermitteln	references/rules/get-audio-duration.md
Prüfen, ob Video dekodiert werden kann	references/rules/can-decode.md

---

remotion-bits Komponenten-Kit

Vorgefertigte Animationskomponenten. Installation: npm install remotion-bits

Wichtige Komponenten: AnimatedText (Wort-/Zeichen-/Absatz-Einblendungen), ParticleSystem (Konfetti, Schnee, Glühwürmchen), GradientTransition, Scene3D (3D-Kamerafahrten), Typewriter, CodeBlock (Syntax-hervorgehobenes Tippen).

Siehe references/remotion-bits.md für den vollständigen Katalog und Nutzungsbeispiele.

---

Bloom-Projekt

Projektverzeichnis: ~/clawd/remotion-videos/

remotion-videos/
├── src/
│   ├── Root.tsx          # Alle Kompositionen werden hier registriert
│   ├── ProductDemo.tsx   # Hauptkomponente für Produktdemo
│   ├── schema.ts         # Zod-Schemata für Props
│   ├── scenes/           # Einzelne Szenenkomponenten
│   │   ├── TerminalTyping.tsx
│   │   ├── FileScanning.tsx
│   │   ├── ScoreReveal.tsx
│   │   ├── ResultsSummary.tsx
│   │   └── TextOverlay.tsx
│   └── Composition.tsx
├── public/               # Statische Assets
├── out/                  # Gerenderte Ausgabe
├── remotion.config.ts
└── package.json

Bestehende Kompositionen

ID	Größe	Verwendungszweck
ProductDemo	1080x1080	Twitter/Instagram quadratisch
ProductDemoVertical	1080x1920	TikTok/Reels/Shorts vertikal
BloomDemo	1080x1080	Bloom-Branding quadratisch
BloomDemoVertical	1080x1920	Bloom-Branding vertikal

Alle Kompositionen: 15 Sekunden bei 30 fps (450 Bilder).

Props-Schema (ProductDemoProps)

{
  command: string;           // Terminal-Befehl, der getippt angezeigt wird
  files: Array<{             // Dateiliste für Scan-Animation
    name: string;
    errors: number;
    warnings: number;
  }>;
  score: number;             // Anzuzeigender Wert (0-maxScore)
  maxScore: number;          // Maximaler Wert
  statusLabel: string;       // z.B. „Kritisch“, „Moderates Risiko“
  statusColor: string;       // Hex-Farbe für Status
  resultLines: string[];     // Zusammenfassung der Ergebnisse
  title: string;             // Videotitel
  logoText: string;          // Marken-/Produktname
}

---

Vor der Komposition: Echte Bloom-Screenshots

Wenn das Video die Bloom-App-Oberfläche zeigt, nimm zuerst echte Screenshots auf:

1. PhoneAgent-Bridge starten (siehe ~/clawd/skills/phoneagent/SKILL.md)
2. Ausführen: python scripts/capture_bloom_screenshots.py --feature <portfolio|stock_detail|watchlist> --output public/screenshots/<feature>
3. Screenshots in Kompositionen referenzieren: staticFile("screenshots/<feature>/home.png")

Fällt graziös zurück, wenn die Bridge nicht läuft.

---

Rendering

cd ~/clawd/remotion-videos

# Vorschau im Browser (Remotion Studio)
npm run dev

# Rendern zu MP4
npx remotion render ProductDemo out/product-demo.mp4

# Vertikal für TikTok rendern
npx remotion render ProductDemoVertical out/product-demo-vertical.mp4

# Benutzerdefinierte Props
npx remotion render ProductDemo out/custom.mp4 --props='{"command":"my command","score":85}'

# Als GIF rendern
npx remotion render ProductDemo out/demo.gif --image-format=png --codec=gif

# Bestimmten Bildbereich
npx remotion render ProductDemo out/clip.mp4 --frames=0-150

Neue Kompositionen erstellen

1. Szenenkomponenten in src/scenes/ erstellen
2. Hauptkomposition in src/ erstellen
3. Zod-Schema in src/schema.ts definieren
4. In src/Root.tsx mit Abmessungen registrieren:
   • Quadratisch: 1080x1080 (Twitter, Instagram)
   • Vertikal: 1080x1920 (TikTok, Reels, Shorts)
   • Horizontal: 1920x1080 (YouTube)

---

QA nach dem Rendern

Nach dem Rendern immer eine Qualitätssicherung durchführen:

python scripts/visual_qa.py out/video.mp4 "Beschreibung deines Ziels"
# Oder mit dem Wrapper:
./scripts/render_and_verify.sh BloomDemo out/demo.mp4 "Ziel hier"

Behebe alle gemeldeten Probleme und rendere erneut. Liefere kein Video aus, das die QA nicht besteht.

---

Tipps

• Halte Videos für soziale Medien zwischen 15 und 30 Sekunden
• Verwende kontrastreiche Farben für die mobile Ansicht
• Füge Untertitel/Textüberlagerungen hinzu (die meisten Zuschauer schauen stummgeschaltet)
• Teste sowohl quadratisches als auch vertikales Format vor der Veröffentlichung
• Rendere mit 30 fps für soziale Medien (60 fps für schnelle Bewegungen)
• Verwende remotion-bits-Komponenten, bevor du Animationen von Grund auf neu baust