Adaptive React & Remotion Motion Graphics Skill
Diese Fähigkeit leitet das Design, die kontextbewusste Art Direction, die flüssige narrative Strukturierung und das headless MP4-Rendering von Studio-Qualität Bewegtgrafik mit React und Remotion.
Kernphilosophie: "Form follows context." Erzwinge niemals eine starre Vorlage oder eine feste Aktanzahl für jedes Video. Bewerte zuerst die Marke, Dauer, Seitenverhältnis und Zielgruppe – wähle dann autonom das ideale strukturelle Archetyp und die moderne Designsprache, um eine maßgeschneiderte React-Komposition zu erstellen.
1. Pre-Flight Asset Inquiry & Evaluation (Schritt 0)
Bevor du Code schreibst oder renderst, führe die Asset Inquiry & Context Diagnosis durch:
🎯 Obligatorische Asset-Inquiry-Regel
Sofern der Benutzer nicht bereits explizit Bilddateien, Logos oder Design-Tokens in seiner Aufforderung bereitgestellt hat, MUSST du den Benutzer aktiv nach seinen vorhandenen Assets fragen:
Standardvorlage für die Asset-Abfrage (Asset Inquiry Template): "Haben Sie möglicherweise Markenlogos (SVG/PNG), Produkt-Screenshots, echte Fotos, offizielle Farben (HEX), Slogans/Kopien oder ähnliche Assets, die im Video verwendet werden sollen?
- Wenn Sie Assets besitzen: Bitte teilen Sie mir die Dateipfade mit oder legen Sie sie im
public/-Ordner des Projekts ab – ich werde sie präzise in das Video einbinden.- Wenn Sie keine Assets besitzen oder eine Eigenproduktion wünschen ('mach du mal'): Ich rekonstruiere die offiziellen CI-Vektoren der Marke/Organisation selbstständig, entwerfe filmische visuelle Elemente und maßgeschneiderte UI-Komponenten und erstelle damit das fertige Video."
3-Spur-Asset-Ausführungsrouting:
- Spur A (Vom Benutzer bereitgestellte Assets):
- Überprüfe zuerst den lokalen Arbeitsbereich /
public/-Ordner. - Binde SVG-Vektorpfade, hochauflösende Bilder und Screenshots über
staticFile('...')ein. - Wende Ken Burns Mikro-Panning (
references/asset-orchestration.md) und 3D-Perspektiven-Mockups an.
- Überprüfe zuerst den lokalen Arbeitsbereich /
- Spur B (Keine Assets / Autonome Generierung):
- Wenn der Benutzer "nein", "mach du mal" sagt oder keine Assets bereitstellt: blockiere niemals oder gerate ins Stocken.
- Rekonstruiere autonom offizielle Corporate-Identity (CI) Vektormarken (
references/brand-identity-and-ci.md). - Synthetisiere domänenauthentische visuelle Metaphern, gestaltete Karten, Vektorabzeichen und geometrische Motive.
- Spur C (Hybride Orchestrierung):
- Der Benutzer stellt nur ein Logo oder eine URL bereit: Extrahiere Farbtokens, baue autonom die Produkt-UI, Dashboards und die narrative Welt darum herum auf.
Projektkontext-Diagnose (4 Dimensionen)
1. Zielplattform & Seitenverhältnis:
• 16:9 Querformat (1920×1080) -> YouTube, Hero-Landingpages, Keynote-Showreels
• 9:16 Hochformat (1080×1920) -> TikTok, Instagram Reels, YouTube Shorts
• 1:1 Quadratisch (1440×1440) -> Twitter/X-Feeds, Instagram-Posts, fühlbare UI-Loops
• 4:5 Porträt (1080×1350) -> Social-Marketing-Feeds
2. Dauer & Tempo:
• Ultrakurz (3–7s) -> Kinetischer Logo-Bumper, sich wiederholendes Signaturmotiv, Mikrointeraktion
• Kurzform (8–15s) -> Social-Reel mit hoher Verweildauer, virales Produktfeature, Elevator Pitch
• Mittellang (15–30s) -> Kompletter Markenidentitätsfilm, umfassender Produkt-Launch
• Langform (30–60s) -> Mehrkapitel-Produkterklärvideo, Firmenjubiläum, Showreel
3. Entitätsidentität & Ton:
• Unternehmen / Fluggesellschaft / Automobilindustrie -> Würdevoll, weitläufig, aerodynamisch, luxuriös
• Wachstumsstarkes Tech / SaaS / KI -> Knackig, haptisch, hyper-schnell, titan-dunkel
• Akademisch / Universität / Kulturell -> Historisch, autoritativ, redaktionelle Serife, intellektuell
• Konsument / Kreativ / Lifestyle -> Lebendig, haptisch, elastisch, typografisches Spiel
4. Narrativer Bogen & Nachrichtenhierarchie:
• Hook (0–20%) -> Substantiierung/Feature (20–70%) -> Marken-Payoff & CTA (70–100%)
2. Adaptive Strukturelle Archetypen
Wähle die narrative Struktur, die natürlich zur Dauer und zum Ziel passt – erzwinge niemals eine starre 4-Akt-Form, wenn ein agiler Loop oder ein 2-Schlag-Punch überlegen ist:
| Archetyp | Typische Dauer | Rhythmus & Szenenstruktur | Beste Verwendung für |
|---|---|---|---|
| A. Kinetischer Bumper / Mikro-Loop | 3s – 6s (6–12 Schläge) | Single-Fokus-Momentum: Sofortiger visueller Hook → Kontinuierliches nahtloses Morphen → Hero-Logo-Lockup (Loop-Naht-Delta < 0,05). | Logo-Reveals, Signatur-UI-Loops, App-Ladezustände |
| B. Vertikales Social Reel / Shorts | 8s – 15s (16–30 Schläge) | 3-Sekunden-Regel: 0–1s Fetter, daumenstoppender Hook → 2–10s Schnelle kinetische Substantiierung (3 gestaffelte schnelle Schnitte) → 11–15s Knackiger Call-to-Action (CTA). | Instagram Reels, TikTok, YouTube Shorts |
| C. Narrativer Markenfilm | 15s – 30s (30–60 Schläge) | 4-Akt-Symphonischer Bogen: Der Aufbruch/Hook (0–20%) → Die Substanz/Das Netzwerk (20–55%) → Die stratosphärische Erhebung (55–80%) → Der ikonische Payoff (80–100%). | Große Markenfilme (z.B. Korean Air, Apple-Level-Launch) |
| D. Mehrkapitel-Erklärvideo | 30s – 60s (60–120 Schläge) | Kapitelweise Reise: Schmerzpunkt-Hook → Architektonische Aufschlüsselung → Deep-Dive-Feature-Demo → Social Proof & Ökosystem → Finales Brand-Lockup. | SaaS-Erklärvideos, institutionelle Übersichten, Investorendecks |
| E. Kontinuierliches Form-Morphing | Beliebig | Ungebrochene Identität: Ein primärer Container wird nie ausgeblendet oder verlässt den Bildschirm; morphiert kontinuierlich Dimension, Radius und interne Inhalte. | Haptische UI-Showcases, Produkt-Morph-Loops |
3. Das Spektrum moderner Designsprachen
Wähle autonom die visuelle Sprache, die zur Persönlichkeit der Entität passt:
[1. Swiss Neo-Brutalist] Ultra-disziplinierte Raster, fette groteske Sans (Geist, Inter), hoher Papier-/Tintenkontrast, null Schnörkel.
[2. Luxury Dark Titanium] Apple/Stripe-Ästhetik, tiefes Obsidian (#0B0C10), 1px haardünne Ränder, metallische Glanzlichter, warmes Gold/Vermilion.
[3. Editorial Serif & Film] Akademische & kulturelle Würde, fette moderne Serife (Instrument Serif, Editorial New), warmes Papier, Buchstabenabstand.
[4. Optical Halftone & Dot] Studio-Grafik-Handwerk, responsive dynamische Punktmatrix, Halbton-Wellenübergänge, Retro-Modern-Vibe.
[5. Tactile Physical UI] SaaS- & Tool-Meisterschaft, physische Federn, Gummi zug-Interaktionen, flüssige Tabs, Physik-Cursor.
[6. Cinematic Aerodynamic] Luftfahrt, Automobil, Mobilität; schwungvolle Flugbahnen, Telemetrie-HUDs, Horizontbeleuchtung, weitläufiger Maßstab.
[7. Vibrant Pop & Geometry] Kreativ-Apps, Verbrauchertools; fette flache Farbblöcke, elastische Formübergänge, knackige Typografie.
(Siehe references/design-styles.md für Code-Rezepte, Paletten und Typografie-Paarungen für jeden Stil).
4. Remotion-Projektarchitektur
Jedes Projekt verwendet die verifizierte, magische-Zahlen-freie Remotion-Struktur:
my-motion-project/
├── package.json # remotion, @remotion/cli, react, react-dom
├── remotion.config.ts # System Chrome/Edge GPU D3D11-Beschleunigung
├── tsconfig.json # ES2022, NodeNext, jsx: react-jsx
└── src/
├── index.ts # registerRoot(Root) Einstiegspunkt
├── Root.tsx # <Composition>-Registry (Abmessungen, fps, Dauer)
├── compositions/ # Master-Kompositions-Timeline
├── scenes/ # Modulare <Sequence>-Szenen
├── components/ # Wiederverwendbare UI, Markenlogos, Cursor, Mockups
└── constants/ # Palette, 120 BPM Timing-Helfer, Typografie
remotion.config.ts (System-Chrome-Integration)
import { Config } from '@remotion/cli/config';
import fs from 'node:fs';
const chromePath = 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe';
const edgePath = 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe';
if (fs.existsSync(chromePath)) {
Config.setBrowserExecutable(chromePath);
} else if (fs.existsSync(edgePath)) {
Config.setBrowserExecutable(edgePath);
}
Config.setVideoImageFormat('jpeg');
Config.setChromiumOpenGlRenderer('angle');
Config.setConcurrency(4);
5. Ausführung & Rendering-CLI
# 1. Interaktive Studio-Vorschau (durchsuchbare Timeline & Echtzeit-HMR)
npm run preview # oder: npx remotion preview src/index.ts
# 2. 60fps Master-MP4 rendern
npm run build # oder: npx remotion render src/index.ts <CompId> out.mp4
# 3. Hochauflösendes Keyframe-Standbild aufnehmen
npx remotion still src/index.ts <CompId> still_frame.png --frame=60
6. Referenzdokumentationsindex
Beim Verfassen spezifischer Aspekte einer Bewegtgrafik konsultiere diese detaillierten Anleitungen:
- structural-archetypes.md: 5 strukturelle Blaupausen (Mikro-Loops, Social Reels, Markenfilme, Mehrkapitel-Erklärvideos, Kontinuierliche Morphs).
- design-styles.md: 7 moderne Designstile (Swiss Neo-Brutalist, Dark Titanium, Editorial Serif, Optical Halftone, Tactile UI, Cinematic Mobility, Vibrant Pop) mit Paletten und Typografie.
- brand-identity-and-ci.md: Autonome Vektor-CI-Rekonstruktion, Logo-Reveal-Mechaniken, Farbregeln und Markenmotive.
- storytelling-and-narrative.md: Narrativer Bogen, visuelle Metaphern, Shared-Object-Übergänge und Tempo.
- asset-orchestration.md: Ken Burns Schwenken/Zoomen, Perspektiven-Mockups, SVG-Vektorabzeichen und visuelle Hierarchie.
- remotion-patterns.md: Spring-Mechaniken,
interpolate(), Kamera-Container, Stagger-Kaskaden und<Sequence>-Orchestrierung. - ui-motion-recipes.md: Cursor, Live-Zähler, Schieberegler, Modals, Benachrichtigungskarten und Grafiken.
- remotion-qa-and-verification.md: 3-Schritt-QA-Schleife, 10-Punkte-Poster-Checkliste und Headless-GPU-Rendering.
- timing.md: 120 BPM musikalische Schlagraster, Frame-Mathematik, Stagger-Offsets und Haltegrenzen.
- motion-math.md: Harmonische Federn, gesäter PRNG und logarithmischer Kamera-Zoom.
- gotchas.md: Chromium-Rendering-Fallen,
preserve-3d, Overflow-Masken und Textunschärfe-Vermeidung.