saisandeep17/pro-motion-graphics

Professionelle Bewegungsgrafiken (V2-Architektur)

Erstelle klare, deterministische, studioqualitative Bewegungsgrafikvideos, die wie von einem leitenden technischen Motion Director aussehen. Dieses Skill erzwingt strenge Anti-Schludrigkeits-Visualstandards, mathematische Physik, Multi-Engine-Routing und eine vollständige 10-stufige Produktionspipeline.

---

Wann dieses Skill aktiviert werden sollte

• Generieren von programmatischem Videocode (Remotion / React, HTML/CSS/SVG + GSAP oder HTML5 Canvas).
• Erstellen von Videokategorien: Social Reels/Shorts (9:16), Brand Promos (16:9 / 1:1), SaaS Product Launches, UI Micro-Demos, kinematische Kinetische Typografie oder technische Erklärvideos.
• Überarbeiten von Animationen, die wie „KI-Schludrigkeit" aussehen (matschige Unschärfeblobs, Neon-Mesh-Glühen, generische Verläufe, unverankerte CSS-Fades, mechanisches lineares Easing).
• Planen von framegenauen Storyboards, mathematischem Timing und Sounddesign-Synchronisation vor dem Schreiben von Code.

---

Modellausführungsregeln (Sonnet & Haiku optimiert)

1. Zahlen über Adjektive: Übersetze alle ästhetischen Absichten direkt in exakte numerische Tokens (Frame-Anzahlen, Spring stiffness/damping, Cubic-Bezier-Kurven, 8px-Raster-Inkremente und Hex/OKLCH-Farben). Beschreibe visuelle Feinheiten niemals mit vagen Adjektiven.
2. Deterministisches Frame-Mathe: Jede Animation muss strikt durch eine frame-Variable oder explizite Timeline progress ($0.0 \to 1.0$) gesteuert werden. Verwende niemals ungesätes Math.random(), setTimeout oder unverankerte CSS infinite-Keyframes, die während des Renderings desynchronisieren.
3. Nur GPU-sichere Eigenschaften: Animiere transform (translate3d, scale, rotate), opacity, clip-path oder SVG stroke-dashoffset. Animiere niemals width, height, top, left oder schweres filter: blur() pro Frame.
4. React-Regeln der Hooks-Hygiene: In Remotion ist spring() eine reine Berechnungsfunktion. Setze mathematischen Helfern niemals use voran (z. B. getStaggerSpringProgress() statt useStaggerSpring()), um Verstöße gegen die React-Regeln der Hooks innerhalb von .map()-Schleifen zu vermeiden.

---

Multi-Engine-Routing-Matrix

Bevor Projektecode generiert wird, bewerte die Aufgabenstellung anhand des Multi-Engine-Auswahlleitfadens:

• Engine A: Remotion (React): Am besten geeignet für komplexe UI-Mockups, SaaS-Launches, modulare Multi-Szenen-Videos, datengetriebene Reels und framegenauen CLI-Rendering.
• Engine B: HTML/CSS/SVG + GSAP: Am besten geeignet für kinetische Typografie, redaktionelle Markenmanifeste, SVG-Logo-Strichanimationen und leichtes Browser-Playback. Siehe GSAP-Muster.
• Engine C: HTML5 Canvas: Am besten geeignet für prozedurale Grafiken, Partikelnetzwerke, mathematische Animationen und generative visuelle Effekte.

---

Die 10-stufige Videoproduktionspipeline

Führe für jedes Projekt die folgenden aufeinanderfolgenden Schritte durch:

Schritt 1: Die Aufgabenstellung verstehen

Identifiziere Zielplattform, Seitenverhältnis, Dauer ($t$), FPS, Kernbotschaft, visuellen Ton und verfügbare Assets. Stelle nur wichtige fehlende Fragen (max. 4 Aufzählungspunkte). Wenn Details nicht angegeben sind, wende Studio-Standardwerte an:

• Seitenverhältnis: 16:9 (1920x1080) für Desktop/Web; 9:16 (1080x1920) für Social Media.
• Bildrate: 60fps für UI & Social Media; 30fps für Redaktion & Erklärvideos; 24fps für Kinematischen Stil.

Schritt 2: Kategorien-Routing

Ordne die Anfrage einer der 6 Kategorie-Blaupausen in Kategorie-Playbooks zu:

• Kategorie A: Social Reels, TikToks & Shorts (9:16, 60fps, 12s–30s)
• Kategorie B: Markenpromotion & Manifest (16:9 / 1:1, 30fps, 20s–45s)
• Kategorie C: SaaS-Produkt-Launch-Video (16:9, 60fps, 45s–90s)
• Kategorie D: Feature-Highlight / UI-Micro-Demo (1:1 / 4:5, 60fps, 10s–25s)
• Kategorie E: Kinematische Kinetische Typografie (16:9 / 9:16, 24/30fps, 15s–45s)
• Kategorie F: Erklär- & Lehrvideos (16:9, 30/60fps, 45s–120s). Detailliert im Erklärvideo-Playbook.

