superyhee/hypr-video-skills

CLIによる動画生成

クイックリファレンス

# 設定ファイルを作成 → JSONを生成 → レンダリング
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

ワークフロー

- [ ] ステップ 1: リファレンスを読み、シーンを計画する
- [ ] ステップ 2: 設定ファイルを作成し、JSONを生成する
- [ ] ステップ 3: レンダリングして確認する

ステップ 1 — リファレンスを読み、シーンを計画する

1a. 以下のリファレンスを必ず読んでください:

• gen-canada.md — 設定仕様: theme() (24テーマ)、11のロールヘルパー、autoTracks()、インライン animIn/animOut/kf、SVGヘルパー、buildCanvas。注意点は ⚠️ マーカーでインラインに記載されています。

1b. シーンを計画する: 動画の種類を特定し、シーン名/長さをリストアップし、シーンごとに最適なSVGヘルパー、最適な要素と絵文字を選択します。

1c. 計画に基づいて追加のリファレンスを読む:

条件	リファレンス
SVGヘルパーを使用する場合 (ほぼ常に)	svg-helpers.md — 65すべてのヘルパーのパラメータ
フォントを選択する場合	font-assets.md — 18のバンドルフォントと組み合わせ
絵文字/Unicodeデコレーションを追加する場合	icons.md

ステップ 2 — 設定ファイルを作成し、JSONを生成する

2a. 設定.mjsファイルを作成します。設定ファイルとJSONは /tmp/ に配置します — examples/ には決して書き込まないでください。

export default function build(h) {
  const {
    makeShape, makeEffect, buildCanvas, theme, autoTracks,
    svgVignette, svgDotGrid, svgGradientOrb, svgParticles,
    svgCheckMark, svgNumberCounter, // ...必要に応じてSVGヘルパー
  } = h;

  const t = theme("cyberpunk");  // 24テーマ — 色 + ロールヘルパー + フォント
  const MAX = 25000;

  // ── グローバルレイヤー ──
  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 });

  // ── シーン 1: ヒーロー (0–7秒) ──
  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", "製品名", {
    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", "ここにタグライン", {
    x: 260, y: 540, start: 700, end: 6500,
    animIn: ["fadeIn", 800], animOut: ["fadeOut", 500],
  });

  // ── シーン 2: 機能 (6.5–16秒) ──
  // ... 以降のシーンも同様のパターン

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

  return buildCanvas({
    bg: t.BG, maxTime: MAX,
    // t.fonts はオブジェクト { Montserrat: {...}, "Fira Code": {...}, ... } — 配列ではありません
    // 追加フォント (例: CJK) を追加するには、オブジェクトスプレッドを使用:
    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. レンダリング前に、以下を確認してください:

1. すべてのテキストはロールヘルパー (t.hero … t.eyebrow) を使用している — 独自のフォント/サイズ/色が必要な場合 (例: コードブロック、Noto Sans SC を使用するCJK) のみ、生の makeText を使用する
2. すべての可視要素に animIn + animOut がある; 要素間の間隔は300〜500ms
3. SVG背景の不透明度 ≤ 0.15; シーンあたり2〜4個のヘルパー; グローバルレイヤーは 0–MAX にまたがる
4. maxTime >= 最後の要素の end

ステップ 3 — レンダリングして確認する

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

CLIフラグ: --fps 24|30|60, --quality low|medium|high|very_high, --format mp4|mov|mp3, --width N, --height N, -q (サイレントモード)。

レンダリングに失敗した場合 → gen-canada.md の ⚠️ 注意点を確認

重要なルール

1. maxTime >= 最大要素の end — 小さすぎると要素が途切れる
2. 設定ファイルは /tmp/ に配置 — examples/ には決して書き込まない
3. 常に最新APIを使用する — theme() + ロールヘルパー + インライン animIn/animOut/kf + autoTracks()
4. シーン構造 — 要素IDに s1_/s2_… のプレフィックスをシーンごとに付ける; コメントブロック // ── シーン N: タイトル (Xs–Ys) ── を使用する
5. トランジション は同じトラック上の隣接要素が必要 (エフェクトベースのフラッシュ/グリッチカットを推奨)
6. backgroundColor は bg: t.BG で設定 — 全画面の背景図形ではない
7. gen_canvas.mjs のパス — スキルルートから実行: node scripts/gen_canvas.mjs (skill/scripts/ ではない)
8. t.fonts はオブジェクトであり、配列ではない — フォント追加には { ...t.fonts, "追加フォント": { url: "...", fileType: "ttf" } } を使用。決して [...t.fonts] (配列スプレッド) を使用しない