Fähigkeit: Produkt-Launch-Video
Diese Fähigkeit führt dich durch die Erstellung hochwertiger, erstklassiger Produkt-Launch-Videos mit Hyperframes. Sie betont einen strukturierten Arbeitsablauf von der Markenfindung bis zur abschließenden Verifikation.
Nutzung der offiziellen Hyperframes-Fähigkeiten
Diese Fähigkeit fungiert als Regisseur und Architekt für dein Videoprojekt. Um technische Genauigkeit und Zugriff auf die neuesten Framework-Patterns zu gewährleisten, musst du sie in Verbindung mit den offiziellen Hyperframes-Fähigkeiten verwenden.
Bevor du Code schreibst, solltest du:
- Die offizielle /hyperframes-Fähigkeit aufrufen, um die Kompositionsregeln, Datenattribut-Semantik und Framework-Einschränkungen zu überprüfen.
- Die offizielle /gsap-Fähigkeit aufrufen, um detaillierte Timeline-Referenzen, Easing-Funktionen und komplexe Animationsmuster zu erhalten.
Durch die Kombination der strategischen Anleitung dieser Fähigkeit mit der technischen Dokumentation der offiziellen Fähigkeiten wirst du produktionsreife Videokompositionen erstellen.
Zustandslose Projekterstellung (KRITISCH)
Dieses Verzeichnis (hyperframes-product-launch-video) ist ein schreibgeschützter Vorlagen- und Fähigkeitsordner. Du darfst niemals projektspezifische Dateien hier speichern.
Wann immer du ein neues Videoprojekt erstellst:
- Zielverzeichnis: Alle Projektdateien müssen im Ziel-Videoprojektordner des Nutzers erstellt werden (z.B.
mein-neues-video/odermein-neues-video/assets/). - Projekt-DNA: Erzeuge die
brand_dna.jsoninnerhalb des Zielprojekt-assets/- oder -Wurzelordners. - Art Direction: Speichere die endgültige
ART_DIRECTION.mdim Zielprojektordner. - Keine Seiteneffekte: Ändere während eines Projektdurchlaufs keine Dateien innerhalb dieses Fähigkeitsordners.
Arbeitsablauf
1. Die Befragungsphase (Marken-DNA)
Bevor du beginnst, musst du die Marke verstehen.
- Website-Analyse: Verwende Playwright, um die Website des Nutzers zu besuchen. Extrahiere Markenfarben, Typografie (Schriftarten) und Kernwertversprechen.
- Asset-Anfrage: Bitte den Nutzer um Logos und Icons. Gib an, dass saubere, transparente, eng zugeschnittene PNGs oder SVGs benötigt werden.
- Video-Typ-Auswahl: Frage, ob es sich um ein 100% Motion-Graphics-Video oder ein Hybridvideo handelt (z.B. Gründer spricht + Hyperframes Motion-Graphics).
2. Die Planungsphase (Art Direction)
Schreibe NIEMALS HTML vor der Planung.
- Art Direction generieren: Erstelle ein
ART_DIRECTION.md-Dokument basierend auf der Art-Direction-Vorlage. - Szenenaufteilung: Definiere jede Sekunde des Videos und gib visuelle Aktionen, Kamerabewegungen, Easing-Funktionen und Soundeffekte an.
3. Implementierung (Premium Motion Design)
Wende erstklassige Motion-Design-Prinzipien an. Siehe Motion-Design-Patterns für Code-Snippets.
- Apple-ähnliche Kamera: Verwende massive Makro-Zooms und Snap-Zooms (
back.out). - Eraser Reveal: Gestaffelte Text-Transparenz, die von einem gleitenden Logo „aufgefressen“ wird.
- Clash/Shatter: Physikalische Aufpralleffekte mit GSAP Scatter.
- Glassmorphismus: Hochwertige UI-Elemente mit
backdrop-filter: blur(40px). - Typewriter-Physik: Hüpfende Spans, die den Cursor verschieben.
4. Sounddesign (SFX)
- Einkaufsliste: Stelle dem Nutzer eine „Sounddesign-Einkaufsliste“ basierend auf dem Storyboard zur Verfügung.
- Synchronisation: Verwende
<audio data-start="...">-Tags, um die GSAP-Treffer perfekt zu synchronisieren.
5. Verifikation & Fehlerbehebung
- Häufige Fehler: Überprüfe die kritischen Fallstricke, um häufige Hyperframes-Bugs zu vermeiden (Durationskonflikte, fehlende Ziele usw.).
- FFmpeg: Falls das Rendern fehlschlägt, leite den Nutzer an, FFmpeg lokal zu installieren.
Best Practices
- Atomare Szenen: Halte Szenen modular und streng durch
data-startunddata-durationverwaltet. - Sichtbarkeitsmanagement: Verwende
autoAlphafür Szenenübergänge, um sauberes Suchen zu gewährleisten. - Layout vs. Transform: Verwende physische Abmessungen für Flexbox-Abstände und Transformationen für visuelle Effekte.