Schritt 3: Asset-Erkennung & -Überprüfung

Sammle authentische Marken-Assets (Logos, UI-Screenshots, Schriftarten, Farbpaletten).

• Behalte echte Markenlogos unverzerrt in ihrem Seitenverhältnis bei.
• Ersetze niemals echte Produktscreenshots durch erfundene Platzhalter-UI, wenn authentische Screenshots bereitgestellt werden.
• Überprüfe Asset-Pfade mit scripts/check-assets.

Schritt 4: Storyboard-Planung & mathematisches Timing

Erstelle eine explizite Zeitleistentabelle, die Frame-Zahlen aus Sekunden und FPS berechnet: $$\text{frame} = \text{round}(t \times fps)$$ Definiere Start-/Endzeiten der Szenen, visuelle Beschreibungen, Kameraübergänge und Audio-Cues. Stelle sicher, dass die Szenendauern zur Gesamtzieldauer passen, ohne versehentliche Überlappungen.

Schritt 5: Zentralisiertes Designsystem (BRAND_CONFIG)

Richte Design-Tokens ein, bevor Szenen-JSX/HTML geschrieben wird:

• Farben: Wähle ein kuratiertes System aus Anti-Schludrigkeits-Regeln (Swiss Technical Dark, Editorial Warm Paper oder Kinetic Mono).
• Typografie: Folge dem Typografie-Leitfaden (Display mit negativem Tracking -0.04em + Monospace-Metadaten mit positivem Tracking +0.08em + tabular-nums).
• Geometrie: Erzwinge konzentrische Eckradius-Mathematik: $R_{inner} = \max(0, R_{outer} - Padding)$.

Schritt 6: Modulare Produktionscode

Generiere sauberen, modularen Code basierend auf dem gewählten Engine-Starter in templates/:

• templates/remotion-starter/: Modulaire Remotion-Komposition mit config.ts, motion.ts und Komponenten.
• templates/gsap-starter/: Frame-deterministisches GSAP-Timeline-Setup.
• templates/canvas-starter/: Prozeduraler 2D-Canvas-Zeichenloop. Überprüfe die Struktur mit scripts/validate-project.

Schritt 7: Audio & Sounddesign

Integriere Sound-Layer gemäß Audio-Design-Leitfaden:

• Ducke Hintergrundmusik um 12–16 dB während gesprochener Voiceover-Segmente.
• Richte Übergangs-Whooshes 2 Frames vor dem visuellen Mittelpunkt aus; richte Einschlag-Thuds auf den exakten visuellen Kontaktframe aus.
• Stelle sicher, dass alle Musik lizenzfrei / für die kommerzielle Nutzung lizenziert ist.

Schritt 8: Rendering & Kodierung

Rendere mit hochwertigen deterministischen Einstellungen:

# Remotion High-Quality Web MP4 (H.264, CRF 18, YUV420P)
npx remotion render src/index.ts MainComposition out/video.mp4 --codec=h264 --crf=18

Schritt 9: Visuelle Qualitätssicherung

Führe die Video-Qualitäts-Checkliste aus:

• Rendere Vorschaustandbilder bei 25 %, 50 %, 75 % und 100 % der Dauer (npx remotion still ... --frame=N).
• Prüfe Textbeschneidung, 8px-Raster-Ausrichtung, Kontrastverhältnisse und Sicherheitszonen (9:16 oben 220px / unten 340px).
• Überprüfe die endgültige Videoausgabe mit scripts/inspect-output out/video.mp4.

Schritt 10: Lieferung & Übergabe

Stelle Folgendes bereit:

1. Gerendertes Videoausgabedatei (oder exakt reproduzierbaren Renderbefehl).
2. Sauberes Quellprojekt, das der Template-Architektur entspricht.
3. Referenzierte Assets, organisiert in public/.
4. Ausführungsanweisungen und Überprüfungslogs.

---

Verbindliche Qualitätstore

Bevor du eine Aufgabe zu Bewegungsgrafiken abschließt, überprüfe:

• Keine generischen filter: blur()-Blobs oder lila-blauen KI-Verläufe.
• Keine Verstöße gegen die React-Regeln der Hooks (verwende reine Helfer wie getStaggerSpringProgress).
• Alle Animationen deterministisch durch frame oder normalisiertes progress gesteuert.
• node scripts/validate-project.js <project-dir> beendet mit Code 0.
• node scripts/check-assets.js <project-dir> beendet mit Code 0.
• Renderausgabe verifiziert mit node scripts/inspect-output.js <output-path>.