superyhee/hypr-video-skills

Generación de Video vía CLI

Referencia Rápida

# Escribir configuración → generar JSON → renderizar
node scripts/gen_canvas.mjs /tmp/video-<nombre>.mjs /tmp/video-<nombre>.json
npx hypr-video-cli /tmp/video-<nombre>.json -o ./output/<nombre>.mp4

Flujo de Trabajo

- [ ] Paso 1: Leer referencias y planificar escenas
- [ ] Paso 2: Construir configuración y generar JSON
- [ ] Paso 3: Renderizar y verificar

Paso 1 — Leer referencias y planificar escenas

1a. Leer estas referencias (siempre requeridas):

• gen-canvas.md — especificación de configuración: theme() (24 temas), 11 asistentes de roles, autoTracks(), animIn/animOut/kf en línea, ayudantes SVG, buildCanvas. Las trampas (pitfalls) están señaladas con ⚠️.

1b. Planificar escenas: identificar tipo de video, listar nombres de escenas/duraciones, elegir los mejores ayudantes SVG por escena, seleccionar los mejores elementos y emojis.

1c. Leer extras según el plan:

Cuándo	Referencia
Al usar ayudantes SVG (casi siempre)	svg-helpers.md — parámetros para los 65 ayudantes
Al elegir fuentes	font-assets.md — 18 fuentes incluidas y combinaciones
Al agregar decoraciones emoji/unicode	icons.md

Paso 2 — Construir configuración y generar JSON

2a. Escribir un archivo de configuración .mjs. La configuración y el JSON van en /tmp/ — nunca escribir en examples/.

export default function build(h) {
  const {
    makeShape, makeEffect, buildCanvas, theme, autoTracks,
    svgVignette, svgDotGrid, svgGradientOrb, svgParticles,
    svgCheckMark, svgNumberCounter, // ...ayudantes SVG según se necesiten
  } = h;

  const t = theme("cyberpunk");  // 24 temas — colores + asistentes de roles + fuentes
  const MAX = 25000;

  // ── Capas globales ──
  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 });

  // ── Escena 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", "Nombre del Producto", {
    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", "Eslogan aquí", {
    x: 260, y: 540, start: 700, end: 6500,
    animIn: ["fadeIn", 800], animOut: ["fadeOut", 500],
  });

  // ── Escena 2: Características (6.5–16s) ──
  // ... más escenas siguen el mismo patrón

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

  return buildCanvas({
    bg: t.BG, maxTime: MAX,
    // t.fonts es un OBJETO { Montserrat: {...}, "Fira Code": {...}, ... } — NO un array
    // Para agregar fuentes adicionales (ej. CJK), usar propagación de objetos:
    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-<nombre>.mjs /tmp/video-<nombre>.json

2b. Antes de renderizar, verificar:

1. Todo el texto usa asistentes de roles (t.hero … t.eyebrow) — usar makeText directamente solo para fuente/tamaño/color personalizados (ej. bloques de código, CJK con Noto Sans SC)
2. Cada elemento visible tiene animIn + animOut; escalonar 300–500 ms entre elementos
3. Opacidad de fondo SVG ≤ 0.15; 2–4 ayudantes por escena; las capas globales abarcan 0–MAX
4. maxTime >= el end del último elemento

Paso 3 — Renderizar y verificar

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

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

Si el renderizado falla → revisar las ⚠️ trampas en gen-canvas.md

Reglas Críticas

1. maxTime >= el end del elemento más grande — demasiado pequeño = elementos cortados
2. Los archivos de configuración van en /tmp/ — nunca escribir en examples/
3. Siempre usar la API moderna — theme() + asistentes de roles + animIn/animOut/kf en línea + autoTracks().
4. Estructura de escenas — prefijar IDs de elementos con s1_/s2_… por escena; usar bloques de comentarios // ── Escena N: Título (Xs–Ys) ──
5. Transiciones requieren elementos adyacentes en la misma pista (preferir cortes flash/glitch basados en efectos)
6. Usar backgroundColor mediante bg: t.BG — no una forma de fondo de pantalla completa
7. Ruta de gen_canvas.mjs — ejecutar desde la raíz de la habilidad: node scripts/gen_canvas.mjs (NO skill/scripts/)
8. t.fonts es un objeto, no un array — usar { ...t.fonts, "Fuente Extra": { url: "...", fileType: "ttf" } } para agregar fuentes. Nunca usar [...t.fonts] (propagación de array)