norahe0304-art/30x-video

Remotion Schöne Videos

Erstelle 40-Sekunden-Produkt-Launchvideos, die aussehen, als hätte eine 50.000-Dollar-Agentur sie produziert. Das Geheimnis: Baue animierte Produkt-UI-Mockups – echte Dashboards, Konversationsoberflächen, Code-Editoren, Datenvisualisierungen – alle in Code konstruiert und spring-animiert.

Wann verwenden

Der Benennt eine Marke oder gibt eine URL ein und möchte ein Produkt-Launch-/Marketing-/Demovideo.

NICHT für (stattdessen anderswo hinführen, anstatt dieses Skill zu überdehnen): Extrahieren kurzer Clips aus einem bestehenden langen Video (das ist ein Kurz-/Recut-Job); Hinzufügen von Untertiteln zu vorhandenem Talking-Head-Material; NLE-artige Bearbeitung von Benutzermaterial (Zeitlupe/Farbkorrektur/Neuordnung); ein nackter Musik-Track, der ein beat-synchrones Lyric-Video benötigt. Dieses Skill baut ein Launchvideo aus der Webpräsenz einer Marke – codebasierte UI-Mockups, echte gescrapte Assets, 5-Akt-Erzählung. Wenn die Eingabe keine vorzustellende Marke/ein vorzustellendes Produkt ist, ist dies das falsche Werkzeug.

Technologie-Stack

Remotion 4.x (Scaffold auf ≥4.0.484 festgelegt) + React 19 + TypeScript + Zod + lucide-react + @remotion/transitions + @remotion/google-fonts + @remotion/paths + @remotion/light-leaks + @remotion/media + @remotion/effects (offizielles Gradient/Checkboard/Emboss/Gridlines – bevorzugt gegenüber handgemachten CSS-Äquivalenten)

Systemvoraussetzungen – Automatisch erledigt

Bitten Sie den Benutzer NICHT, etwas zu installieren. Führen Sie KEINE manuelle command -v-Prüfung durch. Der Orchestrator (scripts/url-to-video.ts) hat eine integrierte Preflight-Prüfung, die fehlende Tools erkennt, ausgibt, was fehlt, und sie via brew/apt/dnf/pacman/npm installiert – alles innerhalb von Schritt 1.

Erforderliche Tools (alle automatisch installiert, falls fehlend):

Tool	Warum
ffmpeg	Audio trimmen, loudnorm, Video trimmen, volumedetect-Sanity-Checks
yt-dlp	Marken-Demovideos + lizenzfreie BGM von YouTube scrapen
aubiotrack	Degradierter Beat-Fallback für analyze-audiomap.py + legacy beat-sync.ts (via aubio-Paket)
playwright	Headless gerenderter Homepage-Screenshot

Preflight-Flags (diese an url-to-video.ts übergeben):

• --yes – automatisch installieren ohne Nachfrage (dies verwenden, wenn du als Claude läufst, da du kein TTY hast)
• --no-install – Installationen überspringen, im degradierten Modus laufen (Beats → Fallback, Screenshot → nur Abruf)

Sollte die automatische Installation auf einer Plattform fehlschlagen (gesperrte Umgebung, kein sudo), gibt der Orchestrator den manuellen Installationsbefehl pro Tool aus und fährt degradiert fort. Gib niemals auf – degradierte Ausgabe ist immer noch besser als nichts.

Der Musik-Map-Analyzer (scripts/analyze-audiomap.py, Schritt 4) führt seine eigene Preflight durch: Er installiert pip librosa/numpy/soundfile beim ersten Lauf und degradiert, wenn die Installation fehlschlägt (oder --no-install übergeben wurde), zu aubiotrack – die Audiomap enthält dann nur bpm + beats_sec mit allen anderen Feldern null und rhythmic: false (Grid wird downstream nicht vertraut).

