oyi77/1ai-skills — Produkt-Launch-Video mit HyperFrames

Übersicht

Diese Fähigkeit erstellt ein Produkt-Launch-Video – Hero-Shot, Feature-Callouts, Timing – als HyperFrames-Komposition. Verwende sie, wenn eine neue Version einen prägnanten, markenfähigen Ankündigungsclip benötigt. Es rendert die endgültige MP4 aus den von dir bereitgestellten Produkt-Assets.

HyperFrames – Produkt-Launch-Video

Erstelle Produkt-Launch-Videos, indem du HTML-Kompositionen schreibst, die HyperFrames in deterministische MP4-Dateien rendert. Die agenten-native Videopipeline: LLMs schreiben HTML (ihre Erstsprache), HyperFrames rendert bildgenaue Videos über Headless Chrome + FFmpeg.

Wann verwenden

• Der Benutzer möchte ein Produkt-Launch-Video aus einer URL, einem Briefing oder einem Skript
• Der Benutzer möchte eine Website-Tour / Showcase mit den eigenen Bildern des Produkts
• Der Benutzer möchte einen Social-Clip (TikTok/Reels/Shorts) mit kinetischen Untertiteln und Branding
• Der Benutzer möchte ein Marketing-/Promo-Video mit animierten Overlays und Musik
• Der Benutzer sagt „Mach mir ein Video“ und liefert eine Produkt-URL oder Beschreibung

Wann NICHT verwenden

• Der Benutzer möchte echte Personen / UGC / Studio-Inhalte (benötigt Kamera, nicht HTML)
• Der Benutzer möchte Live-Streaming / Live-Commerce (benötigt RTMP-Einspeisung)
• Der Benutzer möchte ein Interview mit sprechendem Kopf (verwende hyperframes-embedded-captions oder hyperframes-talking-head-recut)
• Der Benutzer möchte einen reinen Erklärfilm ohne Produkt/URL (verwende hyperframes-faceless-explainer)
• Der Benutzer möchte eine Präsentation/Foliensatz (verwende hyperframes-slideshow)

Workflow

0 · Projekt initialisieren

npx hyperframes init my-launch-video
cd my-launch-video

Dies erstellt das Projektgerüst mit index.html, package.json und der konfigurierten HyperFrames-CLI.

1 · Video planen

• Eingabe: Produkt-URL, Briefing oder Skript
• Ausgabe: Storyboard mit 3–6 Szenen und Timing (insgesamt 30–90 s optimal)
• Budget: Titel ≤2s, Abspann ≤3s, mittlere Szenen ≈8–12s jede
• Designsprache wählen: Durchstöbere hyperframes.heygen.com/design nach frame.md-Vorlagen

2 · Die Kompositions-HTML schreiben

Der Kompositionsvertrag:

<!doctype html>
<html lang="en">
  <body>
    <div
      id="main"
      data-composition-id="intro"
      data-start="0"
      data-duration="15"
      data-width="1080"
      data-height="1920"
      data-fps="30"
    >
      <div
        class="clip"
        data-start="0"
        data-duration="5"
        data-track-index="0"
      >
        <!-- Szeneninhalt -->
      </div>
    </div>
  </body>
</html>

Wichtige Attribute:

• data-composition-id: eindeutige ID für die Komposition
• data-start / data-duration: Timing in Sekunden
• data-width / data-height: Viewport-Abmessungen (1080×1920 für 9:16)
• data-fps: Bildrate (30 Standard)
• class="clip": markiert zeitgesteuerte Elemente
• data-track-index: Ebenenreihenfolge (höher = oben)

3 · Suchbare Animationen verdrahten

Verwende GSAP (empfohlen), CSS-Keyframes oder WAAPI. Alle Animationen müssen suchbar sein (deterministisch – gleicher Frame zur gleichen Zeit, bei jedem Rendern).

GSAP-Muster (empfohlen):

const tl = gsap.timeline({ paused: true });
tl.to("#title", { opacity: 1, y: 0, duration: 0.8, ease: "power4.out" }, 0.5);
tl.to("#image", { scale: 1, opacity: 1, duration: 1.2, ease: "power3.out" }, 1.0);
window.__timelines = { main: tl };

CSS-Keyframes-Muster:

