superyhee/hypr-video-skills

Video-Generierung via CLI

Kurzübersicht

# Konfig schreiben → JSON generieren → rendern
node scripts/gen_canvas.mjs /tmp/video-<name>.mjs /tmp/video-<name>.json
npx hypr-video-cli /tmp/video-<name>.json -o ./output/<name>.mp4

Arbeitsablauf

- [ ] Schritt 1: Referenzen lesen & Szenen planen
- [ ] Schritt 2: Konfig erstellen & JSON generieren
- [ ] Schritt 3: Rendern & überprüfen

Schritt 1 — Referenzen lesen & Szenen planen

1a. Lesen Sie diese Referenzen (immer erforderlich):

• gen-canada.md — Konfig-Spezifikation: theme() (24 Themes), 11 Rollen-Helfer, autoTracks(), Inline animIn/animOut/kf, SVG-Helfer, buildCanvas. Fallstricke sind mit ⚠️ Markierungen versehen.

1b. Szenen planen: Videotyp identifizieren, Szenennamen/Dauern auflisten, beste SVG-Helfer pro Szene auswählen, beste Elemente und Emojis auswählen.

1c. Zusätzliche Referenzen basierend auf dem Plan lesen:

Wann	Referenz
Bei Verwendung von SVG-Helfern (fast immer)	svg-helpers.md — Parameter für alle 65 Helfer
Bei der Schriftauswahl	font-assets.md — 18 gebündelte Schriftarten & Paarungen
Beim Hinzufügen von Emoji/Unicode-Dekorationen	icons.md

Schritt 2 — Konfig erstellen & JSON generieren

2a. Schreiben Sie eine Konfigurationsdatei .mjs. Konfig und JSON gehören in /tmp/ — niemals in examples/ schreiben.

export default function build(h) {
  const {
    makeShape, makeEffect, buildCanvas, theme, autoTracks,
    svgVignette, svgDotGrid, svgGradientOrb, svgParticles,
    svgCheckMark, svgNumberCounter, // ...SVG-Helfer nach Bedarf
  } = h;

  const t = theme("cyberpunk");  // 24 Themes — Farben + Rollen-Helfer + Schriftarten
  const MAX = 25000;

  // ── Globale Ebenen ──
  const g_dot = svgDotGrid("g_dot", { start: 0, end: MAX, opacity: 0.04, color: t.ACCENT });
  const g_vig = svgVignette("g_vig", { start: 0, end: MAX, opacity: 0.6 });

  // ── Szene 1: Hero (0–7s) ──
  const s1_orb = svgGradientOrb("s1_orb", {
    x: 360, y: 60, w: 1200, h: 960, start: 0, end: 7500, opacity: 0.10, color: t.ACCENT,
  });
  const s1_title = t.hero("s1_title", "Produktname", {
    x: 160, y: 340, start: 0, end: 7000,
    animIn: ["blurIn", 1200], animOut: ["blurOut", 700],
    kf: { scale: { dur: 7000, amp: 0.02 } },
  });
  const s1_div = makeShape("s1_div", "rect", t.ACCENT, {
    x: 760, y: 510, w: 400, h: 3, start: 500, end: 6500,
    animIn: ["expandIn", 500], animOut: ["fadeOut", 300],
  });
  const s1_sub = t.subtitle("s1_sub", "Unterüberschrift hier", {
    x: 260, y: 540, start: 700, end: 6500,
    animIn: ["fadeIn", 800], animOut: ["fadeOut", 500],
  });

  // ── Szene 2: Features (6.5–16s) ──
  // ... weitere Szenen folgen dem gleichen Muster

  const elements = [g_dot, g_vig, s1_orb, s1_title, s1_div, s1_sub /* ... */];

  return buildCanvas({
    bg: t.BG, maxTime: MAX,
    // t.fonts ist ein OBJEKT { Montserrat: {...}, "Fira Code": {...}, ... } — KEIN Array
    // Um zusätzliche Schriftarten (z. B. CJK) hinzuzufügen, Objekt-Spread verwenden:
    fontAssets: {
      ...t.fonts,
      "Noto Sans SC": { url: "skill/assets/fonts/NotoSansSC-Variable.ttf", fileType: "ttf" },
    },
    elements, tracks: autoTracks(elements),
    fps: 30, quality: "medium",
  });
}

node scripts/gen_canvas.mjs /tmp/video-<name>.mjs /tmp/video-<name>.json

2b. Vor dem Rendern überprüfen:

1. Alle Texte verwenden Rollen-Helfer (t.hero … t.eyebrow) — makeText nur für benutzerdefinierte Schriftart/-größe/-farbe verwenden (z. B. Codeblöcke, CJK mit Noto Sans SC)
2. Jedes sichtbare Element hat animIn + animOut; Staffelung 300–500 ms zwischen Elementen
3. SVG-Hintergrunddeckkraft ≤ 0.15; 2–4 Helfer pro Szene; globale Ebenen spannen 0–MAX
4. maxTime >= letztes end des Elements

Schritt 3 — Rendern & überprüfen

npx hypr-video-cli /tmp/video-<name>.json -o ./output/<name>.mp4

CLI-Flags: --fps 24|30|60, --quality low|medium|high|very_high, --format mp4|mov|mp3, --width N, --height N, -q (leise).

Wenn das Rendern fehlschlägt → ⚠️ Fallstricke in gen-canada.md überprüfen

Kritische Regeln

1. maxTime >= größtes Element end — zu klein = Elemente werden abgeschnitten
2. Konfigurationsdateien in /tmp/ ablegen — niemals in examples/ schreiben
3. Immer moderne API verwenden — theme() + Rollen-Helfer + Inline animIn/animOut/kf + autoTracks()
4. Szenenstruktur — Element-IDs mit s1_/s2_… pro Szene prefixen; Kommentarblöcke // ── Szene N: Titel (Xs–Ys) ── verwenden
5. Übergänge erfordern benachbarte Elemente auf derselben Spur (Effekt-basierte Flash-/Glitch-Schnitte bevorzugen)
6. backgroundColor via bg: t.BG verwenden — keine Vollbild-Hintergrundform
7. gen_canvas.mjs Pfad — vom Skill-Root aus ausführen: node scripts/gen_canvas.mjs (NICHT skill/scripts/)
8. t.fonts ist ein Objekt, kein Array — { ...t.fonts, "Zusätzliche Schrift": { url: "...", fileType: "ttf" } } zum Hinzufügen von Schriftarten verwenden. Niemals [...t.fonts] (Array-Spread) verwenden