maddexritter-rgb/vibe-editing-promo

/promo — Markenvideo-Generator (Remotion + Claude Code)

Erstellt zwei Arten hochwertiger Markenvideos. Angetrieben von Remotion (React-basiertes Video) + Claude Code + der remotion-best-practices-Skill.

🎬 WÄHLE ZUERST DEN MODUS (frage den Benutzer, falls nicht offensichtlich)

• MODUS A — ANIMIERTER ERKLÄRER / DEMO. Vollständig animiert, ohne echten Langform-Footage als Rückgrat. Deck-Demos, Feature-Launches, das Content-Flywheel-Video, SaaS-Promos, Marken-Erklärvideos. → erstellt aus templates/glass/ (Premium-Liquid-Glass) oder templates/saas/. Siehe den glass-Abschnitt unten. Arbeitsbeispiel: ~/Downloads/engine/2026-06-12_WorkflowDemo (die FlywheelFilm-Komposition).
• MODUS B — ARCHIV-/URSPRUNGSFILM. Der Benutzer übergibt einen langen Rohschnitt (eigener Schnitt – echtes Filmmaterial, Kapitel getrennt durch schwarze Frames) und möchte daraus einen Markenfilm: Kapitelkarten zwischen den Abschnitten, szenenangepasste Musik pro Kapitel, Flash-Übergänge und einen Wachstumspfad. → Epochenkarten + assemble.py. Siehe den MODUS B-Abschnitt unten. Arbeitsbeispiel: ~/Downloads/engine/2026-06-14_BrandHistory (ein Ursprungsfilm „4,5 Jahre in ~5 Minuten“).

Beide Modi teilen sich das gleiche markenspezifische Glass-Kit (Sting, GlassBG, Epochenkarten, Wachstumskurve, Brand constants.ts), sodass sie wie eine Familie aussehen. Rebranding pro Marke in constants.ts + public/-Logos – niemals einen Markennamen fest in eine Komponente codieren.

Wann verwenden (vs. andere Video-Skills)

• ✅ Verwende dies: eigenständige Promo-Videos, SaaS-Demos, Kurs-Teaser, Feature-Launch-Videos, animierte Erklärvideos von einer URL
• ❌ Verwende dies nicht: Talking-Head-Clips, face-getracktes Reframing, Füllwort-Entfernung, Untertitelung vorhandener Videos (verwende stattdessen shortform / caption-clips)

Fertige SaaS-Animation-Vorlagen

Drei produktionsreife Remotion-Komponenten für den „SaaS-Animation-Stil“ (der $1-2k/Video-Stil, der 2026 Tech-Brand-Instagram/TikTok dominiert). Einfach in jedes Remotion-Projekt einfügen:

• templates/saas/SaasTextPopup.tsx – 4s markierte Intro mit Pop-In-Text + Logo-Enthüllung
• templates/saas/SaasGlassReveal.tsx – 6s Glas-UI-Feature-Karten mit Backdrop-Blur
• templates/saas/SaasDashboardTour.tsx – 8s 3D-Dashboard-Tour mit animiertem Cursor

Vollständige Technik-Referenz unter editing-styles/saas-animation-style.md. Verketteter Orchestrator unter saas-animation-video – auslösen mit „make a saas animation video".

Siehe templates/saas/README.md für Verkabelung + Markenanpassung.

---

🟣 PREMIUM-LIQUID-GLASS-DEMO-/ERKLÄRVIDEOS – templates/glass/

Das System hinter den hochwertigen, markennahen „heilige Scheiße“-Präsentationsvideos (die Art, die in eine Slide-Deck als Live-Demo eingebunden wird). Verwende dies – nicht die SaaS-Vorlagen – wenn es um ein poliertes, deck- oder konzeptgetriebenes Erklärer-/Demo-Video mit echtem Filmmaterial, echter Produkt-UI und fettem On-Screen-Text statt Voiceover geht. Arbeitsbeispiel: ~/Downloads/engine/2026-06-12_WorkflowDemo (die FlywheelFilm-Komposition – eine Content-Flywheel-Demo). 1920×1080 @ 30fps, fette Lower-Thirds, kein VO.

