YYL Remotion Video

Was macht YYL Remotion Video?

Verwandle einen Artikel, Textbausteine, Notizen oder eine klare Gliederung in ein Remotion-Videoprojekt. Diese Fähigkeit ist videoorientiert: kein klickgesteuerter Web-Player, kein Web-presentation/, keine TTS-Synthese innerhalb dieses Workflows.

Kernausgabe

my-video/
├── article.md
├── script.md
├── outline.md
├── notes.md
└── remotion/
    ├── src/Root.tsx
    ├── src/Composition.tsx
    ├── src/chapters/<NN>-<id>/
    │   ├── <Chapter>.tsx
    │   ├── narrations.ts
    │   └── timing.ts
    ├── public/assets/
    ├── preview-stills/
    └── out/

Gebündelte Skill-Ressourcen:

themes/       # Farb- / Typografie-Systeme
templates/    # kopierbare Remotion TSX-Startpunkte
references/   # Handwerks-, Themen- und Vorlagen-Anleitung

Ausführungsstärke

Vor dem Schreiben der Dateien entscheiden:

Stärke	Verwende, wenn	Verhalten
Quick	<= 450 chinesische Zeichen, <= 60 s, Themeneignung, Entwurfs-Demo	1 Kapitel, wenige Beats, direkte Umsetzung
Standard	1–4 Min., normaler veröffentlichbarer Erklärer	Skript + Gliederung, erstes Kapitel als Anker, dann fortfahren
Streng	> 4 Min., Marken-/kommerzielle/hochriskante Inhalte	umfassendere Planung, mehr Standbildprüfungen, langsamere Kapiteldurchsicht

In einer Zeile melden:

Ich verwende <Quick/Standard/Strict>, weil <Länge / Risiko / Ziel>.

Arbeitsablauf

1. Eingabe-Gate

   • Nur fortfahren, wenn der Benutzer Quelltext, ein Skript, Notizen oder eine klare Gliederung angibt.
   • Gibt er nur ein Thema an, nach Material fragen. Kein komplettes Video erfinden.

2. Inhaltsdateien

   • Quellmaterial in article.md speichern, wenn vorhanden.
   • Endgültigen gesprochenen Text in script.md speichern.
   • Entwicklungsplan in outline.md speichern.
   • outline.md plant Kapitel, Beats, Bildschirminhalt, Informationspool, Assets.
   • outline.md schreibt keine exakte Animationsimplementierung vor.

3. Themenauswahl

   • Nur die in dieser Fähigkeit gebündelten Themes verwenden: themes/command-film, themes/studio-white, themes/research-desk.
   • Themes aus web-video-presentation nicht wiederverwenden oder importieren.

4. Vorlagenauswahl

   • Wenn der Benutzer nach einem bekannten Layout oder Animationsmechanismus fragt, references/TEMPLATES.md lesen.
   • templates/luxury-perspective-gallery für luxuriöses dunkles Portfolio, 3D-Perspektiv-Horizontal-Karussell oder Premium-Agentur-Galerie verwenden.

5. Remotion-Projekt

   • Vorhandenes remotion/ wiederverwenden, falls vorhanden.
   • Nur erstellen, wenn es fehlt:

     npx create-video@latest --yes --blank --no-tailwind remotion
     

   • Wenn eine ausgewählte Vorlage Tailwind erfordert, das Projekt mit Tailwind-Unterstützung erstellen oder Tailwind hinzufügen, bevor die Vorlagendateien kopiert werden.
   • Abhängigkeiten nur installieren, wenn remotion/node_modules fehlt oder Remotion-Befehle aufgrund fehlender Abhängigkeiten fehlschlagen.

6. Timing

   • Keine Audiosynthese durchführen.
   • Dauern aus Erzählung und visueller Komplexität schätzen.
   • Standardmäßig fps = 30, width = 1920, height = 1080.
   • Text in narrations.ts speichern; geschätzte durationFrames in timing.ts speichern.

7. Implementierung

   • references/REMOTION-CRAFT.md vor jedem Kapitel lesen.
   • Mit useCurrentFrame(), interpolate(), Easing und Sequence animieren.
   • Für primäre Animation keine CSS-Transitions / CSS-Animationen / GSAP verwenden.
   • Tailwind darf statisches Layout stylen, aber Tailwind-Animation-Utilities sind nicht erlaubt.

8. Überprüfung

   • Ausführen:

     cd remotion
     npm run lint
     

   • Mindestens ein Standbild pro Kapitel rendern, oder 2–4 Standbilder für ein kurzes vollständiges Video:

     npx remotion still <composition-id> --frame=<frame> --scale=0.5 --output=preview-stills/<name>.png
     

   • MP4 rendern, wenn die Standbilder korrekt aussehen:

     npx remotion render <composition-id> out/<name>.mp4
     

9. Notizen

   • notes.md aktualisieren mit fps, Auflösung, Gesamtframes, geschätzter Dauer, geprüften Standbildern, Pfad des gerenderten MP4, und dass Audio/Untertitel in der Postproduktion erfolgen.

Themenauswahl

Theme	Am besten geeignet für	Gefühl
command-film	Agenten, Terminal, Automatisierung, Entwicklerwerkzeuge	dunkler, filmischer Kommandoraum
studio-white	SaaS-Demos, Launchs, Kurse, Produkt-Tutorials	sauberes, weißes Produktstudio
research-desk	Essays, Berichte, Paper, Unternehmensanalysen	ruhiger, analytischer Schreibtisch

Für vollständige Themennnotizen references/THEMES.md lesen.

Vorlagenauswahl

Vorlage	Am besten geeignet für	Gefühl
luxury-perspective-gallery	Premium-Portfolio, Produktshowcase, 3D-Horizontal-Karussell	dunkler, cyber-minimaler Agenturslider
charity-doodle-poster	Nonprofit-Plakate, handgezeichnete Tierhelden, line-boil redaktionelle Web-Effekte	retro Tintenpinsel-Stop-Motion-Plakat

Für vollständige Vorlagennnotizen references/TEMPLATES.md lesen.

Remotion-Regeln

• Composition in Root.tsx verwenden.
• Sequence verwenden, um Beats auf der Timeline zu platzieren.
• useCurrentFrame() + interpolate() für Bewegung verwenden.
• Statische Assets in remotion/public/assets/ ablegen; mit staticFile() referenzieren.
• Standbildprüfungen sind vor dem endgültigen Rendering erforderlich.
• Das finale MP4 ist still, es sei denn, der Benutzer fügt später in der Postproduktion Audio hinzu.