@keyframes fadeInUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.animate-in {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

4 · Medien hinzufügen

• Bilder: in das public/-Verzeichnis herunterladen, Referenz via staticFile() oder relativem Pfad
• Videohintergründe: in assets/ ablegen, via data-loop loopen
• Audio/BGM: via <audio data-start="0" data-duration="15" src="./bgm.mp3"> hinzufügen
• Voiceover: via TTS generieren, Untertitel auf Wortzeitstempel abstimmen

5 · Linten und prüfen

npx hyperframes check        # Kompositionsvertrag validieren
npx hyperframes lint         # auf häufige Fehler prüfen

Behebe alle Fehler vor dem Fortfahren. Warnungen sind akzeptabel, sollten aber überprüft werden.

6 · Vorschau

npx hyperframes preview      # öffnet Hyperframes Studio mit HMR

Überprüfe 3–4 Beats via __player.seek(time) auf der Rohkompositionsseite. Überprüfe:

• Animationen werden zum richtigen Zeitpunkt ausgelöst
• Keine weißen Blitze an Schnitten (undurchsichtiger Bühnenhintergrund)
• Untertitel sichtbar und lesbar
• Audio-Pegel ausgewogen

7 · Rendern

npx hyperframes render --output launch-video.mp4

Überprüfe die Ausgabe:

ffmpeg -ss 3 -i launch-video.mp4 -frames:v 1 frame-3s.png  # Untertitel prüfen
ffmpeg -ss 15 -i launch-video.mp4 -frames:v 1 frame-15s.png # Szene prüfen

Anti-Rationalisierungs-Tabelle

Rationalisierung	Realität
„Ich benutze einfach einen Videoeditor“	GUI-Editoren sind nicht agenten-nativ; HTML ist das, was LLMs am besten schreiben
„Ich überspringe den Lint-Schritt“	Lint fängt Kompositionsvertragsfehler, die Rendering unterbrechen
„Ich verwende stattdessen Remotion“	Remotion erfordert React-Denken; HTML ist einfacher für Agenten
„Ich füge Trägheitsanimationen ein, um Zeit zu füllen“	Trägheitswobble ist verboten – jede Phase muss performen (siehe hyperframes-cut-the-curve)
„Ich zentriere den Inhalt bei 42%, um Platz für Untertitel zu lassen“	Untertitel sind ein Overlay – zentriere auf dem wahren Zentrum (y = H/2)
„Ich verwende einen Crossfade zwischen den Szenen“	Crossfades haben keinen Träger – verwende cut-the-curve für Standard-Grenzen
„Ich schreibe eine große HTML-Datei ohne Szenen“	Szenen sind die Einheit der Komposition – jede bekommt ihren eigenen Clip-Wrapper
„Ich überspringe die Vorschau und rendere einfach“	Die Vorschau fängt Timing-Fehler, die Renderzeit verschwenden

Code-Beispiel

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a0a; }
      #main {
        position: relative;
        width: 1080px;
        height: 1920px;
        overflow: hidden;
      }
      .scene {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.5s ease;
      }
      .scene.active { opacity: 1; }
      .hook-bg {
        background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 80px;
        text-align: center;
        color: white;
        font-family: system-ui, sans-serif;
      }
      .hook-text {
        font-size: 72px;
        font-weight: 800;
        line-height: 1.1;
        transform: translateY(40px);
        opacity: 0;
      }
      .animate-in {
        animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }
      @keyframes fadeInUp {
        from { transform: translateY(40px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }
    </style>
  </head>
  <body>
    <div
      id="main"
      data-composition-id="product-ad"
      data-start="0"
      data-duration="15"
      data-width="1080"
      data-height="1920"
      data-fps="30"
    >
      <div class="scene hook-bg" data-start="0" data-duration="5" data-track-index="0">
        <h1 class="hook-text animate-in" data-start="0.5" data-duration="4">
          Produktname
        </h1>
      </div>
    </div>
    <script>
      // Szenenaktivierung via IntersectionObserver oder manuellem Timing
      const scenes = document.querySelectorAll('.scene');
      scenes.forEach(scene => {
        const start = parseFloat(scene.dataset.start);
        const duration = parseFloat(scene.dataset.duration);
        setTimeout(() => scene.classList.add('active'), start * 1000);
        setTimeout(() => scene.classList.remove('active'), (start + duration) * 1000);
      });
    </script>
  </body>
</html>

Überprüfung

• Komposition besteht npx hyperframes check mit 0 Fehlern
• Alle Szenen haben data-start, data-duration, data-track-index
• Animationen sind suchbar (deterministisch, nicht wall-clock-abhängig)
• Vorschau zeigt korrektes Timing bei 3+ stichprobenartig überprüften Beats
• Gerendertes MP4 hat keine weißen Blitze, eingefrorene Frames oder fehlende Untertitel
• Audio-Pegel sind ausgewogen (Voiceover-Carve angewendet, falls nötig)
• Ausgabeauflösung entspricht dem Ziel (1080×1920 für 9:16, 1920×1080 für 16:9)