MARKENNEUTRAL. Das Kit ist markenspezifisch tokenisiert. Setze die Marke in src/constants.ts (COLORS + Schriftart) und lege die Marken-Logo-PNGs in public/ ab. Das Beispiel verwendet Speaker / company.com (Sambucus #131628, Electric Indigo #6f00ff, Lavender #a08bec, Poppins) – tausche diese Token pro Marke aus; codiere niemals einen Markennamen fest in eine Komponente.

Was im Kit enthalten ist (templates/glass/src/)

• constants.ts – Marken-Tokens (COLORS, FPS, WIDTH, HEIGHT, Spring-Voreinstellungen). DER eine Ort für das Rebranding.
• components/GlassBG.tsx – dauerhafter, driftender Orb-Verlaufshintergrund (die kontinuierliche Fluss-Basis; liegt hinter jedem Beat).
• components/GlassPanel.tsx – das matte „Flüssigglas“-Panel (Backdrop-Filter-Blur + Glanz + Tiefe). dark-Variante für Textlesbarkeit. Backdrop-Filter WIRD in Remotions Headless Chrome gerendert.
• components/GlassBeats.tsx – die Beat-Primitive: GlassTitle (Hook-Karte), GlassFrame/SceneDemo (UI-in-einem-Glas-Fenster + Erzählung), GlassOutro (Payoff-Karte + Logo), PayoffCard.
• components/BrandSting.tsx – ~1,5s Logo-Sting (Streifen → Flash → Mark-Blüte → Wortmarke).
• components/CreateShots.tsx – NarratorChip (die fette Lower-Third-Beschriftung = die „Fetter Text, kein VO“-Ebene) + Media-Player-Aufnahmen.
• components/Flywheel.tsx – charakteristische Beats: ContentFlywheel (der sich verstärkende Schleifen-RING), FlywheelEscalation (Stapel-Deck-Linie-Payoff), AutoPostScheduler (Live-Terminal + echte Bildschirmaufnahme, nebeneinander), RawSessionPlayer, HeroClipPlayer (Clip in einem Telefonrahmen), Tier1Prompt/Tier1Pipeline (Befehl + Schritte).
• components/ChannelScroll.tsx – ein echter, scrollender Kanal-Feed (Thumbnails + Dauern). RealClipShowcase.tsx – ein Raster mit echten vertikalen Clips, die abgespielt werden. GlassBrowser.tsx – App-UI in einem Browser-Fenster. ScaleWall/Odometer/Stopwatch – Volumen + Zahlen-Drama. FXOverlay – Korn/Vignette.
• audio/index.tsx – AudioBed (Musik, leise) + Sfx (Whoosh/Braam/Riser/Tick…) mit einer MASTER-Gain-Karte.
• compositions/FlywheelFilm.tsx – das Arbeitsbeispiel: Sting → Hook → Rohbeweis → Befehl → Pipeline → (Mitte: Kanal + Auto-Post-Terminal/Aufnahme) → (Shorts: Held + Raster) → Flywheel-Ring → Eskalation → Outro.

Das Produktions-Playbook (die Reihenfolge, die funktioniert)

1. Lies zuerst das Quellmaterial (das Deck / Briefing). Extrahiere das Konzept UND die eigene Sprache der Marke – ziehe wörtliche Zeilen für die Beats, damit sich das Video wie ihre eigene Rede anfühlt. (Erfinde keine generischen Texte.)
2. Setze Marken-Tokens in constants.ts; lege Logos in public/ ab (siehe Gotcha #5 zu Logo-PNGs).
3. Storyboarde die Beats mit TransitionSeries (Sting → Hook → Demo-Beats → Payoff-Loop → Eskalation → Outro). Halte es knapp (~38–45s) – schnelle Beats, fette Lower-Thirds. („Zu langsam“ ist der häufigste Kritikpunkt.)
4. Verkabel echte Assets (siehe Muster unten) – echtes Filmmaterial/UI > Mockups, jedes Mal.
5. Rendern: npx remotion render <CompId> out/<name>.mp4 --codec=h264 --crf=16 (füge „Verwende Remotion Best Practices“ hinzu, wenn du Änderungen anforderst).
6. QC DURCH EXTRAHIEREN VON EINZELBILDERN – niemals blind vertrauen (Gotcha #1).
7. Ausliefern an das 20_DELIVER/ des Projekts (markenbenannt). Nur lokal, sofern nicht anders angegeben.

Muster für echte Assets

• Filmmaterial → <OffthreadVideo muted startFrom={..} playbackRate={..} /> innerhalb eines Glas-Player/Telefon/Browser-Fensters. Erstelle Proxies (720×1280 / 1080), damit Studio + Rendern schnell bleiben.
• Bildschirmaufnahmen → zuschneiden NUR auf die App-UI (Browser-Tab/Adressleiste/Banner entfernen): ffmpeg -ss A -t B -i rec.mov -vf "crop=W:H:0:Y,scale=1600:-2" -an out.mp4. Beschleunigen (playbackRate 2–3,5×), sodass es sichtbar durch Schritte fortschreitet, nicht verweilt.
• Terminal + Aufnahme nebeneinander (der Killer-Beat): ein gestyltes Terminal, dessen Log den stdout des ECHTEN Skripts spiegelt (lese die tatsächliche Skill/das Skript, um authentische Zeilen zu erhalten) neben der tatsächlichen Bildschirmaufnahme – die beiden lesen dieselben Namen und verkaufen es als ein System. Siehe AutoPostScheduler.
• Echte Daten/Thumbnails → live ziehen: yt-dlp "https://youtube.com/@CHANNEL/videos" --flat-playlist --print "%(id)s|%(duration_string)s|%(title)s", dann Thumbnails von https://i.ytimg.com/vi/<id>/maxresdefault.jpg (Fallback mqdefault.jpg). Für Speaker-Clip-Daten: der your analytics MCP.

🛑 DIE GOTCHAS – jede einzelne ist eine echte Lösung aus dem Bau dieser Skill; lies sie VOR dem Rendern

1. QC durch Einzelbilder, niemals blind. Nach jedem Rendern, ffmpeg -ss <t> -i out.mp4 -frames:v 1 f.jpg über JEDEN Beat und tatsächlich anschauen. Rendere die erste Hälfte frühzeitig mit --frames=0-540, während Assets fertig werden.
2. Übergangs-Textsalat. Zwei Text-Beats, die überblenden, überlappen sich zu unlesbarem Müll. LÖSUNG: Blende den Inhalt jedes Text-Beats über seine letzten ~14 Frames AUS (ein exit = interpolate(f,[dur-16,dur],[1,0]) multipliziert in die Deckkraft), sodass er verschwunden ist, bevor der nächste einblendet. (Oder harte Schnitte bei Text-Beats.)
3. Sting/Logo-Durchscheinen. Ein Sting (oder jeder Beat), der auf einem hellen Logo endet, scheint DURCH die nächste durchscheinende Glaskarte während der Überblendung. LÖSUNG: Blende das Logo des Stings an seinem EIGENEN Ende aus, sodass es auf einem sauberen dunklen Frame übergibt.
4. Scrim-über-Text-Abdunklung (subtil!). Ein <AbsoluteFill>-Scrim ist ein positioniertes Geschwisterelement, sodass es ÜBER statischem Text malt und ihn abdunkelt – helles Weiß überlebt, Lavendel/Sekundärtext wird zerquetscht und wirkt schwach. LÖSUNG: Setze den Scrim auf zIndex:0 und umschließe den Text in einem position:relative; zIndex:1-Container. (Dann tötet ein Scrim mit hoher Deckkraft den „Glühen-dann-nicht-glühen“-Puls des driftenden Orbs, ohne den Text abzudunkeln.)
5. Unsichtbare Logos. Ein quadratisches Logo-PNG mit transparentem Padding rendert die tatsächliche Marke winzig/unsichtbar. LÖSUNG: Schneide das PNG zuerst auf seinen Inhalt zu und dimensioniere es dann nach der BREITE (<Img style={{ width: 600, height: 'auto' }} />).
6. Audio-Clipping. Nicht zugeordnete SFX werden bei 1.0 abgespielt → Vollaussteuerungs-Clipping. LÖSUNG: Ein MASTER-Gain (~0,5) + eine vollständige per-SFX-VOL-Karte + Musik ~0,2 unter der Stimme; loudnorm I=-14:TP=-1.5 auf dem endgültigen Liefergegenstand. Überprüfe volumedetect max ≤ ~−3 dB.
7. zsh-Worttrennung. for x in $VAR teilt in zsh NICHT auf (eine Iteration mit dem gesamten String). Verwende eine literale Liste oder ${=VAR}. (Hat mich beim Batch-Download von Thumbnails gebissen.)
8. Halte das letzte Frame lebendig (nicht schwarz) – Outros enden auf der Logokarte; überprüfe die Luma des letzten Frames > ~10.
9. Schriftarten via @remotion/google-fonts (Poppins, JetBrainsMono). Zahlen/Schlüsselwörter leuchten mit einem konstanten textShadow (verlasse dich nicht auf den Hintergrund für das Leuchten – siehe #4).

---

🧊 3D + 2,5D PARALLAXE + ☁️ CLOUD-SKALIERUNG (MODUS A Power-Ups)

Arbeitsbeispiel: ~/Downloads/_PROJECTS/2026-06-15_3DSaasDemo (eine SaaS-Demo – Parallaxe-Held, schwebende Glas-Dashboard-Karten, 3D-Balkendiagramm + eine echte WebGL-Variante).

3D – zwei Wege

• CSS 3D (Standard, keine Abhängigkeiten, rendert überall). Wickle eine Szene in perspective + transformStyle:'preserve-3d'; platziere Ebenen auf unterschiedlichen translateZ und animiere die Z-Welt mit useCurrentFrame() = eine Kamerafahrt, bei der sich nahe Ebenen mehr bewegen als ferne (echte 2,5D-Parallaxe). Schwebende Glaskarten, extrudierte Balkendiagramme (Vorder-/Seiten-/Oberflächen), zurückweichende Gitterböden – alles aus CSS-Transforms. Greife zuerst danach – es ist kugelsicher in Headless Chrome.
• Echtes WebGL – @remotion/three + React Three Fiber. Echte Meshes, Beleuchtung, Schatten, Materialien. Nur verwenden, wenn CSS-3D nicht kann (echte Geometrie/Beleuchtung/DOF). Installiere @remotion/three + @react-three/fiber@^9 + three (R3F v9 ist erforderlich für React 19; v8 ist React 18). Treibe Animation mit Remotions useCurrentFrame() an, NICHT mit R3Fs useFrame (Remotion rendert Frame für Frame). Wickle in `<ThreeCanvas width