Der BGM-Generator (scripts/generate-bgm.py, Schritt 2 Stufe ②) hat die gleiche Preflight-Form: pip-installiert transformers/torch/soundfile/numpy (plain → --break-system-packages → --user); falls die Installation fehlschlägt, beendet er sich mit dem yt-dlp-Fallback-Hinweis, anstatt zu blockieren – die BGM-Beschaffung degradiert, stirbt nie. Generierte Tracks fließen genau wie jede andere BGM in analyze-audiomap.py ein.

URL-to-Video V2 Ausgabe-Vertrag

Bevorzugter Pfad: Führe den V2-Intake-Orchestrator aus und verfeinere dann das generierte Projekt in Remotion.

node --experimental-strip-types <installiertes-skill-verzeichnis>/scripts/url-to-video.ts https://marken-seite.de --out ./<markenname>-launch-video

Der Orchestrator muss ausgeben:

• brand-report.json
• scene-constitution.json
• asset-manifest.json
• story.md
• review.md
• ein vollständiges Remotion-Projektverzeichnis mit public/brand/*, optional public/brand/beat-map.json, src/theme.ts und generierten Intake-Daten für den Scaffold

Regressionspfad:

node --experimental-strip-types <installiertes-skill-verzeichnis>/scripts/benchmark-suite.ts --match stripe-fintech --offline --reuse-brand-dir ./public/brand --install --verify --render

Der Benchmark-Runner muss pro Benchmark benchmark-result.json-Dateien und eine Suite-Zusammenfassung ausgeben, sodass V2-Änderungen unter Druck getestet werden können, anstatt darüber zu diskutieren.

Dieses Skill optimiert nicht für einen Ein-Klick-Final-Render. Es optimiert für einen Videoteam-tauglichen ersten Schnitt, den Claude oder ein Mensch die letzten 10-20 % innerhalb von Remotion schieben kann.

Kernphilosophie

1. Baue Produkt-UI-Mockups, keine abstrakten Grafiken. Die UI IST die Animation.
2. Scrape zuerst, gestalte zweitens. Jede Farbe, Schriftart, jedes Logo stammt von der echten Markenseite.
3. Tempo ist Luxus. 40 Sekunden lassen den Inhalt atmen. Dränge nie durch Funktionen.
4. Geschmack über Vorlagen. Wenn es aussieht wie "von KI gemacht", neugestalten.
5. Eine Schriftfamilie, Gewichtshierarchie. Nur 300-600 Bereich, niemals fett (700+).

Drei-Schichten-Verfassung

• Phänomenale Schicht: Ernte Nachweise von der offiziellen Website. ScreenshotProof ist Pflicht. VideoProof wird bevorzugt. Kein visueller Nachweis, kein glaubwürdiges Video.
• Wesensschicht: Leite einen DesignArchetype aus den Nachweisen ab. Verwende Referenzen, um das Urteil zu schärfen, niemals, um die Marke zu überschreiben.
• Philosophische Schicht: Lehne reflexartige Standardeinstellungen ab, bevor du baust. Geschmack schlägt Bequemlichkeit. Glaubwürdigkeit schlägt Spektakel. Produktrealität schlägt Vorlagenenergie.

Dieses Skill übernimmt explizit Ideen von:

• agent-browser als bevorzugter Erntemaschine der phänomenalen Schicht (headless, entführt nicht den Bildschirm)
• awesome-design-md als Unternehmensdesign-Archetyp-Referenzbibliothek
• taste-skill als Ausführungsdisziplin-Quelle
• Impeccable als Finish-Gate und Anti-Monokultur-Vokabular-Quelle

Keines der oben genannten ist eine harte Abhängigkeit. Ihr Wert ist in das Denken und die Gates dieses Skills eingebettet.

Regeln

Lies die einzelnen Regeldateien für detaillierte Erklärungen und Codebeispiele:

Designsystem

• rules/typography.md – Schriftgewichte (max 600), Größenhierarchie (min 24px), Textsicherheit
• rules/color.md – Markenpolarität, Neutraltönung, 60-30-10-Regel, Akzent-Transparenzstufen
• rules/layout.md – Rastersystem, 4px-Abstandsskala, Sicherheitszonen, Border-Radius-Hierarchie, Anti-Überlappung
• rules/composition.md – Maßgeschneidertes Kompositionsgesetz: Null-Vakuum-Atmosphärenbasis, Vollformat-Momente, editorialer 200-320px-Schriftzug, echte Assets zuerst, Kompositionsvielfalt – plus die KOMPOSITORISCHE SLOP-BLACKLIST (Hub-and-Spoke-Pillendiagramm, Hohlkarten-Triptychon, zentriertes Objekt im Leeren, ewiger Frühling+Schimmer-Open) und das dünne Evidenz-Playbook (Score < 40 → eine Markenwelt aus dem Geometrie des Logos wachsen lassen, niemals leere Karten)

Visueller Inhalt

• rules/ui-mockups.md – Produkt-UI-Konstruktion, Dichte, Titelleisten, Syntaxhervorhebung, Cursor-Simulation, Giant Terminal Bottom-Rising-Spezifikation (bewährte Geometrie + Inhaltsvertrag + Fehlerliste)
• rules/cards.md – Gestaffelte Kartenraster, Innenfülltechniken, animierte Kartenkörper, keine Duplikate
• rules/data-viz.md – SVG-Diagramme, animierte Metriken, tabellarische Zahlen, Statusabzeichen, Anti-Helden-Metrik
• rules/artifact-catalog.md – Lies, bevor du einen Akt gestaltest: 15 kampferprobte maßgeschneiderte Artefaktfamilien (mit Quellverweisen) + Scaffold-Inventar + produktionsübergreifendes Heldenrotations-Hauptbuch (~/.media/hero-ledger.jsonl) – Vielfalt ist ein Gate, kein Vorschlag

Bewegung & Produktion

• rules/motion.md – Federn, easeOutExpo, Einzelzeichen-Stagger, Timing-Standards, halten-dann-schnappen, organische AE-Vokabeln (wiggle / overshoot / idle float / lookAt – aus dem verwandten remotion-motion-Skill verdrahtet)
• rules/transitions.md – TransitionSeries, Lichtlecks, fließende Hintergründe, Rauschen-Texturen, Parallaxe
• rules/cinematic.md – Filmkorn, Vignette, Schimmer-Wipe, Farbkorrektur, Glasphorphismus, Render-Einstellungen
• rules/beat-sync.md – BGM-getriebenes Timing aus audiomap.json: ein Analyzer wird bedingungslos vertraut, Beat-Grid-Einfangen wenn rhythmic: true, Energie-Phase/Stille-Tempo wenn nicht, halten-dann-schnappen an Energie-Spitzen
• rules/narration-sync.md – Voiceover-/Untertitel-Videos nur: Beat-locke visuelle Elemente an Flüsterwort-Zeitstempel, Untertitel/Markenwort-Bereinigung, Satzgrenzen-Cut-Snapping

Strategie & Qualität

• rules/creative-moves.md – Fünf kreative Generatoren, destilliert aus jedem "umwerfenden" Urteil – Idiom-Literalismus, Logo-Geometrie-Wachstum, Einschränkungs-Alchemie, semantische Inversion, domänenheimischer Beweis
• rules/taste.md – KI-Slop-Blacklist, Designprinzipien, UX-Gesetze, Selbstüberprüfungs-Checkliste, Tempo
• rules/narrative.md – 5-Akt-Struktur, Überschrift/UI-Rhythmus, Erzählbogen, Logo-Konstellation
• rules/narrative-templates.md – Branchenspezifische Erzählvorlagen (AI SaaS, FinTech, DevTool, E-Commerce, Healthcare, Cybersecurity, Collaboration)
• rules/workflow.md – Marken-Scraping, Ikonsystem, Asset-Strategie, Video-Einbettung, Dateiorganisation, BGM-Vielfalts-Mandat (von der Marke abgeleitete Stimmung + globales Hauptbuch-Dedup – niemals denselben Track zweimal)
• rules/media-resolve.md – Asset-Auflösungskaskade (Hauptbuch → Übernahme → Programmatisch → Katalog → Web) mit .media/manifest.jsonl-Einfrier-Hauptbuch; programmatisch zuerst: Punktierte Weltkarten, einfache Ikone-Marken, LobeHub-KI-Modell-Logos als inline einfärbbare Komponenten
• rules/archetypes.md – Unternehmensdesign-Archetypen, abstrahiert aus hochwertigen Designreferenzen
• rules/finish-gate.md – Impeccable-Stil-Finish-Protokoll, Anti-Monokultur-Prüfungen, Render-Blockierkriterien
• rules/qc-gates.md – Vier evidenzbasierte QC-Gates: Asset-Prüfung (Schritt 2.5), Akt-Bild-Nachweis (Schritt 4), Kritiker-Schleife-Verdrahtung (Schritt 7.5), ehrliches Disclosure (Schritt 8). Nur Nachweise – gerenderte Pixel + Read, niemals grep

Referenzdateien (Code-Muster)

• references/animations.md – FadeIn, ScaleIn, SplitText, Typewriter, CountUp, AnimatedPath
• references/audio.md – Audio-Sync, Beat-Erkennung, Voiceover-Ducking, ElevenLabs TTS with-timestamps VO-Pipeline (Wort-Timing kostenlos, eingeschränkte Schlüsselbehandlung, VO_CUES-abgeleitetes Ducking)
• references/components.md – GradientMesh, GlassPanel, FilmGrain, ProductFrame, BrandIcon
• scaffold/src/components/Transitions.tsx – 7 Übergangsfamilien (whipPan/maskWipe/push/zoomPunch/blurDissolve/flashThrough/glitchCut) – direkter Ersatz für fade(); reine Fade-Videos sind ein Verstoß
• scaffold/src/components/ShaderFX.tsx – GPU ShaderPlane (liquidWarp produktionsbereit; silk/lens in Arbeit) – rendern mit --gl=angle (im Scaffold-Render-Skript integriert)
• scaffold/src/components/Captions.tsx – Wort-Zeitstempel-Untertitel, 6 Stile (karaoke/scalePop/weightShift/neonGlow/kineticSlam/editorial)
• references/lottie.md – @remotion/lottie-Integration, empfohlene Quellen
• references/visual-effects.md – Gestaffelte Bibliothek visueller Effekte (lottie, motion-blur, confetti, flubber, three.js)

Remotion API-Referenz (Gebündelt)

Dieses Skill bündelt die vollständige remotion-best-practices-Referenz für Remotion-API-Muster. Lade diese, wenn du Remotion-spezifisches API-Wissen benötigst:

• remotion-best-practices/rules/videos.md – Video-Einbettung, Trimmen, Lautstärke, Geschwindigkeit, Schleife
• remotion-best-practices/rules/audio.md – Audio-Import, Trimmen, Lautstärke, Geschwindigkeit, Tonhöhe
• remotion-best-practices/rules/timing.md – Interpolationskurven, linear, Easing, Spring
• remotion-best-practices/rules/transitions.md – Szenenübergangsmuster
• remotion-best-practices/rules/compositions.md – Kompositionen, Standbilder, Ordner, Standard-Props
• remotion-best-practices/rules/sequencing.md – Sequenz-Verzögerung, Trimmen, Dauerbegrenzung
• remotion-best-practices/rules/fonts.md – Google Fonts und lokaler Schriftart-Ladevorgang
• remotion-best-practices/rules/images.md – Img-Komponentennutzung
• remotion-best-practices/rules/charts.md – Balken-, Kreis-, Linien-, Aktiendiagramm-Muster
• remotion-best-practices/rules/light-leaks.md – @remotion/light-leaks-Overlay-Effekte
• remotion-best-practices/rules/lottie.md – @remotion/lottie-Integration
• remotion-best-practices/rules/text-animations.md – Typografie-Animationsmuster
• remotion-best-practices/rules/calculate-metadata.md – Dynamische Kompositionsmetadaten
• remotion-best-practices/rules/voiceover.md – KI-Sprachausgabe mit ElevenLabs TTS
• remotion-best-practices/rules/parameters.md – Zod-Schema-Parametrisierung
• remotion-best-practices/rules/ffmpeg.md – FFmpeg-Operationen zum Videotrimmen

Arbeitsablauf (8 Schritte + 4 Evidenz-Gates)

Vier evidenzbasierte QC-Gates laufen innerhalb dieses Workflows – Asset-Prüfung (Schritt 2.5), Bild-für-Bild-Nachweis (Schritt 4), Kritiker-Schleife (Schritt 7.5), ehrliches Disclosure (Schritt 8). Nachweise nur – gerenderte Pixel + Read, niemals grep.

Schritt 0: Preflight & Intake

• node --experimental-strip-types <skill-dir>/scripts/url-to-video.ts <URL> --out ./<marke>-launch-video --yes
• Auf Fehler prüfen, auf automatisierte Tool-Installation achten
• Ausgabe-Struktur bestätigen: brand-report.json, scene-constitution.json, asset-manifest.json, story.md, review.md, vollständiges Remotion-Projekt

Schritt 1: Story & Konzept – Lese story.md und review.md, verstehe den Erzählbogen

• Standardparagrafen durch maßgeschneiderte 5-Akt-Erzählung ersetzen
• Story an die echte Produkt-Marktnachricht anpassen

Schritt 2: Formgebung & Farbe – Extrahiere aus brand-report.json

• Primäre Markenfarben, Sekundärfarben, Akzente
• Schriftartfamilie, Schriftgrößenhierarchie
• Marken-Ikonsystem (lucide-react + eigen)
• Entwickle einen DesignArchetype

Schritt 2.5: QC-Gate: Asset-Prüfung – Überprüfe asset-manifest.json auf:

• Logo vorhanden? Auflösung ≥ 512x512?
• Produkt-Screenshots vorhanden? Mindestens 3?
• Markenfarben identifiziert?
• Schriftart gefunden? Verfügbar in Google Fonts?
• BGM ausgewählt (entweder generiert oder YouTube-lizenziert)?
• Beat-Map generiert?

Schritt 3: Szenen-Konstitution – Lese scene-constitution.json

• Übersetze jede konstitutionelle Absicht in einen konkreten Remotion <Composition>-Baum
• Validiere gegen Regeln: Typografie, Farbe, Layout, Komposition

Schritt 4: QC-Gate: Bild-für-Bild-Nachweis – Für jede Szene:

• Gerendertes Standbild prüfen
• Gegen Designregeln validieren
• Gegen Kompositionsregeln validieren
• UI-Mockup-Treue bestätigen

Schritt 5: Übergänge & Bewegung

• Szenenübergänge hinzufügen (light leaks, wipe, dissolve, glitch)
• Animationen verfeinern (Federn, Timings, Stagger)
• Parallaxe und Tiefe hinzufügen

Schritt 6: Audio & Beat-Sync

• BGM importieren
• Beat-Map auf visuelle Schnitte anwenden
• Timing auf Beat-Phrasen verfeinern

Schritt 7: Filmische Effekte

• Filmkorn, Vignette, Farbkorrektur
• Glasphorphismus, Schimmer-Wipe
• Render-Einstellungen optimieren

Schritt 7.5: QC-Gate: Kritiker-Schleife – Führe gerenderten Frame gegen die Regeln

• Selbstüberprüfungs-Checkliste aus rules/taste.md durchführen
• Visuelle Eintönigkeitsprüfung (kein KI-Slop)
• Markentreue-Bestätigung

Schritt 8: QC-Gate: Ehrliches Disclosure – Füge Disclosure-Overlay hinzu

• KI-generierte Inhalte kennzeichnen
• Nicht-originale Assets offenlegen
• Render-Notizen anhängen