superyhee/hypr-video-skills

Geração de Vídeos via CLI

Referência Rápida

# Escrever config → gerar JSON → renderizar
node scripts/gen_canvas.mjs /tmp/video-<nome>.mjs /tmp/video-<nome>.json
npx hypr-video-cli /tmp/video-<nome>.json -o ./output/<nome>.mp4

Fluxo de Trabalho

- [ ] Etapa 1: Ler referências e planejar cenas
- [ ] Etapa 2: Construir config e gerar JSON
- [ ] Etapa 3: Renderizar e verificar

Etapa 1 — Ler referências e planejar cenas

1a. Leia estas referências (sempre obrigatórias):

• gen-canvas.md — especificação da config: theme() (24 temas), 11 helpers de função, autoTracks(), animIn/animOut/kf inline, helpers SVG, buildCanvas. As armadilhas estão marcadas com ⚠️.

1b. Planeje cenas: identifique o tipo de vídeo, liste nomes/durações das cenas, escolha os melhores helpers SVG por cena e os melhores elementos e emojis.

1c. Leia materiais extras conforme o plano:

Quando	Referência
Usando helpers SVG (quase sempre)	svg-helpers.md — parâmetros de todos os 65 helpers
Escolhendo fontes	font-assets.md — 18 fontes inclusas e combinações
Adicionando emojis/decoracoes unicode	icons.md

Etapa 2 — Construir config e gerar JSON

2a. Escreva um arquivo de config .mjs. Config e JSON vão em /tmp/ — nunca escreva em examples/.

export default function build(h) {
  const {
    makeShape, makeEffect, buildCanvas, theme, autoTracks,
    svgVignette, svgDotGrid, svgGradientOrb, svgParticles,
    svgCheckMark, svgNumberCounter, // ...helpers SVG conforme necessário
  } = h;

  const t = theme("cyberpunk");  // 24 temas — cores + helpers de função + fontes
  const MAX = 25000;

  // ── Camadas globais ──
  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 });

  // ── Cena 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", "Product Name", {
    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", "Tagline goes here", {
    x: 260, y: 540, start: 700, end: 6500,
    animIn: ["fadeIn", 800], animOut: ["fadeOut", 500],
  });

  // ── Cena 2: Features (6.5–16s) ──
  // ... mais cenas seguem o mesmo padrão

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

  return buildCanvas({
    bg: t.BG, maxTime: MAX,
    // t.fonts é um OBJETO { Montserrat: {...}, "Fira Code": {...}, ... } — NÃO é um array
    // Para adicionar fontes extras (ex.: CJK), use expansão de objeto:
    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-<nome>.mjs /tmp/video-<nome>.json

2b. Antes de renderizar, verifique:

1. Todos os textos usam helpers de função (t.hero … t.eyebrow) — use makeText puro apenas para fonte/tamanho/cor personalizados (ex.: blocos de código, CJK com Noto Sans SC)
2. Cada elemento visível tem animIn + animOut; espaçamento de 300–500ms entre elementos
3. Opacidade do bg SVG ≤ 0.15; 2–4 helpers por cena; camadas globais abrangem 0–MAX
4. maxTime >= último end do elemento

Etapa 3 — Renderizar e verificar

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

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

Se a renderização falhar → verifique as armadilhas ⚠️ em gen-canvas.md

Regras Críticas

1. maxTime >= maior end do elemento — muito pequeno = elementos cortados
2. Arquivos de config vão em /tmp/ — nunca escreva em examples/
3. Sempre use API moderna — theme() + helpers de função + animIn/animOut/kf inline + autoTracks().
4. Estrutura de cenas — prefixe IDs de elementos com s1_/s2_… por cena; use blocos de comentário // ── Cena N: Título (Xs–Ys) ──
5. Transições requerem elementos adjacentes na mesma trilha (prefira cortes flash/glitch baseados em efeito)
6. Use backgroundColor via bg: t.BG — não uma forma de fundo em tela cheia
7. Caminho do gen_canvas.mjs — execute a partir da raiz da skill: node scripts/gen_canvas.mjs (NÃO skill/scripts/)
8. t.fonts é um objeto, não um array — use { ...t.fonts, "Fonte Extra": { url: "...", fileType: "ttf" } } para adicionar fontes. Nunca use [...t.fonts] (expansão de array)